假設需要實現一個圖標和文本結合的按鈕 ，普通做法是 直接重寫該按鈕的模板； 如果想作為通用的呢？ 兩種做法： 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種：附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
假設需要實現一個圖標和文本結合的按鈕 ，普通做法是 直接重寫該按鈕的模板；
如果想作為通用的呢？
兩種做法：
- 附加屬性
- 自定義控制項
推薦使用附加屬性的形式
第一種：附加屬性
創建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>
效果
第二種：自定義控制項
後續更新
本文來自博客園，作者：阿金啊，轉載請註明原文鏈接：https://www.cnblogs.com/fengxinyuan/p/18295339
