如何使用与复选框类似的四种状态创建wpf按钮类

时间:2014-06-30 09:17:09

标签: c# wpf

使用WPF和.net 4.5。

希望有人可以帮我创建一个4状态按钮,功能类似于复选框。有效值为:null,0,1或2.

前三个状态将与复选框相同,第四个将增加边框厚度。

为了做到这一点,我需要一些帮助来定义一个新的按钮类,它会在点击时循环显示这四种状态。

1 个答案:

答案 0 :(得分:1)

你去吧

我已经基于Button

创建了一个控件

XAML

<Button x:Class="CSharpWPF.StateButton"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        mc:Ignorable="d"
        d:DesignHeight="300"
        d:DesignWidth="300"
        xmlns:l="clr-namespace:CSharpWPF">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border x:Name="border"
                    Background="Transparent"
                    BorderThickness="1">
                <CheckBox x:Name="check"
                          IsHitTestVisible="False"
                          Content="{TemplateBinding Content}" />
            </Border>
            <ControlTemplate.Triggers>
                <DataTrigger Binding="{Binding State, RelativeSource={RelativeSource Self}}"
                             Value="{x:Null}">
                    <Setter TargetName="check"
                            Property="IsChecked"
                            Value="{x:Null}" />
                </DataTrigger>
                <DataTrigger Binding="{Binding State, RelativeSource={RelativeSource Self}}"
                             Value="1">
                    <Setter TargetName="check"
                            Property="IsChecked"
                            Value="True" />
                </DataTrigger>
                <DataTrigger Binding="{Binding State, RelativeSource={RelativeSource Self}}"
                             Value="2">
                    <Setter TargetName="check"
                            Property="IsChecked"
                            Value="True" />
                    <Setter TargetName="border"
                            Property="BorderBrush"
                            Value="Blue" />
                </DataTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>

我使用触发器来控制视觉适应性

背后的代码

namespace CSharpWPF
{
    /// <summary>
    /// Interaction logic for StateButton.xaml
    /// </summary>
    public partial class StateButton : Button
    {
        public StateButton()
        {
            InitializeComponent();
            Click += (s, e) => ToggleState();
        }

        void ToggleState()
        {
            int? curState = State;
            if (curState == null)
                curState = 0;
            else
                curState++;

            if (curState > 2)
                curState = null;

            State = curState;
        }

        public int? State
        {
            get { return (int?)GetValue(StateProperty); }
            set { SetValue(StateProperty, value); }
        }

        // Using a DependencyProperty as the backing store for State.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty StateProperty =
            DependencyProperty.Register("State", typeof(int?), typeof(StateButton), new PropertyMetadata(null), OnValidateState);

        private static bool OnValidateState(object value)
        {
            if (value == null)
                return true;

            int parseResult = 0;
            if (int.TryParse(Convert.ToString(value), out parseResult))
            {
                if (parseResult >= 0 && parseResult < 3)
                    return true;
            }

            return false;
        }
    }
}

你可以自定义你自己的状态,目前为null,0,1,2。我建议你改用enum。