实现图片式复选框

需求的提出

对于一个checkbox,要求不使用默认的方框,而采用图片代替,并且在选中/反选的状态下能自动更换指定的图片。

解决办法

1、使用Style.Trigger,根据IsChecked属性值的不同设定不同的ControlTemplate:

<Style TargetType="CheckBox">
    <Setter Property="OverridesDefaultStyle" Value="True"></Setter>
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <Image HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="16" Height="16"
 Source="/WpfApplication1;component/Images/accept.png" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="IsChecked" Value="False">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <Image HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="16" Height="16"
                             Source="/WpfApplication1;component/Images/add.png" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

注意需要设置属性OverridesDefaultStyle为True。这种办法能够达到预期的效果,但不足的是图片的URI直接写到了Style里,不利于复用,且设置不灵活。

 

2、使继承自CheckBox的自定义类,公开属性用于保存图片路径,并且在Style里为Image设置binding。

自定义类代码:

 

public class TaskButton : CheckBox, INotifyPropertyChanged
{
    private string _unCheckedImageUri;
    public string UnCheckedImageUri
    {
        get { return _unCheckedImageUri; }
        set { _unCheckedImageUri = value; }
    }

    private string _checkedImageUri;
    public string CheckedImageUri
    {
        get { return _checkedImageUri; }
        set { _checkedImageUri = value; }
    }
}
将第一段XAML代码中的Image的Source属性分别设置为:
    Source="{Binding Path=CheckedImageUri, RelativeSource={RelativeSource Mode=TemplatedParent}}"
    Source="{Binding Path=UnCheckedImageUri, RelativeSource={RelativeSource Mode=TemplatedParent}}"
注意使用了RelativeSource更改目标数据源。之后需要修改TargetType为“local:TaskButton”(注册的前缀为local)。
 
这样下来似乎好了一点,但是,能不能不使用Trigger呢?
 
3、使用INotifyPropertyChanged
    把TaskButton加工一下,让其实现INotifyPropertyChanged接口。添加属性用于返回当前状态下应使用的图片URI,并重载OnPropertyChanged事件处理器以在
适时通知属性已发生更改。添加代码如下:
 
public string CurrentImageUri
{
    get
    {
        if (!IsChecked.HasValue)
            return _unCheckedImageUri;
        else
        {
            if (IsChecked.Value)
                return _checkedImageUri;
            else
                return _unCheckedImageUri;
        }
    }
}

protected override void OnPropertyChanged(System.Windows.DependencyPropertyChangedEventArgs e)
{
    base.OnPropertyChanged(e);

    if (e.Property == CheckBox.IsCheckedProperty)
    {
        PropertyChanged(this, new PropertyChangedEventArgs("CurrentImageUri"));
    }
}

#region INotifyPropertyChanged Members

public event PropertyChangedEventHandler PropertyChanged;

#endregion
 
再将Style改为如下定义:
<Style TargetType="local:TaskButton">
    <Setter Property="OverridesDefaultStyle" Value="True"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:TaskButton">
                <Image HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="16" Height="16"
                      Source="{Binding Path=CurrentImageUri, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

你可能感兴趣的:(复选框)