在我的风格中使用DataTrigger

时间:2016-01-21 16:59:49

标签: wpf xaml datatrigger

我正在尝试根据我的ViewModel中的值更改矩形的填充,但尽管尝试了我在网上找到的所有建议,但它仍然无效。

IsMouseOver触发器工作正常,但DataTrigger被忽略,尽管我的ViewModel属性总是有4或5。

有人可以告诉我可能出错的地方吗?

感谢。

这是我的风格:

        <Style x:Key="FavouriteRectangleStyle" TargetType="{x:Type Rectangle}">
        <Setter Property="Opacity" Value="1"/>
        <Style.Triggers>

            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Rectangle.Opacity" Value="0.5" />
            </Trigger>


            <DataTrigger Binding="{Binding Path=Theme}" Value="4">
                <Setter Property="Rectangle.Fill" Value="{DynamicResource content__star__hex646464__shadow}"/>
            </DataTrigger>

            <DataTrigger Binding="{Binding Path=Theme}" Value="5">
                <Setter Property="Rectangle.Fill" Value="{DynamicResource content__star__favorit__hexebebeb__shadow}"/>
            </DataTrigger>

        </Style.Triggers>
    </Style>
编辑:所以看起来我的Binding是不正确的,因为我错误地假设UserControl的DataContext是我应该指向绑定的地方。

Rectangle位于ListBox的模板中,并且具有“Items”作为DataContext,因此通过更改“Binding”它现在可以正常工作。

非常感谢所有的帮助:

解决方案:

<Style x:Key="FavouriteRectangleStyle" TargetType="{x:Type Rectangle}">
        <Setter Property="Opacity" Value="1"/>
        <Style.Triggers>

            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Rectangle.Opacity" Value="0.5" />
            </Trigger>

            <DataTrigger Binding="{Binding DataContext.Theme,
                       RelativeSource={RelativeSource Mode=FindAncestor, 
                                               AncestorType=UserControl} }" Value="4">
                <Setter Property="Rectangle.Fill" 
                                    Value="{DynamicResource content__star__hex646464__shadow}"/>
            </DataTrigger>

            <DataTrigger Binding="{Binding DataContext.Theme,
                       RelativeSource={RelativeSource Mode=FindAncestor, 
                                               AncestorType=UserControl} }" Value="5">
                <Setter Property="Rectangle.Fill" 
                          Value="{DynamicResource content__star__favorit__hexebebeb__shadow}"/>
            </DataTrigger>

        </Style.Triggers>
    </Style>

4 个答案:

答案 0 :(得分:0)

更改TargetType="Rectangle"

以下是我用来测试的代码

 <Style x:Key="FavouriteRectangleStyle" TargetType="Rectangle">
        <Setter Property="Fill" Value="Blue"/>           
        <Setter Property="Opacity" Value="1"/>           
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Rectangle.Opacity" Value="0.5" />
            </Trigger>

            <DataTrigger Binding="{Binding Theme}" Value="4">
                <Setter Property="Fill" Value="Red"/>                  
            </DataTrigger>

            <DataTrigger Binding="{Binding Theme}" Value="5">
                <Setter Property="Fill" Value="Black"/>
            </DataTrigger> 

        </Style.Triggers>
</Style>

实施

<Rectangle Style="{StaticResource FavouriteRectangleStyle}"/>

答案 1 :(得分:0)

在你的窗口或usercontrol的构造函数内部,你应该设置this.DataContext = this;否则绑定不适用于相应的窗口或用户控件。

答案 2 :(得分:0)

这可能是因为您错过了实现INotifyPropertyChanged接口,请将Theme属性更新为:

 private int _theme = 5;
    public int Theme
    {
        get
        {
            return _theme;
        }

        set
        {
            if (_theme == value)
            {
                return;
            }

            _theme = value;
            OnPropertyChanged();

        }
    }

并确保您的代码隐藏或您的viewmodel正在实现接口

public partial class MainWindow : Window,INotifyPropertyChanged
{

这是一份完整的工作样本:

 Title="MainWindow" Height="350" Width="525" 
    DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Window.Resources>
    <SolidColorBrush x:Key="content__star__hex646464__shadow" Color="Red"/>
    <SolidColorBrush x:Key="content__star__favorit__hexebebeb__shadow" Color="Green"/>
    <Style x:Key="FavouriteRectangleStyle" TargetType="{x:Type Rectangle}">
        <Setter Property="Opacity" Value="1"/>
        <Style.Triggers>

            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Rectangle.Opacity" Value="0.5" />
            </Trigger>


            <DataTrigger Binding="{Binding Path=Theme}" Value="4">
                <Setter Property="Rectangle.Fill" Value="{DynamicResource content__star__hex646464__shadow}"/>
            </DataTrigger>

            <DataTrigger Binding="{Binding Path=Theme}" Value="5">
                <Setter Property="Rectangle.Fill" Value="{DynamicResource content__star__favorit__hexebebeb__shadow}"/>
            </DataTrigger>

        </Style.Triggers>
    </Style>
</Window.Resources>
<StackPanel>
    <Rectangle Style="{StaticResource FavouriteRectangleStyle}" VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Height="100"></Rectangle>
    <Button Content="Change Theme" Click="ButtonBase_OnClick"></Button>
</StackPanel>

和背后的代码:

 public partial class MainWindow : Window,INotifyPropertyChanged
{

    private int _theme = 5;
    public int Theme
    {
        get
        {
            return _theme;
        }

        set
        {
            if (_theme == value)
            {
                return;
            }

            _theme = value;
            OnPropertyChanged();

        }
    }


    public MainWindow()
    {
        this.InitializeComponent();


    }
    private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
    {
        Theme = Theme == 5 ? 4 : 5;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        var handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }    
}

答案 3 :(得分:0)

在原始问题的EDIT部分回答。感谢所有帮助