WPF圖片按鈕的實現

直接代碼

 1  public class ImageButton : System.Windows.Controls.Button
 2     {
 3 
 4         /// <summary>
 5         /// 圖片
 6         /// </summary>
 7         public static readonly DependencyProperty ImageProperty = DependencyProperty.Register("Image", typeof(ImageSource), typeof(ImageButton),
 8             new PropertyMetadata(null));
 9 
10         /// <summary>
11         /// 圖片的寬度
12         /// </summary>
13         public static readonly DependencyProperty ImageWidthProperty = DependencyProperty.Register("ImageWidth", typeof(double), typeof(ImageButton),
14             new PropertyMetadata(double.NaN));
15 
16         /// <summary>
17         /// 圖片的高度
18         /// </summary>
19         public static readonly DependencyProperty ImageHeightProperty = DependencyProperty.Register("ImageHeight", typeof(double), typeof(ImageButton),
20             new PropertyMetadata(double.NaN));
21 
22         /// <summary>
23         /// 構造函數
24         /// </summary>
25         static ImageButton()
26         {
27             DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), 
28                 new System.Windows.FrameworkPropertyMetadata(typeof(ImageButton)));
29         }
30 
31         /// <summary>
32         /// 設置圖片
33         /// </summary>
34         public ImageSource Image
35         {
36             get
37             {
38                 return GetValue(ImageProperty) as ImageSource;
39             }
40             set
41             {
42                 SetValue(ImageProperty, value);
43             }
44         }
45 
46         /// <summary>
47         /// 圖片寬度(屬性)
48         /// </summary>
49         public double ImageWidth
50         {
51             get
52             {
53                 return (double)GetValue(ImageWidthProperty);
54             }
55             set
56             {
57                 SetValue(ImageWidthProperty, value);
58             }
59         }
60 
61         /// <summary>
62         /// 圖片高度(屬性)
63         /// </summary>
64         public double ImageHeight
65         {
66             get
67             {
68                 return (double)GetValue(ImageHeightProperty);
69             }
70             set
71             {
72                 SetValue(ImageHeightProperty, value);
73             }
74         }
75 
76     }

樣式代碼

 1     <Style TargetType="{x:Type xi:ImageButton}">
 2         <Setter Property="Template">
 3             <Setter.Value>
 4                 <ControlTemplate TargetType="{x:Type xi:ImageButton}">
 5                     <Grid>
 6                         <Grid.RowDefinitions>
 7                             <RowDefinition Height="*"/>
 8                             <RowDefinition Height="Auto"/>
 9                         </Grid.RowDefinitions>
10                         <Border x:Name="border" Grid.RowSpan="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" 
11                                 SnapsToDevicePixels="true" CornerRadius="3,3,3,3"/>
12                         <Image Grid.Row="0" Source="{TemplateBinding Image}"
13                                    Width="{TemplateBinding ImageWidth}"
14                                    Height="{TemplateBinding ImageHeight}"
15                                    VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
16                         <ContentPresenter Grid.Row="1" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}"   
17                                     VerticalAlignment="Center" RecognizesAccessKey="True" />
18                     </Grid>
19                     <ControlTemplate.Triggers>
20                         <Trigger Property="IsPressed" Value="True">
21                             <Setter Property="Foreground" Value="#999999"/>
22                         </Trigger>
23                     </ControlTemplate.Triggers>
24 
25                 </ControlTemplate>
26             </Setter.Value>
27         </Setter>
28     </Style>

調用實例

1     <xi:ImageButton Image="../Image/設置.png" Content="新增會員" ImageHeight="52" ImageWidth="52" Width="72" Height="72" Margin="30,10,10,10"/>

效果展示

本文原創出處：http://www.cnblogs.com/PettyHandSome/

歡迎各位轉載，但是未經作者本人同意，轉載文章之後必須在文章頁面明顯位置給出作者和原文連接，否則保留追究法律責任的權利!