WPF 实现图标按钮

  • WPF 实现图标按钮已关闭评论
  • 48 次浏览
  • A+
所属分类:.NET技术
摘要

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

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

如果想作为通用的呢?

两种做法:

  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>

效果

WPF 实现图标按钮

 

第二种:自定义控件

后续更新