- A+
所属分类:.NET技术
假设需要实现一个图标和文本结合的按钮 ,普通做法是 直接重写该按钮的模板;
如果想作为通用的呢?
两种做法:
- 附加属性
- 自定义控件
推荐使用附加属性的形式
第一种:附加属性
创建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>
效果
第二种:自定义控件
后续更新