WPF自定义Button样式(按钮长度随Content长度自适应)

代码如下：

 1  <Style x:Key="ButtonStyle" TargetType="Button">
 2         <Setter Property="Template">
 3             <Setter.Value>
 4                 <ControlTemplate TargetType="Button">
 5                     <!--StackPanel是用来控制当Button长度变化时，位置的适应-->
 6                     <StackPanel x:Name="spPanel" Orientation="Horizontal" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" >
 7                         <Grid>
 8                             <Grid.Background>
 9                                 <ImageBrush Stretch="Fill" ImageSource="btn-n.png"/>
10                             </Grid.Background>
11                             <Grid.ColumnDefinitions>
12                                 <ColumnDefinition></ColumnDefinition>
13                                 <ColumnDefinition></ColumnDefinition>
14                             </Grid.ColumnDefinitions>
15                             <Border x:Name="logoImg" Width="60" Height="51">
16                                 <Border.Background>
17                                     <ImageBrush Stretch="None" ImageSource="btn-icon-up.png"/>
18                                 </Border.Background>
19                             </Border>
20                             <!--Viewbox是控制当文字的长度超出最长限制时，对文字进行缩小处理-->
21                             <Viewbox Grid.Column="1" MaxWidth="350">
22                                 <Label x:Name="lblContent" Padding="0,0,5,0" VerticalContentAlignment="Center" Content="{TemplateBinding Content}"/>
23                             </Viewbox>
24                         </Grid>
25                     </StackPanel>
26                 </ControlTemplate>
27             </Setter.Value>
28         </Setter>
29     </Style>

View Code

效果如下图：

当内容变长时：

使用到的知识：

1. StackPanel：用来控制Button的位置，可以设置居中，或左右对齐；

2. Viewbox：用来实现内容超长时，将文字缩小

**精简过并加上触发器的代码：

 1  <Style x:Key="ButtonStyle" TargetType="Button">
 2         <Setter Property="Template">
 3             <Setter.Value>
 4                 <ControlTemplate TargetType="Button">
 5                     <!--StackPanel是用来控制当Button长度变化时，位置的适应-->
 6                     <StackPanel x:Name="spPanel" Orientation="Horizontal" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" >
 7                         <StackPanel.Background>
 8                             <ImageBrush Stretch="Fill" ImageSource="btn-n.png"/>
 9                         </StackPanel.Background>
10                         <Border x:Name="logoImg" Width="53" Height="43" Margin="5,0,0,0">
11                             <Border.Background>
12                                 <ImageBrush Stretch="UniformToFill" ImageSource="btn-icon-up.png"/>
13                             </Border.Background>
14                         </Border>
15                         <!--Viewbox是控制当文字的长度超出最长限制时，对文字进行缩小处理-->
16                         <Viewbox Grid.Column="1" MaxWidth="350" Margin="5,0">
17                             <Label x:Name="lblContent"  VerticalContentAlignment="Center" Content="{TemplateBinding Content}"/>
18                         </Viewbox>
19                         <!--</Grid>-->
20                     </StackPanel>
21                     <ControlTemplate.Triggers>
22                         <Trigger Property="IsMouseOver" Value="true">
23                             <Setter TargetName="spPanel" Property="Background">
24                                 <Setter.Value>
25                                     <ImageBrush Stretch="Fill"  ImageSource="btn-h.png"/>
26                                 </Setter.Value>
27                             </Setter>
28                             <Setter TargetName="logoImg" Property="Background">
29                                 <Setter.Value>
30                                     <ImageBrush Stretch="UniformToFill" ImageSource="btn-icon-right.png"/>
31                                 </Setter.Value>
32                             </Setter>
33                         </Trigger>
34                     </ControlTemplate.Triggers>
35                 </ControlTemplate>
36             </Setter.Value>
37         </Setter>
38     </Style>

View Code

相关阅读:
OpenCASCADE 平面与球面求交
 OpenCASCADE 平面求交
 为 Taro 的小程序 TS 模板加点料
 async-validator 的中文文档翻译
 JS中的与冒号的作用、箭头函数相关的一道题
 为Electron 安装 vue-devtool等扩展
 小程序做一个能够左右滑动切换的多tab页面
 使用sourceMap文件定位小程序错误信息
 手写一个promise
通过页面预加载（preload）提升小程序的响应速度
原文地址：https://www.cnblogs.com/tommy-huang/p/5091602.html