“Unselected” VisualState for UWP ComboBoxItem?

Question

Is there an equivalent for the "Unselected" VisualState in UWP ComboBox? We are migrating from Windows 8 and would like a solution that is cross-compatible between each other.

I looked at the Default Styles for ComboBoxItem and UWP does not seem to have a VisualState for " Unselected ".

Here is a screen shot of what happens:

The Blue one is the items that have been selected. Since there is no " Unselected " Visual State in UWP, it does not unselect the previously selected items.

Here is my code for the ComboBoxItem Style:

<Style x:Key="Style_ComboBox_CheckSelector_ItemContainer" TargetType="ComboBoxItem">
        <Setter Property="TabNavigation" Value="Local" />
        <Setter Property="Padding" Value="8,10" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBoxItem">
                    <Border x:Name="LayoutRoot"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="Rectangle_Background_OverState"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="Rectangle_DisabledVisualElement"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="Rectangle_PressedVisualElement"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="ContentPresenter_Selected"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                        <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="Rectangle_FocusVisualElement"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedUnfocused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="ContentPresenter_Selected"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedDisabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="ContentPresenter_Selected"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                        <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="Rectangle_DisabledVisualElement"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedPointerOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="ContentPresenter_Selected"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                        <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="Rectangle_Background_OverState"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedPressed">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="ContentPresenter_Selected"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                        <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="Rectangle_PressedVisualElement"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="Rectangle_FocusVisualElement"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="PointerFocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid x:Name="InnerGrid">
                            <Rectangle x:Name="Rectangle_Background_NormalState" Fill="#FF404040" />
                            <Rectangle x:Name="Rectangle_Background_OverState"
                                   Fill="#FF666666"
                                   Opacity="0"
                                   Stroke="#FF999999"
                                   StrokeThickness="1" />
                            <ContentPresenter x:Name="ContentPresenter"
                                          Margin="{TemplateBinding Padding}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          ContentTransitions="{TemplateBinding ContentTransitions}"
                                          Foreground="#FFCCCCCC" />
                            <ContentPresenter x:Name="ContentPresenter_Selected"
                                          Margin="{TemplateBinding Padding}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          ContentTransitions="{TemplateBinding ContentTransitions}"
                                          Foreground="Blue"
                                          Opacity="0" />
                            <Grid x:Name="Grid_ControlOverlayParts" IsHitTestVisible="False">
                                <Rectangle x:Name="Rectangle_PressedVisualElement"
                                       Fill="#33FFFFFF"
                                       Opacity="0" />
                                <Rectangle x:Name="Rectangle_FocusVisualElement"
                                       Opacity="0" />
                                <Rectangle x:Name="Rectangle_DisabledVisualElement"
                                       Fill="#7F1A1A1A"
                                       Opacity="0" />
                            </Grid>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Thank you!

Answer 1

I do not recommend sharing a template for the same control across Windows 8/8.1 and UWP. The implementations of most controls have changed significantly, and they may require different template parts. A template which works for a control in Windows 8.1 might not work when compiled for UWP.

The Visual States for the ComboBoxItem control are different between Windows 8.1 and UWP. In Windows 8.1, it has a "SelectionStates" VisualStateGroup containing the "Selected" VisualState, whereas in UWP the "Selected" VisualState is part of the "CommonStates" VisualStateGroup.

Your template conforms to the Windows 8.1 implementation, not the UWP implementation. You will need to have two separate templates, one for Windows 8.1 and one for UWP.