How to style checkbox in multi-selection ListView in UWP

Question

In UWP am using a multi-select ListView with an item template, like this:

    <ListView 
        ItemsSource="{x:Bind ItemsSource, Mode=OneWay}" 
        ItemTemplate="{x:Bind LineTemplate, Mode=OneWay}"
        SelectionMode="Multiple"
        >
    </ListView>

The problem is the style of the checkbox added by UWP. In the rest of my program I have my own style for checkboxes, and the one in the ListView doesn't match.

I don't see any way to style the checkbox, and I don't see any code lying around for the ListViewItemPresenter that is in the ListViewItem template.

Perhaps I could set IsMultiSelectCheckBoxEnabled="False" and then include my own CheckBox in the ListViewItem. I see how to add the CheckBox to the template in the ListViewItem style: I can put it right before the ListViewItemPresenter (using, say, a horizontal StackPanel). Then I can bind IsChecked="{TemplateBinding IsSelected}".

But if I do that, then I get the exception "ListViewItemPresenter can only be used as the first child in the template for a ListViewItem."

Is there a more or less simple way to do this?

--sjb

P.S. Obviously the ListViewItemPresenter is very special... I have the impression that it has a lot of optimization built into it, which one shouldn't just throw away.

Answer 1

You'll have to modify ItemContainerStyle. Although if you try to modify it with Visual Studio tools, you'll only get access to limited version of it, something like this:

<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="Padding" Value="12,0,12,0"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
        <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" ContentMargin="{TemplateBinding Padding}" CheckMode="Inline" ContentTransitions="{TemplateBinding ContentTransitions}" CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}" FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}" SelectionCheckMarkVisualEnabled="True" SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}" SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

To get full control over listviewitem container, you need to use another template, like this:

<!-- Style for Windows.UI.Xaml.Controls.ListViewItem -->
<Style TargetType="ListViewItem" x:Key="ListViewItemExpanded">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Padding" Value="12,0,12,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="ListViewItem">
      <Grid x:Name="ContentBorder"
          Background="{TemplateBinding Background}"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}">
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal">
          <Storyboard>
            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="PointerOver">
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="BorderBackground"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="1"/>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Pressed">
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="BorderBackground"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="1"/>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <PointerDownThemeAnimation TargetName="ContentPresenter" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Selected">
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="MultiSelectCheck"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0:0:0"
                             To="1"/>
            <DoubleAnimation Storyboard.TargetName="BorderBackground"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="1"/>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentLowBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="PointerOverSelected">
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="MultiSelectCheck"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0:0:0"
                             To="1"/>
            <DoubleAnimation Storyboard.TargetName="BorderBackground"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="1"/>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentMediumBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="PressedSelected">
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="MultiSelectCheck"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0:0:0"
                             To="1"/>
            <DoubleAnimation Storyboard.TargetName="BorderBackground"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="1"/>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
            </ObjectAnimationUsingKeyFrames>
            <PointerDownThemeAnimation TargetName="ContentPresenter" />
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
      <VisualStateGroup x:Name="DisabledStates">
        <VisualState x:Name="Enabled"/>
        <VisualState x:Name="Disabled">
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="ContentBorder"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="{ThemeResource ListViewItemDisabledThemeOpacity}"/>
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
      <VisualStateGroup x:Name="MultiSelectStates">
        <VisualState x:Name="MultiSelectDisabled">
          <Storyboard>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheckBoxTransform"
                                            Storyboard.TargetProperty="X">
              <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
              <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="-32" KeySpline="0.1,0.9,0.2,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectClipTransform"
                                           Storyboard.TargetProperty="X">
              <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
              <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="32" KeySpline="0.1,0.9,0.2,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterTranslateTransform"
                                           Storyboard.TargetProperty="X">
              <EasingDoubleKeyFrame KeyTime="0:0:0" Value="32"/>
              <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="0" KeySpline="0.1,0.9,0.2,1"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Visibility">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
              <DiscreteObjectKeyFrame KeyTime="0:0:0.333" Value="Collapsed" />
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="MultiSelectEnabled">
          <Storyboard>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheckBoxTransform"
                                            Storyboard.TargetProperty="X">
              <EasingDoubleKeyFrame KeyTime="0:0:0" Value="-32"/>
              <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="0" KeySpline="0.1,0.9,0.2,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectClipTransform"
                                           Storyboard.TargetProperty="X">
              <EasingDoubleKeyFrame KeyTime="0:0:0" Value="32"/>
              <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="0" KeySpline="0.1,0.9,0.2,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterTranslateTransform"
                                           Storyboard.TargetProperty="X">
              <EasingDoubleKeyFrame KeyTime="0:0:0" Value="-32"/>
              <SplineDoubleKeyFrame KeyTime="0:0:0.333" Value="0" KeySpline="0.1,0.9,0.2,1"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Visibility">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectCheck" Storyboard.TargetProperty="Visibility">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterGrid" Storyboard.TargetProperty="Margin">
              <DiscreteObjectKeyFrame KeyTime="0" Value="32,0,0,0" />
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
      <VisualStateGroup x:Name="DataVirtualizationStates">
        <VisualState x:Name="DataAvailable"/>
        <VisualState x:Name="DataPlaceholder">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Visibility">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderRect" Storyboard.TargetProperty="Visibility">
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
      <VisualStateGroup x:Name="ReorderHintStates">
        <VisualState x:Name="NoReorderHint"/>
        <VisualState x:Name="BottomReorderHint">
          <Storyboard>
            <DragOverThemeAnimation TargetName="ContentBorder" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Bottom" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="TopReorderHint">
          <Storyboard>
            <DragOverThemeAnimation TargetName="ContentBorder" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Top" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="RightReorderHint">
          <Storyboard>
            <DragOverThemeAnimation TargetName="ContentBorder" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Right" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="LeftReorderHint">
          <Storyboard>
            <DragOverThemeAnimation TargetName="ContentBorder" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Left" />
          </Storyboard>
        </VisualState>
        <VisualStateGroup.Transitions>
          <VisualTransition To="NoReorderHint" GeneratedDuration="0:0:0.2"/>
        </VisualStateGroup.Transitions>
      </VisualStateGroup>
      <VisualStateGroup x:Name="DragStates">
        <VisualState x:Name="NotDragging" />
        <VisualState x:Name="Dragging">
          <Storyboard>
            <DoubleAnimation Storyboard.TargetName="ContentBorder"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="{ThemeResource ListViewItemDragThemeOpacity}" />
            <DragItemThemeAnimation TargetName="ContentBorder" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="DraggingTarget">
          <Storyboard>
            <DropTargetItemThemeAnimation TargetName="ContentBorder" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="MultipleDraggingPrimary">
          <Storyboard>
            <!-- These two Opacity animations are required - the FadeInThemeAnimations
                                     on the same elements animate an internal Opacity. -->
            <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayBackground"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="1" />
            <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayText"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="1" />
            <DoubleAnimation Storyboard.TargetName="ContentBorder"
                             Storyboard.TargetProperty="Opacity"
                             Duration="0"
                             To="{ThemeResource ListViewItemDragThemeOpacity}" />
            <FadeInThemeAnimation TargetName="MultiArrangeOverlayBackground" />
            <FadeInThemeAnimation TargetName="MultiArrangeOverlayText" />
            <DragItemThemeAnimation TargetName="ContentBorder" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="MultipleDraggingSecondary">
          <Storyboard>
            <FadeOutThemeAnimation TargetName="ContentBorder" />
          </Storyboard>
        </VisualState>
        <VisualState x:Name="DraggedPlaceholder">
          <Storyboard>
            <FadeOutThemeAnimation TargetName="ContentBorder" />
          </Storyboard>
        </VisualState>
        <VisualStateGroup.Transitions>
          <VisualTransition To="NotDragging" GeneratedDuration="0:0:0.2"/>
        </VisualStateGroup.Transitions>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Rectangle x:Name="BorderBackground"
                IsHitTestVisible="False"
                Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}"
                Opacity="0"
                Control.IsTemplateFocusTarget="True"/>
    <Grid x:Name="ContentPresenterGrid"
          Background="Transparent"
          Margin="0,0,0,0">
      <Grid.RenderTransform>
        <TranslateTransform x:Name="ContentPresenterTranslateTransform"/>
      </Grid.RenderTransform>
      <ContentPresenter x:Name="ContentPresenter"
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        Content="{TemplateBinding Content}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        Margin="{TemplateBinding Padding}"/>
    </Grid>
    <!-- The 'Xg' text simulates the amount of space one line of text will occupy.
                      In the DataPlaceholder state, the Content is not loaded yet so we
                      approximate the size of the item using placeholder text. -->
    <TextBlock x:Name="PlaceholderTextBlock"
                Opacity="0"
                Text="Xg"
                Foreground="{x:Null}"
                Margin="{TemplateBinding Padding}"
                IsHitTestVisible="False"
                AutomationProperties.AccessibilityView="Raw"/>
    <Rectangle x:Name="PlaceholderRect"
                Visibility="Collapsed"
                Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"/>
    <Rectangle x:Name="MultiArrangeOverlayBackground"
                IsHitTestVisible="False"
                Opacity="0"
                Fill="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                Grid.ColumnSpan="2"/>
    <Border x:Name="MultiSelectSquare"
            BorderBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
            BorderThickness="2"
            Width="20"
            Height="20"
            Margin="12,0,0,0"
            VerticalAlignment="Center"
            HorizontalAlignment="Left"
            Visibility="Collapsed" >
      <Border.Clip>
        <RectangleGeometry Rect="0,0,20,20">
          <RectangleGeometry.Transform>
            <TranslateTransform x:Name="MultiSelectClipTransform"/>
          </RectangleGeometry.Transform>
        </RectangleGeometry>
      </Border.Clip>
      <Border.RenderTransform>
        <TranslateTransform x:Name="MultiSelectCheckBoxTransform"/>
      </Border.RenderTransform>
      <FontIcon x:Name="MultiSelectCheck"
                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                Glyph="&#xE73E;"
                FontSize="16"
                Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                Visibility="Collapsed"
                Opacity="0"/>
    </Border>
    <TextBlock x:Name="MultiArrangeOverlayText"
                Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DragItemsCount}"
                Foreground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                FontFamily="{ThemeResource ContentControlThemeFontFamily}"
                FontSize="26.667"
                IsHitTestVisible="False"
                Opacity="0"
                TextWrapping="Wrap"
                TextTrimming="WordEllipsis"
                Margin="18,9,0,0"
                AutomationProperties.AccessibilityView="Raw"
                Grid.ColumnSpan="2"/>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
</Style>

In there you can see MultiSelectCheck icon which is responsible for the look of the check box, you can try to modify it and related visual states to look more in your app's style.

Beware that in some cases using this expanded template may hurt performance of your ListView. You should read this and this articles to understand performance of ListView better.