WPF自定义图片按钮控件

最新推荐文章于 2024-10-16 00:55:09 发布

zhuowp

最新推荐文章于 2024-10-16 00:55:09 发布

阅读量1.1w

点赞数 5

分类专栏： WPF WPF自定义控件 c#

本文链接：https://blog.csdn.net/zhuo_wp/article/details/78350760

版权

本文介绍了如何在WPF中创建一个自定义图片按钮控件，通过封装Button并定义新的依赖属性来实现图片展示。控件模板在ImageButton.xaml中定义，逻辑控制在ImageButton.cs中。内容涵盖控件结构、模板代码以及自定义的边框、前景色、背景色和图片等属性。通过OnApplyTemplate方法处理属性值，确保在应用时能显示默认属性。展示了按钮在正常、鼠标悬停和鼠标按下三种状态的效果。

摘要由CSDN通过智能技术生成

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

<Button x:Name="btn" Width="23" Height="23" Click="btn_Click">  
     <Button.Template>  
         <ControlTemplate>  
             <Grid>  
                 <Image Margin="2" Source="Image/help1.png" />  
             </Grid>  
         </ControlTemplate>  
     </Button.Template>  
 </Button>

但是这样做有一个弊端——每次需要用到图片按钮的时候都要去修改模板。因为上面的示例代码中，模板代码过于精简，所以乍看之下似乎这种做法也没有什么不好。但是在实际的应用中，按钮控件的模板往往复杂得多，比如，有很多的Trigger事件，往往需要根据鼠标或按钮的状态来调整控件的图片、字体、背景等状态。因此，如果每次应用图片控件的时候都修改模板，很可能会导致xaml文件的代码量爆炸。
一个可行的解决方案为，封装一个用于图片按钮的自定义按钮控件，该控件继承自Button控件，但是额外增加了一些用户图片绑定的依赖属性，同时在控件的默认外观模板中，通过TemplateBinding的方式绑定到依赖属性上，这样在使用的时候便可以直接通过绑定的方式设置图片按钮需要显示的图片，不再需要修改控件模板。

其实现方式如下：

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

二模板代码

<ResourceDictionary  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:local="clr-namespace:CustomControl">  
  
    <Style TargetType="{x:Type local:ImageButton}">  
        <Setter Property="Cursor" Value="Hand"/>  
        <Setter Property="Template">  
            <Setter.Value>  
                <ControlTemplate TargetType="{x:Type local:ImageButton}">  
  
                    <Border Background="{TemplateBinding Background}"  
                            BorderBrush="{TemplateBinding BorderBrush}"  
                            BorderThickness="{TemplateBinding BorderThickness}">  
                        <Grid x:Name="grid" Background="{TemplateBinding Background}">  
                            <Border x:Name="PART_Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}"/>  
  
                            <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">  
                                <StackPanel HorizontalAlignment="Center" Orientation="{TemplateBinding IconContentOrientation}" VerticalAlignment="Center" Margin="{TemplateBinding Padding}">  
                                    <Grid HorizontalAlignment="Center" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">  
                                        <Image x:Name="PART_Icon" Source="{TemplateBinding Icon}" Height="{TemplateBinding IconHeight}" Width="{TemplateBinding IconWidth}"/>  
                                        <Image x:Name="PART_MouseOverIcon" Visibility="Collapsed" Source="{TemplateBinding IconMouseOver}"  Height="{TemplateBinding IconHeight}" Width="{TemplateBinding IconWidth}"/>