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!
