WPF Custom button Style (button length adaptive with content length)

The code is as follows:

1  <Stylex:key= "ButtonStyle"TargetType= "button">2         <Setter Property= "Template">3             <Setter.value>4                 <ControlTemplateTargetType= "button">5                     <!--StackPanel is used to control the adaptation of the position when the button length changes. -6                     <StackPanelx:name= "Sppanel"Orientation= "Horizontal"HorizontalAlignment="{TemplateBinding HorizontalAlignment}" >7                         <Grid>8                             <Grid.background>9                                 <ImageBrushStretch= "Fill"ImageSource= "Btn-n.png"/>Ten                             </Grid.background> One                             <grid.columndefinitions> A                                 <ColumnDefinition></ColumnDefinition> -                                 <ColumnDefinition></ColumnDefinition> -                             </grid.columndefinitions> the                             <Borderx:name= "Logoimg"Width= "$"Height= "Wuyi"> -                                 <Border.background> -                                     <ImageBrushStretch= "None"ImageSource= "Btn-icon-up.png"/> -                                 </Border.background> +                             </Border> -                             <!--Viewbox is control when text is longer than the maximum limit, the text is reduced - +                             <ViewboxGrid.column= "1"MaxWidth= " the"> A                                 <Labelx:name= "Lblcontent"Padding= "0,0,5,0"verticalcontentalignment= "Center"Content="{TemplateBinding Content}"/> at                             </Viewbox> -                         </Grid> -                     </StackPanel> -                 </ControlTemplate> -             </Setter.value> -         </Setter> in     </Style>

View Code

Effects such as:

When content becomes longer:

Knowledge to use:

1. StackPanel: Used to control the position of the button, you can set the center, or left and right alignment;

2. Viewbox: When used to achieve long content, reduce the text

* * Code that has been streamlined and added to the trigger:

1  <Stylex:key= "ButtonStyle"TargetType= "button">2         <Setter Property= "Template">3             <Setter.value>4                 <ControlTemplateTargetType= "button">5                     <!--StackPanel is used to control the adaptation of the position when the button length changes. -6                     <StackPanelx:name= "Sppanel"Orientation= "Horizontal"HorizontalAlignment="{TemplateBinding HorizontalAlignment}" >7                         <Stackpanel.background>8                             <ImageBrushStretch= "Fill"ImageSource= "Btn-n.png"/>9                         </Stackpanel.background>Ten                         <Borderx:name= "Logoimg"Width= "+"Height= "+"Margin= "5,0,0,0"> One                             <Border.background> A                                 <ImageBrushStretch= "UniformToFill"ImageSource= "Btn-icon-up.png"/> -                             </Border.background> -                         </Border> the                         <!--Viewbox is control when text is longer than the maximum limit, the text is reduced - -                         <ViewboxGrid.column= "1"MaxWidth= " the"Margin= "5,0"> -                             <Labelx:name= "Lblcontent"verticalcontentalignment= "Center"Content="{TemplateBinding Content}"/> -                         </Viewbox> +                         <!--</Grid> - -                     </StackPanel> +                     <controltemplate.triggers> A                         <Trigger Property= "IsMouseOver"Value= "true"> at                             <SetterTargetName= "Sppanel" Property= "Background"> -                                 <Setter.value> -                                     <ImageBrushStretch= "Fill"ImageSource= "Btn-h.png"/> -                                 </Setter.value> -                             </Setter> -                             <SetterTargetName= "Logoimg" Property= "Background"> in                                 <Setter.value> -                                     <ImageBrushStretch= "UniformToFill"ImageSource= "Btn-icon-right.png"/> to                                 </Setter.value> +                             </Setter> -                         </Trigger> the                     </controltemplate.triggers> *                 </ControlTemplate> $             </Setter.value>Panax Notoginseng         </Setter> -     </Style>

View Code

WPF Custom button Style (button length adaptive with content length)