wpf 的 xaml 中，給button增加背景圖片

最新推荐文章于 2023-05-31 09:23:04 发布

maozhu_yimi

最新推荐文章于 2023-05-31 09:23:04 发布

阅读量1.3k

点赞数 2

分类专栏： C# WPF

本文链接：https://blog.csdn.net/maozhu_yimi/article/details/88970291

版权

C# 同时被 2 个专栏收录

58 篇文章 0 订阅

订阅专栏

WPF

1 篇文章 0 订阅

订阅专栏

在wpf的xaml中，給button加背景圖片時，總是無法正常顯示。最後通過修改模板的方式才正常顯示。踩坑步驟記錄如下：

不可行的是：

可行的是：

以下為找尋到的資源(copy自：https://blog.csdn.net/zzzwwwppp11199988899/article/details/78182986)

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

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

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

具体方式如下：

一代码结构

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

二模板代码

在模板中，通过TemplateBinding 的方式绑定了控件中的自定义属性，并默认显示给定的图标和文字。

然后通过触发器，当鼠标悬停或按下的时候，控制相关图标的显示隐藏以及文字的背景色、前景色和边框颜色。

三自定义依赖属性

在ImageButton.cs中定义依赖属性，这些依赖属性包含了图片按钮控件的边框、前景色、背景色，图片等属性。在复写的OnApplyTemplate方法中，会判断如果某些依赖属性的值为null，则使用默认属性。

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

            public override void OnApplyTemplate()
            {
                base.OnApplyTemplate();
                if (this.MouseOverBackground == null)
                {
                    this.MouseOverBackground = Background;
                }
                if (this.MouseDownBackground == null)
                {
                    if (this.MouseOverBackground == null)
                    {
                        this.MouseDownBackground = Background;
                    }
                    else
                    {
                        this.MouseDownBackground = MouseOverBackground;
                    }
                }
                if (this.MouseOverBorderBrush == null)
                {
                    this.MouseOverBorderBrush = BorderBrush;
                }
                if (this.MouseDownBorderBrush == null)
                {
                    if (this.MouseOverBorderBrush == null)
                    {
                        this.MouseDownBorderBrush = BorderBrush;
                    }
                    else
                    {
                        this.MouseDownBorderBrush = MouseOverBorderBrush;
                    }
                }
                if (this.MouseOverForeground == null)
                {
                    this.MouseOverForeground = Foreground;
                }
                if (this.MouseDownForeground == null)
                {
                    if (this.MouseOverForeground == null)
                    {
                        this.MouseDownForeground = Foreground;
                    }
                    else
                    {
                        this.MouseDownForeground = this.MouseOverForeground;
                    }
                }
            }

            #region Dependency Properties

            /// <summary>
            /// 鼠标移上去的背景颜色
            /// </summary>
            public static readonly DependencyProperty MouseOverBackgroundProperty
                = DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(ImageButton));

            /// <summary>
            /// 鼠标按下去的背景颜色
            /// </summary>
            public static readonly DependencyProperty MouseDownBackgroundProperty
                = DependencyProperty.Register("MouseDownBackground", typeof(Brush), typeof(ImageButton));

            /// <summary>
            /// 鼠标移上去的字体颜色
            /// </summary>
            public static readonly DependencyProperty MouseOverForegroundProperty
                = DependencyProperty.Register("MouseOverForeground", typeof(Brush), typeof(ImageButton), new PropertyMetadata(null, null));

            /// <summary>
            /// 鼠标按下去的字体颜色
            /// </summary>
            public static readonly DependencyProperty MouseDownForegroundProperty
                = DependencyProperty.Register("MouseDownForeground", typeof(Brush), typeof(ImageButton), new PropertyMetadata(null, null));

            /// <summary>
            /// 鼠标移上去的边框颜色
            /// </summary>
            public static readonly DependencyProperty MouseOverBorderBrushProperty
                = DependencyProperty.Register("MouseOverBorderBrush", typeof(Brush), typeof(ImageButton), new PropertyMetadata(null, null));

            /// <summary>
            /// 鼠标按下去的边框颜色
            /// </summary>
            public static readonly DependencyProperty MouseDownBorderBrushProperty
                = DependencyProperty.Register("MouseDownBorderBrush", typeof(Brush), typeof(ImageButton), new PropertyMetadata(null, null));

            /// <summary>
            /// 圆角
            /// </summary>
            public static readonly DependencyProperty CornerRadiusProperty
                = DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(ImageButton), null);

            //图标
            public static readonly DependencyProperty IconProperty
                = DependencyProperty.Register("Icon", typeof(ImageSource), typeof(ImageButton), null);

            //鼠标移上去的图标图标
            public static readonly DependencyProperty IconMouseOverProperty
                = DependencyProperty.Register("IconMouseOver", typeof(ImageSource), typeof(ImageButton), null);

            //鼠标按下去的图标图标
            public static readonly DependencyProperty IconPressProperty
                = DependencyProperty.Register("IconPress", typeof(ImageSource), typeof(ImageButton), null);

            //图标高度
            public static readonly DependencyProperty IconHeightProperty
                = DependencyProperty.Register("IconHeight", typeof(double), typeof(ImageButton), new PropertyMetadata(24.0, null));

            //图标宽度
            public static readonly DependencyProperty IconWidthProperty
                = DependencyProperty.Register("IconWidth", typeof(double), typeof(ImageButton), new PropertyMetadata(24.0, null));

            //图标和内容的对齐方式
            public static readonly DependencyProperty IconContentOrientationProperty
                = DependencyProperty.Register("IconContentOrientation", typeof(Orientation), typeof(ImageButton), new PropertyMetadata(Orientation.Horizontal, null));

            //图标和内容的距离
            public static readonly DependencyProperty IconContentMarginProperty
                = DependencyProperty.Register("IconContentMargin", typeof(Thickness), typeof(ImageButton), new PropertyMetadata(new Thickness(0, 0, 0, 0), null));

            #endregion

            #region Property Wrappers

            public Brush MouseOverBackground
            {
                get
                {
                    return (Brush)GetValue(MouseOverBackgroundProperty);
                }
                set { SetValue(MouseOverBackgroundProperty, value); }
            }

            public Brush MouseDownBackground
            {
                get
                {
                    return (Brush)GetValue(MouseDownBackgroundProperty);
                }
                set { SetValue(MouseDownBackgroundProperty, value); }
            }

            public Brush MouseOverForeground
            {
                get
                {
                    return (Brush)GetValue(MouseOverForegroundProperty);
                }
                set { SetValue(MouseOverForegroundProperty, value); }
            }

            public Brush MouseDownForeground
            {
                get
                {
                    return (Brush)GetValue(MouseDownForegroundProperty);
                }
                set { SetValue(MouseDownForegroundProperty, value); }
            }

            public Brush MouseOverBorderBrush
            {
                get { return (Brush)GetValue(MouseOverBorderBrushProperty); }
                set { SetValue(MouseOverBorderBrushProperty, value); }
            }

            public Brush MouseDownBorderBrush
            {
                get { return (Brush)GetValue(MouseDownBorderBrushProperty); }
                set { SetValue(MouseDownBorderBrushProperty, value); }
            }

            public CornerRadius CornerRadius
            {
                get { return (CornerRadius)GetValue(CornerRadiusProperty); }
                set { SetValue(CornerRadiusProperty, value); }
            }

            public ImageSource Icon
            {
                get { return (ImageSource)GetValue(IconProperty); }
                set { SetValue(IconProperty, value); }
            }

            public ImageSource IconMouseOver
            {
                get { return (ImageSource)GetValue(IconMouseOverProperty); }
                set { SetValue(IconMouseOverProperty, value); }
            }

            public ImageSource IconPress
            {
                get { return (ImageSource)GetValue(IconPressProperty); }
                set { SetValue(IconPressProperty, value); }
            }

            public double IconHeight
            {
                get { return (double)GetValue(IconHeightProperty); }
                set { SetValue(IconHeightProperty, value); }
            }

            public double IconWidth
            {
                get { return (double)GetValue(IconWidthProperty); }
                set { SetValue(IconWidthProperty, value); }
            }

            public Orientation IconContentOrientation
            {
                get { return (Orientation)GetValue(IconContentOrientationProperty); }
                set { SetValue(IconContentOrientationProperty, value); }
            }

            public Thickness IconContentMargin
            {
                get { return (Thickness)GetValue(IconContentMarginProperty); }
                set { SetValue(IconContentMarginProperty, value); }
            }

            #endregion
        }

四控件的应用

     <control:ImageButton x:Name="btn_Image"
                                 HorizontalContentAlignment="Center"
                                 VerticalContentAlignment="Center"
                                 Background="Red"
                                 Margin="5,0,5,0" ToolTip="播放" Content="播放"
                                 Height="30" Width="80"
                                 Icon="{DynamicResource VideoPlayWhite}"
                                 IconMouseOver="{DynamicResource VideoPlayGray}"
                                 IconPress="{DynamicResource RecordBlue}"
                                 IconHeight="24"
                                 IconWidth="24"
                                 FontSize="16"
                                 IconContentMargin="10,0,0,0"
                                 Foreground="{DynamicResource Colorffffff}"
                                 MouseOverForeground="Green"
                                 MouseDownForeground="Blue"/>