如何在 UWP 中应用 DataTrigger 和 ComboBox ItemContainerStyle？

Question

我正在尝试根据分配给 ComboBox ItemSource 的属性值更改 ComboBoxItem 的值。

我知道在WPF中可以实现如下：

 <ComboBox.ItemContainerStyle>
                    <Style TargetType="{x:Type ComboBoxItem}">
                        <Setter Property="Background" Value="#FFD2D2" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsValid}" Value="True">
                                <Setter Property="Background" Value="Green" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
  </ComboBox.ItemContainerStyle>

在 UWP 中，我尝试使用行为，但仍然无法正常工作。

   <ComboBox.ItemContainerStyle>
                        <Style TargetType="ComboBoxItem">
                            <Setter Property="Background" Value="Transparent" />
                            <interactivity:Interaction.Behaviors>
                                <core:DataTriggerBehavior Binding="{Binding IsValid}" Value="True">
                                    <core:ChangePropertyAction PropertyName="Background" Value="{ThemeResource MyBorderBrush}" />
                                </core:DataTriggerBehavior>
                            </interactivity:Interaction.Behaviors>
                        </Style>
   </ComboBox.ItemContainerStyle>

我也尝试过使用 VSM，但不确定如何应用条件值。

 <Style TargetType="ComboBoxItem">
                            <Setter Property="Background" Value="Transparent" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ComboBoxItem">
                                        <Grid x:Name="LayoutRoot" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal">
                                                        <Storyboard>
                                                            // What should go here?
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
</Style>

编辑：

我更喜欢设置 ComboBoxItem 本身背景的解决方案，而不是创建单独的网格/边框，然后使用转换器作为背景。

Answer 1

据我所知，UWP xaml 在样式上不支持此类触发器。通常，我们在控件的根子节点上使用 Behavior 数据触发器。如果您不想将数据绑定用作@touseefbsb 的答案，但您想根据您的数据模型更改ComboboxItem 样式，我认为您可以尝试操作ComboBox 的Itemtemplate 并在其中使用Behavior 数据触发器。

<ComboBox Width="300" Height="60" Name="MyComBoBox" ItemsSource="{Binding models}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <Grid Name="MyGrid">
                <TextBlock Text="{Binding Name}"></TextBlock>
                <interactivity:Interaction.Behaviors>
                    <core:DataTriggerBehavior Binding="{Binding IsValid}" ComparisonCondition="Equal" Value="true">
                        <core:ChangePropertyAction PropertyName="Background" TargetObject="{Binding ElementName=MyGrid}"
                                                   Value="{StaticResource MyColor}" />
                    </core:DataTriggerBehavior>
                </interactivity:Interaction.Behaviors>
            </Grid>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

Answer 2

这是在 uwp 中将集合绑定到 ComboBox 的方法，并使用集合项的属性值设置每个项的背景。

XAML

<ComboBox 
    x:Name="ComboBox1" 
    ItemsSource="{x:Bind Books}"
    Header="Select A Book">
    <ComboBox.ItemTemplate>
        <DataTemplate x:DataType="models:Book">
            <StackPanel  
                Background="{x:Bind MyBackground}"
                Padding="8">                        
                <TextBlock
                    Text="{x:Bind Title}"/>
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

C#

ObservableCollection<Book> Books = new ObservableCollection<Book>();

public MainPage()
{
    this.InitializeComponent();
    Books.Add(new Book("Book1",new SolidColorBrush(Colors.Red)));
    Books.Add(new Book("Book2",new SolidColorBrush(Colors.Green)));
    Books.Add(new Book("Book3",new SolidColorBrush(Colors.Blue)));
}

Models.Book

public class Book
{
    public string Title {get; set;}
    public SolidColorBrush MyBackground{get; set;}
    public Book(string title,SolidColorBrush myBackground)
    {
        Title = title;
        MyBackground = myBackground;
    }
}

所以基本上你只需要绑定你的 Stackpanel 的背景属性，你已经在其中包装了 ComboBoxItem 的内容，你甚至可以将你的内容包装在网格或边框中，​​以及任何你喜欢的东西.