How to apply DataTrigger with ComboBox ItemContainerStyle in UWP?

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.

Have you come across this: https://stackoverflow.com/questions/33648456/uwp-style-trigger-missing ? — Muzib, Sep 27 '18 at 08:47
@Muzib, From my post, you can see that I already tried that way but it's not working. — Dishant, Sep 27 '18 at 22:45

score 1 · Accepted Answer · answered Sep 28 '18 at 07:02

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>

Thanks, I was looking for some solution to set background inside `ItemContainerStyle` instead of creating a separate grid layout, but based on your solution that is quite not possible? — Dishant, Sep 29 '18 at 04:19
Yes, UWP xaml doesn't support such triggers in style, so changing the `ItemContainerStyle` will not work. — Breeze Liu - MSFT, Oct 01 '18 at 01:33

Muhammad Touseef · Answer 2 · 2018-09-27T09:03:20.983

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.

I guess you didn't get the question correctly. I know how to bind ComboBox, what I want to do is to change the ComboBox Item background based on the property value. — Dishant, Sep 26 '18 at 23:07
This is not what I am looking for, I would suggest reading my question properly. — Dishant, Sep 27 '18 at 22:45

How to apply DataTrigger with ComboBox ItemContainerStyle in UWP?

2 Answers2