WPF自定義Button樣式(按鈕長度隨Content長度自適應)

本文轉載自查看原文 2015-12-31 14:18 3719 C#相關/ WPF相關/ WPF自定義自適應Button

代碼如下：

 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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 WPF自定義控件與樣式-自定義按鈕（Button） wpf 自定義Button按鈕【WPF】自定義形狀的按鈕Button WPF自定義按鈕Button控件（一） WPF自定義button按鈕控件 WPF 自定義Button控件及樣式 WPF Button自定義樣式收集帶有圖片的Button WPF自定義漂亮的按鈕樣式 WPF自定義控件與樣式(13)-自定義窗體Window & 自適應內容大小消息框MessageBox Android自定義Button按鈕顯示樣式