How to apply DataTrigger with ComboBox ItemContainerStyle in UWP? - xaml

Question

I am trying to change the value of ComboBoxItem based on the property value assigned to the ComboBox ItemSource.
I know that in WPF it can be achieved as below:
<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>
In UWP I tried using behaviors, but still, it's not working.
<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>
I also tried to use VSM, but am not sure how to apply the conditional value.
<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>
EDIT:
I would prefer a solution setting the background of ComboBoxItem itself, instead of creating separate Grid/Border and then using Converters for the background.

Answer 1

As far as I know, UWP xaml doesn't support such triggers in style. Generally, we use the Behavior datatrigger on the control's root child node. If you don't want to use the data binding as #touseefbsb's answer, but you want to change the ComboboxItem style base on your data model, I think you can try to operate the ComboBox's Itemtemplate and use the Behavior datatrigger in it.
<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

This is how you bind a collection to a ComboBox in uwp, and set the background of each item with a property value of your collection items.
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;
}
}
So Basically you just need to bind the background property of you Stackpanel in which you have wrapped the content of your ComboBoxItem you can wrap your content even in a Grid or a border as well whatever you prefer.