按钮，每个状态使用独立图像的依赖属性

本文关键字：图像 独立 依赖 属性 状态 按钮 | 更新日期: 2023-09-27 18:15:13

我有一个Button控件，我希望能够在整个项目中重用。每次按钮进入新状态时，将显示不同的图像。现在，我有Normal State和Pressed State。

下面是控件的XAML部分:

<Button
    x:Class="customImageButton.ImageButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Button.Template>
      <ControlTemplate TargetType="{x:Type Button}">
         <Grid>
            <ContentControl Width="80">
                <Grid>
                    <Image Name="Normal" Source="{Binding NormalState}"/>
                    <Image Name="Pressed" Source="{Binding PressedState}" Visibility="Hidden"/>
                </Grid>
            </ContentControl>
         </Grid>
         <ControlTemplate.Triggers>
            <Trigger Property="IsPressed" Value="True">
               <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
               <Setter TargetName="Pressed" Property="Visibility" Value="Visible"/>
            </Trigger>
         </ControlTemplate.Triggers>
      </ControlTemplate>
   </Button.Template>
</Button>
下面是控件的隐藏代码: 
namespace customImageButton
{
    public partial class ImageButton : Button
    {
        public ImageButton()
        {
            this.InitializeComponent();
        }
        public ImageSource NormalState
        {
            get { return base.GetValue(NormalStateProperty) as ImageSource; }
            set { base.SetValue(NormalStateProperty, value); }
        }
        public static readonly DependencyProperty NormalStateProperty =
            DependencyProperty.Register("NormalState", typeof(ImageSource), typeof(ImageButton));
        public ImageSource PressedState
        {
            get { return base.GetValue(PressedStateProperty) as ImageSource; }
            set { base.SetValue(PressedStateProperty, value); }
        }
        public static readonly DependencyProperty PressedStateProperty =
            DependencyProperty.Register("PressedState", typeof(ImageSource), typeof(ImageButton));
    }
}

…下面是它的用法:

<local:ImageButton Content="CustomButton" HorizontalAlignment="Left" 
                   VerticalAlignment="Top" NormalState="Resources/Normal.png"
                   PressedState="Resources/Pressed.png"/>

我的问题是我提供的图像不显示。两个图像的Build Action是Resource，我已经尝试使用绝对路径;然而，这提供了相同的结果。我错过了什么?

按钮，每个状态使用独立图像的依赖属性

代码的两个问题如下:

  1. 绑定需要为TemplateBinding。
  2. TargetType应该是指"ImageButton"类型，而不是Button。

: 

<ControlTemplate 
     xmlns:local="clr-namespace:customImageButton"
     TargetType="{x:Type local:ImageButton}">
     <Grid>
        <ContentControl Width="80">
            <Grid>
                <Image Name="Normal" Source="{TemplateBinding NormalState}"/>
                <Image Name="Pressed" Source="{TemplateBinding PressedState}" Visibility="Hidden"/>
            </Grid>
        </ContentControl>
     </Grid>

注意:上面的构建和运行，但Visual Studio抱怨:

'ImageButton' ControlTemplate TargetType不匹配'Button'模板类型。

我建议把控件模板在自己的样式在Themes/Generic.xaml资源字典，而不是内联。

相关文章：