WPF——给button添加背景图片

曾经终败给现在 2024-04-06 10:25 197阅读 0赞

只是想做一个很简单的图片按钮而已，不需要那么复杂。

=============================================================================================

在WPF中，如果要想给按钮控件Button加上图片，最直接的做法是修改控件模板，在模板中加入想要的图片，代码如下图所示：

复制代码

复制代码

  1. 但是这样做有一个弊端——每次需要用到图片按钮的时候都要去修改模板。因为上面的示例代码中，模板代码过于精简，所以乍看之下似乎这种做法也没有什么不好。但是在实际的应用中，按钮控件的模板往往复杂得多，比如，有很多的Trigger事件，往往需要根据鼠标或按钮的状态来调整控件的图片、字体、背景等状态。因此，如果每次应用图片控件的时候都修改模板，很可能会导致xaml文件的代码量爆炸。
  2.   先给出一个简单的MVVM的绑定方式，供大家参考吧，后面会给出控件重写的方案。

复制代码

下面是控件重写的方案：
一个可行的解决方案为，封装一个用于图片按钮的自定义按钮控件，该控件继承自Button控件，但是额外增加了一些用户图片绑定的依赖属性，同时在控件的默认外观模板中，通过TemplateBinding的方式绑定到依赖属性上，这样在使用的时候便可以直接通过绑定的方式设置图片按钮需要显示的图片，不再需要修改控件模板。

  1. 其实现方式如下：
  5.    一  代码结构
  6.    如图所示，

采用自定义控件（CustomControl）的方式对Button控件进行封装。其中ImageButton.xaml为默认控件模板，ImageButton.cs为控件的逻辑控制文件，其中包含了ImageButton控件所需要的新的依赖属性，包括图片源属性等。

  1. 二 模板代码

复制代码 

  1. <Style TargetType="{x:Type local:ImageButton}">  
  2.     <Setter Property="Cursor" Value="Hand"/>  
  3.     <Setter Property="Template">  
  4.         <Setter.Value>  
  5.             <ControlTemplate TargetType="{x:Type local:ImageButton}">  
  7.                 <Border Background="{TemplateBinding Background}"  
  8.                         BorderBrush="{TemplateBinding BorderBrush}"  
  9.                         BorderThickness="{TemplateBinding BorderThickness}">  
  10.                     <Grid x:Name="grid" Background="{TemplateBinding Background}">  
  11.                         <Border x:Name="PART_Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}"/>  
  13.                         <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">  
  14.                             <StackPanel HorizontalAlignment="Center" Orientation="{TemplateBinding IconContentOrientation}" VerticalAlignment="Center" Margin="{TemplateBinding Padding}">  
  15.                                 <Grid HorizontalAlignment="Center" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">  
  16.                                     <Image x:Name="PART_Icon" Source="{TemplateBinding Icon}" Height="{TemplateBinding IconHeight}" Width="{TemplateBinding IconWidth}"/>  
  17.                                     <Image x:Name="PART_MouseOverIcon" Visibility="Collapsed" Source="{TemplateBinding IconMouseOver}"  Height="{TemplateBinding IconHeight}" Width="{TemplateBinding IconWidth}"/>  
  18.                                     <Image x:Name="PART_PressIcon" Visibility="Collapsed" Source="{TemplateBinding IconPress}"  Height="{TemplateBinding IconHeight}" Width="{TemplateBinding IconWidth}"/>  
  19.                                 </Grid>  
  20.                                 <TextBlock x:Name="PART_Content" Text="{TemplateBinding Content}"   
  21.                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"   
  22.                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"  
  23.                                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"    
  24.                                            Margin="{TemplateBinding IconContentMargin}"  
  25.                                            Foreground="{TemplateBinding Foreground}"   
  26.                                            TextTrimming="CharacterEllipsis"/>  
  27.                             </StackPanel>  
  28.                         </Grid>  
  29.                     </Grid>  
  30.                 </Border>  
  32.                 <ControlTemplate.Triggers>  
  34.                     <Trigger Property="IsMouseOver" Value="True">  
  35.                         <Setter Property="Foreground" TargetName="PART_Content" Value="{Binding MouseOverForeground,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ImageButton}}}"/>  
  36.                         <Setter Property="Background" TargetName="PART_Border" Value="{Binding MouseOverBackground,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ImageButton}}}"/>  
  37.                         <Setter Property="BorderBrush" TargetName="PART_Border" Value="{Binding MouseOverBorderBrush,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ImageButton}}}"/>  
  38.                         <Setter Property="Visibility" TargetName="PART_MouseOverIcon" Value="Visible"/>  
  39.                         <Setter Property="Visibility" TargetName="PART_Icon" Value="Collapsed"/>  
  40.                         <Setter Property="Visibility" TargetName="PART_PressIcon" Value="Collapsed"/>  
  41.                     </Trigger>  
  43.                     <Trigger Property="IsPressed" Value="True">  
  44.                         <Setter Property="Foreground" TargetName="PART_Content" Value="{Binding MouseDownForeground,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ImageButton}}}"/>  
  45.                         <Setter Property="Background" TargetName="PART_Border" Value="{Binding MouseDownBackground,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ImageButton}}}"/>  
  46.                         <Setter Property="BorderBrush" TargetName="PART_Border" Value="{Binding MouseDownBorderBrush,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ImageButton}}}"/>  
  47.                         <Setter Property="Visibility" TargetName="PART_PressIcon" Value="Visible"/>  
  48.                         <Setter Property="Visibility" TargetName="PART_Icon" Value="Collapsed"/>  
  49.                         <Setter Property="Visibility" TargetName="PART_MouseOverIcon" Value="Collapsed"/>  
  50.                     </Trigger>  
  52.                     <Trigger Property="IsEnabled" Value="False">  
  53.                         <Setter Property="Opacity" Value="0.5" />  
  54.                     </Trigger>  
  56.                     <Trigger Property="Text" SourceName="PART_Content" Value="">  
  57.                         <Setter Property="Visibility" TargetName="PART_Content" Value="Collapsed"/>  
  58.                     </Trigger>  
  60.                     <Trigger Property="Text" SourceName="PART_Content" Value="{x:Null}">  
  61.                         <Setter Property="Visibility" TargetName="PART_Content" Value="Collapsed"/>  
  62.                     </Trigger>  
  63.                 </ControlTemplate.Triggers>  
  64.             </ControlTemplate>  
  65.         </Setter.Value>  
  66.     </Setter>  
  67. </Style>

复制代码

  1. 在模板中，通过TemplateBinding 的方式绑定了控件中的自定义属性，并默认显示给定的图标和文字。
  2.    然后通过触发器，当鼠标悬停或按下的时候，控制相关图标的显示隐藏以及文字的背景色、前景色和边框颜色。
  5.    三 自定义依赖属性
  6.    在ImageButton.cs中定义依赖属性，这些依赖属性包含了图片按钮控件的边框、前景色、背景色，图片等属性。在复写的OnApplyTemplate方法中，会判断如果某些依赖属性的值为null，则使用默认属性。

复制代码
public class ImageButton : Button
{
static ImageButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));
}

  1. public override void OnApplyTemplate()  
  2. {  
  3.     base.OnApplyTemplate();  
  4.     if (this.MouseOverBackground == null)  
  5.     {  
  6.         this.MouseOverBackground = Background;  
  7.     }  
  8.     if (this.MouseDownBackground == null)  
  9.     {  
  10.         if (this.MouseOverBackground == null)  
  11.         {  
  12.             this.MouseDownBackground = Background;  
  13.         }  
  14.         else  
  15.         {  
  16.             this.MouseDownBackground = MouseOverBackground;  
  17.         }  
  18.     }  
  19.     if (this.MouseOverBorderBrush == null)  
  20.     {  
  21.         this.MouseOverBorderBrush = BorderBrush;  
  22.     }  
  23.     if (this.MouseDownBorderBrush == null)  
  24.     {  
  25.         if (this.MouseOverBorderBrush == null)  
  26.         {  
  27.             this.MouseDownBorderBrush = BorderBrush;  
  28.         }  
  29.         else  
  30.         {  
  31.             this.MouseDownBorderBrush = MouseOverBorderBrush;  
  32.         }  
  33.     }  
  34.     if (this.MouseOverForeground == null)  
  35.     {  
  36.         this.MouseOverForeground = Foreground;  
  37.     }  
  38.     if (this.MouseDownForeground == null)  
  39.     {  
  40.         if (this.MouseOverForeground == null)  
  41.         {  
  42.             this.MouseDownForeground = Foreground;  
  43.         }  
  44.         else  
  45.         {  
  46.             this.MouseDownForeground = this.MouseOverForeground;  
  47.         }  
  48.     }  
  49. }  
  51. #region Dependency Properties  
  53. /// <summary>  
  54. /// 鼠标移上去的背景颜色  
  55. /// </summary>  
  56. public static readonly DependencyProperty MouseOverBackgroundProperty  
  57.     = DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(ImageButton));  
  59. /// <summary>  
  60. /// 鼠标按下去的背景颜色  
  61. /// </summary>  
  62. public static readonly DependencyProperty MouseDownBackgroundProperty  
  63.     = DependencyProperty.Register("MouseDownBackground", typeof(Brush), typeof(ImageButton));  
  65. /// <summary>  
  66. /// 鼠标移上去的字体颜色  
  67. /// </summary>  
  68. public static readonly DependencyProperty MouseOverForegroundProperty  
  69.     = DependencyProperty.Register("MouseOverForeground", typeof(Brush), typeof(ImageButton), new PropertyMetadata(null, null));  
  71. /// <summary>  
  72. /// 鼠标按下去的字体颜色  
  73. /// </summary>  
  74. public static readonly DependencyProperty MouseDownForegroundProperty  
  75.     = DependencyProperty.Register("MouseDownForeground", typeof(Brush), typeof(ImageButton), new PropertyMetadata(null, null));  
  77. /// <summary>  
  78. /// 鼠标移上去的边框颜色  
  79. /// </summary>  
  80. public static readonly DependencyProperty MouseOverBorderBrushProperty  
  81.     = DependencyProperty.Register("MouseOverBorderBrush", typeof(Brush), typeof(ImageButton), new PropertyMetadata(null, null));  
  83. /// <summary>  
  84. /// 鼠标按下去的边框颜色  
  85. /// </summary>  
  86. public static readonly DependencyProperty MouseDownBorderBrushProperty  
  87.     = DependencyProperty.Register("MouseDownBorderBrush", typeof(Brush), typeof(ImageButton), new PropertyMetadata(null, null));  
  89. /// <summary>  
  90. /// 圆角  
  91. /// </summary>  
  92. public static readonly DependencyProperty CornerRadiusProperty  
  93.     = DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(ImageButton), null);  
  95. //图标  
  96. public static readonly DependencyProperty IconProperty  
  97.     = DependencyProperty.Register("Icon", typeof(ImageSource), typeof(ImageButton), null);  
  99. //鼠标移上去的图标图标  
  100. public static readonly DependencyProperty IconMouseOverProperty  
  101.     = DependencyProperty.Register("IconMouseOver", typeof(ImageSource), typeof(ImageButton), null);  
  103. //鼠标按下去的图标图标  
  104. public static readonly DependencyProperty IconPressProperty  
  105.     = DependencyProperty.Register("IconPress", typeof(ImageSource), typeof(ImageButton), null);  
  107. //图标高度  
  108. public static readonly DependencyProperty IconHeightProperty  
  109.     = DependencyProperty.Register("IconHeight", typeof(double), typeof(ImageButton), new PropertyMetadata(24.0, null));  
  111. //图标宽度  
  112. public static readonly DependencyProperty IconWidthProperty  
  113.     = DependencyProperty.Register("IconWidth", typeof(double), typeof(ImageButton), new PropertyMetadata(24.0, null));  
  115. //图标和内容的对齐方式  
  116. public static readonly DependencyProperty IconContentOrientationProperty  
  117.     = DependencyProperty.Register("IconContentOrientation", typeof(Orientation), typeof(ImageButton), new PropertyMetadata(Orientation.Horizontal, null));  
  119. //图标和内容的距离  
  120. public static readonly DependencyProperty IconContentMarginProperty  
  121.     = DependencyProperty.Register("IconContentMargin", typeof(Thickness), typeof(ImageButton), new PropertyMetadata(new Thickness(0, 0, 0, 0), null));  
  123. #endregion  
  125. #region Property Wrappers  
  127. public Brush MouseOverBackground  
  128. {  
  129.     get  
  130.     {  
  131.         return (Brush)GetValue(MouseOverBackgroundProperty);  
  132.     }  
  133.     set { SetValue(MouseOverBackgroundProperty, value); }  
  134. }  
  136. public Brush MouseDownBackground  
  137. {  
  138.     get  
  139.     {  
  140.         return (Brush)GetValue(MouseDownBackgroundProperty);  
  141.     }  
  142.     set { SetValue(MouseDownBackgroundProperty, value); }  
  143. }  
  145. public Brush MouseOverForeground  
  146. {  
  147.     get  
  148.     {  
  149.         return (Brush)GetValue(MouseOverForegroundProperty);  
  150.     }  
  151.     set { SetValue(MouseOverForegroundProperty, value); }  
  152. }  
  154. public Brush MouseDownForeground  
  155. {  
  156.     get  
  157.     {  
  158.         return (Brush)GetValue(MouseDownForegroundProperty);  
  159.     }  
  160.     set { SetValue(MouseDownForegroundProperty, value); }  
  161. }  
  163. public Brush MouseOverBorderBrush  
  164. {  
  165.     get { return (Brush)GetValue(MouseOverBorderBrushProperty); }  
  166.     set { SetValue(MouseOverBorderBrushProperty, value); }  
  167. }  
  169. public Brush MouseDownBorderBrush  
  170. {  
  171.     get { return (Brush)GetValue(MouseDownBorderBrushProperty); }  
  172.     set { SetValue(MouseDownBorderBrushProperty, value); }  
  173. }  
  175. public CornerRadius CornerRadius  
  176. {  
  177.     get { return (CornerRadius)GetValue(CornerRadiusProperty); }  
  178.     set { SetValue(CornerRadiusProperty, value); }  
  179. }  
  181. public ImageSource Icon  
  182. {  
  183.     get { return (ImageSource)GetValue(IconProperty); }  
  184.     set { SetValue(IconProperty, value); }  
  185. }  
  187. public ImageSource IconMouseOver  
  188. {  
  189.     get { return (ImageSource)GetValue(IconMouseOverProperty); }  
  190.     set { SetValue(IconMouseOverProperty, value); }  
  191. }  
  193. public ImageSource IconPress  
  194. {  
  195.     get { return (ImageSource)GetValue(IconPressProperty); }  
  196.     set { SetValue(IconPressProperty, value); }  
  197. }  
  199. public double IconHeight  
  200. {  
  201.     get { return (double)GetValue(IconHeightProperty); }  
  202.     set { SetValue(IconHeightProperty, value); }  
  203. }  
  205. public double IconWidth  
  206. {  
  207.     get { return (double)GetValue(IconWidthProperty); }  
  208.     set { SetValue(IconWidthProperty, value); }  
  209. }  
  211. public Orientation IconContentOrientation  
  212. {  
  213.     get { return (Orientation)GetValue(IconContentOrientationProperty); }  
  214.     set { SetValue(IconContentOrientationProperty, value); }  
  215. }  
  217. public Thickness IconContentMargin  
  218. {  
  219.     get { return (Thickness)GetValue(IconContentMarginProperty); }  
  220.     set { SetValue(IconContentMarginProperty, value); }  
  221. }  
  223. #endregion

}
复制代码

  1. 四 控件的应用
  4.    应用控件的时候，只需要简单的绑定控件的相关属性即可。

发表评论

表情：
评论列表 （有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

    相关 C# 给PDF添加图片背景

    今天要实现的是给PDF文件添加图片背景这个功能。PDF是近年来最流行的文件之一，无论是办公还是日常生活中都经常会用到，很多时候，PDF文件的背景色都是白色，看多了难免觉得累，更

    电玩女神电玩女神/ 0 赞/ 304 阅读

    相关 MFC 给对话框添加图片背景

    在windows开发当中做界面的主要技术之一就是使用MFC，通常我们看到的QQ,360,暴风影音这些漂亮的界面都可以用MFC来实现。今天我们来说一下如何用MFC美化对话框，默认

    短命女短命女/ 0 赞/ 528 阅读