不同图像和边框背景的样式触发器答案

【问题标题】：Style Trigger for different images and border background不同图像和边框背景的样式触发器
【发布时间】：2013-10-31 15:40:22
【问题描述】：

我想使用不同的边框背景和不同的图片（每张图片必须使用不同的背景颜色）我如何改变使用 StyleTrigger 来做到这一点？（现在它只显示所有图像的红色边框）

<DataTemplate>
    <Border BorderThickness="1" Width="18" Height="18" CornerRadius="2" BorderBrush="Red" Background="Red">
        <Image Width="16" Height="16">
            <Image.Style>
                <Style TargetType="{x:Type Image}">
                    <Setter Property="Source" Value="{x:Null}" />
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding RowData.DataContext.my}" Value="High">
                                                    <Setter Property="Source" Value="/project;component/Images/High.png" />
                                                </DataTrigger>
                                                <DataTrigger Binding="{Binding RowData.DataContext.my}" Value="Medium">
                                                    <Setter Property="Source" Value="/project;component/Images/Medium.png" />
                                                </DataTrigger>
                                                <DataTrigger Binding="{Binding RowData.DataContext.my}" Value="Low">
                                                    <Setter Property="Source" Value="/project;component/Images/Low.png" />
                                                </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
    </Border>
</DataTemplate>

谢谢。

【问题讨论】：

你已经为图像的边框赋予了 BorderBrush 红色......这就是为什么每个图像都会出现红色边框......触发器只会更新图像的来源......而不是它的边框
@nit 我想知道我必须如何为边框和图像使用触发器？
就像你给 Image 的风格一样。同样你必须将风格触发器应用到边框来改变它的 BorderBrush 和背景
@nit，你的意思是我需要两个触发器？我需要把这些结合起来。

标签： wpf triggers styles

【解决方案1】：

假设您的Binding 是正确的，您只需将类似的Style 添加到Border 以更新Background 属性并从Border 本身中删除Background 值：

<DataTemplate>
    <Border BorderThickness="1" Width="18" Height="18" CornerRadius="2" BorderBrush="Red">
        <Border.Style>
            <Style TargetType="{x:Type Border}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RowData.DataContext.my}" Value="High">
                        <Setter Property="Background" Value="Green" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding RowData.DataContext.my}" Value="Medium">
                        <Setter Property="Background" Value="Blue" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding RowData.DataContext.my}" Value="Low">
                        <Setter Property="Background" Value="Red" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
        <Image Width="16" Height="16">
            <Image.Style>
                <Style TargetType="{x:Type Image}">
                    <Setter Property="Source" Value="{x:Null}" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RowData.DataContext.my}" Value="High">
                            <Setter Property="Source" Value="/project;component/Images/High.png" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding RowData.DataContext.my}" Value="Medium">
                            <Setter Property="Source" Value="/project;component/Images/Medium.png" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding RowData.DataContext.my}" Value="Low">
                            <Setter Property="Source" Value="/project;component/Images/Low.png" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
    </Border>
</DataTemplate>

试试这个。

【讨论】：

Sheridan，图像没有背景属性。这就是问题所在。
哦，抱歉，我没有给予足够的关注……我们可以改为设置Background 的Border……我会更新我的答案。