绑定ListBox项目背景& WPF中的选择颜色

时间:2016-08-13 23:55:48

标签: c# wpf xaml data-binding listboxitem

我有一个列表,其中每个项目的背景颜色应取决于两件事:选择状态和数据上下文中的布尔属性。我已经想出如何绑定背景颜色,但是一旦我选择列表项,我的自定义背景就会消失。

最终结果理想情况下(取决于选择状态)如果数据上下文布尔值为真,则为绿色阴影;如果为假,则为红色阴影。

MainWindow.xaml:

<ListBox x:Name="CrewList" ItemsSource="{Binding CrewList}" SelectedItem="{Binding SelectedCrew}" Style="{StaticResource EventOverviewListBox}" Grid.Column="1" Grid.Row="0">
            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Data.IsValid}" Value="true">
                            <Setter Property="Background" Value="{StaticResource StatusValid}"/>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Data.IsValid}" Value="false">
                            <Setter Property="Background" Value="{StaticResource StatusInvalid}"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="10,10,10,10" KeyboardNavigation.IsTabStop="False">
                        <TextBlock Text="{Binding Lane}" Margin="0,0,20,0" FontSize="20" />
                        <TextBlock Text="{Binding ClubName}" Foreground="Black" VerticalAlignment="Center"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

的App.xaml:

    <SolidColorBrush x:Key="StatusValid">LawnGreen</SolidColorBrush>
    <SolidColorBrush x:Key="StatusInvalid">Red</SolidColorBrush>
    <Style x:Key="EventOverviewListBox" TargetType="ListBox">
        <Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="Background" Value="Teal"/>
    </Style>
    <Style x:Key="EventOverviewListBoxItem" TargetType="ListBoxItem">
        <Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
    </Style>

我进行了搜索和搜索,但在过去的几个小时内没有找到任何东西,所以我希望其他人知道一种方式。

谢谢!

1 个答案:

答案 0 :(得分:1)

我假设通过“选择状态”表示是否选择了该项目。

ListBoxItem有一个ControlTemplate,其触发器优先于触发器。您需要为ListBoxItem样式创建自己的ControlTemplate。 另外,请使用MultiDataTrigger

像这样:

<Style TargetType="{x:Type ListBoxItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Border Name="BorderWrap">
                    <ContentPresenter />
                </Border>
                <ControlTemplate.Triggers>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding RelativeSource={RelativeSource Self},Path=IsSelected}" Value="True" />
                            <Condition Binding="{Binding Data.IsValid}" Value="True" />
                        </MultiDataTrigger.Conditions>
                        <MultiDataTrigger.Setters>
                            <Setter TargetName="BorderWrap" Property="Background" Value="{StaticResource StatusValid}"/>
                        </MultiDataTrigger.Setters>
                    </MultiDataTrigger>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding RelativeSource={RelativeSource Self},Path=IsSelected}" Value="True" />
                            <Condition Binding="{Binding Data.IsValid}" Value="False" />
                        </MultiDataTrigger.Conditions>
                        <MultiDataTrigger.Setters>
                            <Setter TargetName="BorderWrap" Property="Background" Value="{StaticResource StatusInvalid}"/>
                        <MultiDataTrigger.Setters>
                    </MultiDataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>