WPF 实现图标按钮

假设需要实现一个图标和文本结合的按钮 ，普通做法是 直接重写该按钮的模板；

如果想作为通用的呢？

两种做法：

1. 附加属性
2. 自定义控件

推荐使用附加属性的形式

第一种：附加属性

创建Button的附加属性  ButtonExtensions

 1 public static class ButtonExtensions
 2 {
 3     // Using a DependencyProperty as the backing store for IconWidth.  This enables animation, styling, binding, etc...
 4     public static readonly DependencyProperty IconWidthProperty =
 5         DependencyProperty.RegisterAttached("IconWidth", typeof(int), typeof(ButtonExtensions), new PropertyMetadata(0));
 6
 7     public static int GetIconWidth(DependencyObject obj)
 8     {
 9         return (int)obj.GetValue(IconWidthProperty);
10     }
11
12     public static void SetIconWidth(DependencyObject obj, int value)
13     {
14         obj.SetValue(IconWidthProperty, value);
15     }
16
17     // Using a DependencyProperty as the backing store for IconHeight.  This enables animation, styling, binding, etc...
18     public static readonly DependencyProperty IconHeightProperty =
19         DependencyProperty.RegisterAttached("IconHeight", typeof(int), typeof(ButtonExtensions), new PropertyMetadata(0));
20
21     public static int GetIconHeight(DependencyObject obj)
22     {
23         return (int)obj.GetValue(IconHeightProperty);
24     }
25
26     public static void SetIconHeight(DependencyObject obj, int value)
27     {
28         obj.SetValue(IconHeightProperty, value);
29     }
30
31     // Using a DependencyProperty as the backing store for IconGeometry.  This enables animation, styling, binding, etc...
32     public static readonly DependencyProperty IconGeometryProperty =
33         DependencyProperty.RegisterAttached("IconGeometry", typeof(Geometry), typeof(ButtonExtensions), new PropertyMetadata((object)null));
34
35     public static Geometry GetIconGeometry(DependencyObject obj)
36     {
37         return (Geometry)obj.GetValue(IconGeometryProperty);
38     }
39
40     public static void SetIconGeometry(DependencyObject obj, Geometry value)
41     {
42         obj.SetValue(IconGeometryProperty, value);
43     }
44
45 }

样式

 1 <ResourceDictionary
 2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4     xmlns:coreHelper="clr-namespace:NeonGenesis.Core.AttachedProperties;assembly=NeonGenesis.Core">
 5     <Style x:Key="ButtonVerBase" TargetType="{x:Type Button}">
 6         <Setter Property="BorderThickness" Value="0" />
 7         <Setter Property="HorizontalContentAlignment" Value="Center" />
 8         <Setter Property="VerticalContentAlignment" Value="Center" />
 9         <Setter Property="Padding" Value="10,5" />
10         <Setter Property="FrameworkElement.Cursor" Value="Hand" />
11         <Setter Property="UIElement.SnapsToDevicePixels" Value="True" />
12         <Setter Property="coreHelper:ButtonExtensions.IconHeight" Value="24" />
13         <Setter Property="coreHelper:ButtonExtensions.IconWidth" Value="24" />
14         <Setter Property="Template">
15             <Setter.Value>
16                 <ControlTemplate TargetType="{x:Type ButtonBase}">
17                     <Border
18                         Name="border"
19                         Background="{TemplateBinding Background}"
20                         BorderBrush="{TemplateBinding BorderBrush}"
21                         BorderThickness="{TemplateBinding BorderThickness}"
22                         SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
23                         <Grid>
24                             <StackPanel
25                                 Margin="{TemplateBinding Padding}"
26                                 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
27                                 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
28                                 Orientation="Vertical">
29                                 <Path
30                                     Name="pathIcon"
31                                     Width="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=(coreHelper:ButtonExtensions.IconWidth)}"
32                                     Height="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=(coreHelper:ButtonExtensions.IconHeight)}"
33                                     Margin="0,0,0,5"
34                                     Data="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=(coreHelper:ButtonExtensions.IconGeometry)}"
35                                     Fill="{TemplateBinding Foreground}"
36                                     Stretch="Uniform" />
37                                 <ContentPresenter
38                                     Name="contentPresenter"
39                                     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
40                                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
41                                     Focusable="False"
42                                     RecognizesAccessKey="True"
43                                     SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
44                             </StackPanel>
45                         </Grid>
46                     </Border>
47                     <ControlTemplate.Triggers>
48                         <Trigger Property="coreHelper:ButtonExtensions.IconGeometry" Value="{x:Null}">
49                             <Setter TargetName="pathIcon" Property="Visibility" Value="Collapsed" />
50                         </Trigger>
51                         <Trigger Property="Content" Value="{x:Null}">
52                             <Setter TargetName="pathIcon" Property="Margin" Value="0" />
53                         </Trigger>
54                     </ControlTemplate.Triggers>
55                 </ControlTemplate>
56             </Setter.Value>
57         </Setter>
58     </Style>
59 </ResourceDictionary>

使用示例

 1     <Button
 2         Width="80"
 3         Height="80"
 4         coreHelper:ButtonExtensions.IconGeometry="{StaticResource RunningGeometry}"
 5         coreHelper:ButtonExtensions.IconHeight="40"
 6         coreHelper:ButtonExtensions.IconWidth="40"
 7         Background="#1e90ff"
 8         Content="运行"
 9         Foreground="White"
10         Style="{StaticResource ButtonVerBase}" />

RunningGeometry为

<PathGeometry x:Key="RunningGeometry">M41.355947 0h572.962133a41.355947 41.355947 0 0 1 41.355947 41.355947v100.037973H0V41.355947A41.355947 41.355947 0 0 1 41.355947 0zM0 210.356907v772.287146A41.355947 41.355947 0 0 0 41.355947 1024h941.288106A41.355947 41.355947 0 0 0 1024 982.644053V210.356907z m851.88608 295.867733L581.973333 776.137387a47.786667 47.786667 0 0 1-66.710186 0.832853 47.786667 47.786667 0 0 1-7.796054-6.294187l-115.083946-115.0976-120.54528 120.558934a47.786667 47.786667 0 0 1-67.611307 0 47.786667 47.786667 0 0 1 0-67.611307l147.12832-147.12832a48.237227 48.237227 0 0 1 13.653333-9.557333 47.786667 47.786667 0 0 1 62.887254 4.096l119.6032 119.507626 236.776106-236.817066a47.786667 47.786667 0 0 1 67.611307 0 47.786667 47.786667 0 0 1 0 67.597653z</PathGeometry>

效果

第二种：自定义控件

后续更新