WPF Databinding DataTrigger 根据布尔值改变形状的颜色

Question

我正在尝试通过数据绑定和数据触发器来更改形状的颜色。

但我对 WPF 和所有方面仍然是新手。

让我举个例子。这是一个分组框

<GroupBox x:Class="Server.Host.SingleAxisControls"
         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"
         xmlns:host="clr-namespace:Server.Host"
         mc:Ignorable="d" 
         d:DesignWidth="200">
    <Grid>
        <StackPanel Orientation="Vertical" Width="180" >
            <host:MyRectangleControl x:Name="MyRectangle" />
            <Button Click="OnButton_Click" Width="80" Margin="20,5,20,5">On</Button>
            <Button Click="OffButton_Click" Width="80">Off</Button>
        </StackPanel>
    </Grid>
</GroupBox>

MyRectangleControl 是类似

的用户控件

<UserControl x:Class="Server.Host.MyRectangleControl"
         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="30" d:DesignWidth="30">
<Grid>
    <Rectangle  HorizontalAlignment="Center"
              Height="25"
              Margin="0,0,0,0"
              Stroke="Black"
              VerticalAlignment="Center"
              Width="25" 
              Fill="red">
        <Rectangle.Style>
            <Style TargetType="Rectangle">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=Test,UpdateSourceTrigger=PropertyChanged}"
                                 Value="True">
                        <Setter Property="Fill"
                                Value="Green" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Rectangle.Style>
    </Rectangle>
</Grid>

在组框后面的代码中，我有类似

的内容

namespace Server.Host
{
public partial class SingleAxisControls : INotifyPropertyChanged
{
    public SingleAxisControls()
    {
        InitializeComponent();

        MyRectangle.DataContext = this;
    }

    private bool _test;
    public bool Test
    {
        get { return _test; }
        set
        {
            _test = value;
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs("Test"));
            }
        }
    }

    private void OnButton_Click(object sender, RoutedEventArgs e)
    {
        Test = true;
    }

    private void OffButton_Click(object sender, RoutedEventArgs e)
    {
        Test = false;
    }
}

我不确定哪里出了问题，但是当我将 test 的值从 false 更改为 true 时，它似乎并没有改变矩形的颜色。

Answer 1

这是value precedence的问题。

当您直接在元素声明中设置 DependencyProperty 时，此值的优先级高于样式中设置的值。

您所要做的就是在样式中将填充属性设置为红色：

<Rectangle  HorizontalAlignment="Center"
          Height="25"
          Margin="0,0,0,0"
          Stroke="Black"
          VerticalAlignment="Center"
          Width="25" 
          >
    <Rectangle.Style>
        <Style TargetType="Rectangle">
            <Setter Property="Fill" Value="Red"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=Test,UpdateSourceTrigger=PropertyChanged}"
                             Value="True">
                    <Setter Property="Fill"
                            Value="Green" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>

Answer 2

另一个有效选项是将转换器写入绑定。它看起来像这样：

class BooleanToBrushConverter : IValueConverter
    {
        public object Convert(object value, Type targetType,  System.Globalization.CultureInfo culture)
        {
            if ((bool)value)
            {
                return new SolidColorBrush(Colors.Black);
            }
            return new SolidColorBrush(Colors.LightGray);
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

（您可以将颜色设置为您想要的任何颜色） Xaml 看起来像这样：

<Rectangle  HorizontalAlignment="Center"
              Height="25"
              Margin="0,0,0,0"
              Stroke="Black"
              VerticalAlignment="Center"
              Width="25" 
              Fill="{Binding Test, Converter={StaticResource b2b}}">

在您的 xaml 顶部：

<UserControl.Resources>
    <BooleanToBrushConverter x:Key="b2b" />
</UserControl.Resources>

注意：如果您的转换器位于不同的位置，您需要将其包含在命名空间中，并在声明前加上您命名的命名空间，即

xlmns:converters="clr-namespace:Project.Converters"

在 <UserControl> 标签中然后在资源

中<converters: BooleanToBrushConverter x:Key="b2b" />

WPF Databinding DataTrigger 根据布尔值改变形状的颜色

WPF Databinding DataTrigger to change color of shape based on boolean value

c#

data-binding

wpf

datatrigger