[UWP] Add Check Mark to the Selected Item in Combobox DropDown

Question

Is it possible to add a checkmark beside the item I select in a comboBox dropdown? so that, only one checkmark at a time in the dropdown of the combox will be present? If so, how?

Answer 1

Hello, Welcome to Micorosoft Q&A,

For this scenario, you could edit ComboBoxItem style and add checkmark indicator in the content, then show it with in the visual state setter when the item selected. Please copy the complete xaml and paste into project application resource.

   <Style x:Key="ComboBoxItemRevealStyle" TargetType="ComboBoxItem">  
       <Setter Property="Foreground" Value="{ThemeResource ComboBoxItemForeground}" />  
       <Setter Property="Background" Value="{ThemeResource ComboBoxItemRevealBackground}" />  
       <Setter Property="BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrush}" />  
       <Setter Property="BorderThickness" Value="{ThemeResource ComboBoxItemRevealBorderThemeThickness}" />  
       <Setter Property="TabNavigation" Value="Local" />  
       <Setter Property="Padding" Value="{ThemeResource ComboBoxItemRevealThemePadding}" />  
       <Setter Property="HorizontalContentAlignment" Value="Stretch" />  
       <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />  
       <Setter Property="Template">  
           <Setter.Value>  
               <ControlTemplate TargetType="ComboBoxItem">  
                   <Grid  
                       x:Name="LayoutRoot"  
                       Background="{TemplateBinding Background}"  
                       BorderBrush="{TemplateBinding BorderBrush}"  
                       BorderThickness="{TemplateBinding BorderThickness}"  
                       Control.IsTemplateFocusTarget="True"  
                       CornerRadius="{TemplateBinding CornerRadius}">  
                       <ContentPresenter  
                           x:Name="ContentPresenter"  
                           Margin="{TemplateBinding Padding}"  
                           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"  
                           VerticalAlignment="{TemplateBinding VerticalContentAlignment}"  
                           Content="{TemplateBinding Content}"  
                           ContentTemplate="{TemplateBinding ContentTemplate}"  
                           ContentTransitions="{TemplateBinding ContentTransitions}"  
                           Foreground="{TemplateBinding Foreground}" />  
                       <Viewbox  
                           Width="16"  
                           Margin="0,0,2,0"  
                           HorizontalAlignment="Right">  
                           <SymbolIcon  
                               x:Name="Indicator"  
                               Symbol="Accept"  
                               Visibility="Collapsed" />  
                       </Viewbox>  
                       <VisualStateManager.VisualStateGroups>  
                           <VisualStateGroup x:Name="CommonStates">  
                               <VisualState x:Name="Normal">  
     
                                   <Storyboard>  
                                       <PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />  
                                   </Storyboard>  
                                   <VisualState.Setters>  
                                       <Setter Target="Indicator.Visibility" Value="Collapsed" />  
                                   </VisualState.Setters>  
                               </VisualState>  
     
                               <VisualState x:Name="PointerOver">  
                                   <VisualState.Setters>  
                                       <Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />  
                                       <Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundPointerOver}" />  
                                       <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushPointerOver}" />  
                                       <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundPointerOver}" />  
     
                                   </VisualState.Setters>  
     
                                   <Storyboard>  
                                       <PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />  
                                   </Storyboard>  
                               </VisualState>  
     
                               <VisualState x:Name="Disabled">  
                                   <VisualState.Setters>  
                                       <Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundDisabled}" />  
                                       <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushDisabled}" />  
                                       <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundDisabled}" />  
                                   </VisualState.Setters>  
                               </VisualState>  
     
                               <VisualState x:Name="Pressed">  
                                   <VisualState.Setters>  
                                       <Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundPressed}" />  
                                       <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushPressed}" />  
                                       <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundPressed}" />  
                                       <Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />  
                                   </VisualState.Setters>  
     
                                   <Storyboard>  
                                       <PointerDownThemeAnimation Storyboard.TargetName="LayoutRoot" />  
                                   </Storyboard>  
                               </VisualState>  
     
                               <VisualState x:Name="Selected">  
                                   <VisualState.Setters>  
                                       <Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundSelected}" />  
                                       <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelected}" />  
                                       <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelected}" />  
                                       <Setter Target="Indicator.Visibility" Value="Visible" />  
                                   </VisualState.Setters>  
     
                                   <Storyboard>  
                                       <PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />  
                                   </Storyboard>  
                               </VisualState>  
                               <VisualState x:Name="SelectedUnfocused">  
                                   <VisualState.Setters>  
                                       <Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundSelectedUnfocused}" />  
                                       <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelectedUnfocused}" />  
                                       <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelectedUnfocused}" />  
                                   </VisualState.Setters>  
                               </VisualState>  
                               <VisualState x:Name="SelectedDisabled">  
                                   <VisualState.Setters>  
                                       <Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundSelectedDisabled}" />  
                                       <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelectedDisabled}" />  
                                       <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelectedDisabled}" />  
                                   </VisualState.Setters>  
                               </VisualState>  
                               <VisualState x:Name="SelectedPointerOver">  
                                   <VisualState.Setters>  
                                       <Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundSelectedPointerOver}" />  
                                       <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelectedPointerOver}" />  
                                       <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelectedPointerOver}" />  
                                       <Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />  
                                       <Setter Target="Indicator.Visibility" Value="Visible" />  
                                   </VisualState.Setters>  
     
                                   <Storyboard>  
                                       <PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />  
                                   </Storyboard>  
                               </VisualState>  
                               <VisualState x:Name="SelectedPressed">  
                                   <VisualState.Setters>  
                                       <Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundSelectedPressed}" />  
                                       <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelectedPressed}" />  
                                       <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelectedPressed}" />  
                                       <Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />  
                                   </VisualState.Setters>  
                               </VisualState>  
     
                           </VisualStateGroup>  
                           <VisualStateGroup x:Name="InputModeStates">  
                               <VisualState x:Name="InputModeDefault" />  
                               <VisualState x:Name="TouchInputMode">  
                                   <VisualState.Setters>  
                                       <Setter Target="ContentPresenter.Margin" Value="{ThemeResource ComboBoxItemRevealThemeTouchPadding}" />  
                                   </VisualState.Setters>  
                               </VisualState>  
                               <VisualState x:Name="GameControllerInputMode">  
                                   <VisualState.Setters>  
                                       <Setter Target="ContentPresenter.Margin" Value="{ThemeResource ComboBoxItemRevealThemeGameControllerPadding}" />  
                                   </VisualState.Setters>  
                               </VisualState>  
     
                           </VisualStateGroup>  
     
                       </VisualStateManager.VisualStateGroups>  
                   </Grid>  
               </ControlTemplate>  
           </Setter.Value>  
       </Setter>  
   </Style>  

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.