Search code examples
wpfxamllistboxmicrosoft-metrolistboxitem

How to create a WPF ListBoxItem with check mark?


I was looking a while for how to build a list item with a check mark if selected.

Checking different Resources, it seems there are a lot of code solutions, bot no true XAML only one.

So this is what i tried to achive:

Selection

Any additions are welcomed.

In the spirit of Answer-your-own (Stackoverflow blog)


Solution

  • So here is what I actually got after hours of figuring it out. As said, any additions are welcomed.

    Selection

    The check mark is:

    U+2714 (10004)  ✔   HEAVY CHECK MARK    Dingbats (2700–27BF)
    

    The style code:

    • basically creating a wrapper for any item, setting base properties, and changing them on item selection, made available as StaticResource as checkmarkItem
    <Window.Resources>
        <Style x:Key="checkmarkItem" TargetType="ListBoxItem">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
    
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border Name="Border" Background="Transparent" BorderThickness="5" BorderBrush="Transparent" Margin="0,1,0,1">
                            <Grid>
                                <TextBlock VerticalAlignment="Top" HorizontalAlignment="Right" Name="Marker" Visibility="Hidden" Background="#0078D7" Padding="5,0,0,5" Foreground="White">✔</TextBlock>
                                <ContentPresenter />
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ListBoxItem.IsSelected" Value="true">
                                <Setter TargetName="Marker" Property="Visibility" Value="Visible" />
                                <Setter TargetName="Border" Property="BorderBrush" Value="#0078D7"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    

    The implementation:

    • it is just a regular stackpanel arrangement, all styles are added by referring in ItemContainerStyle="{StaticResource checkmarkItem}"
    <Grid>
        <Label Grid.Row="0" FontSize="26">Software</Label>
    
        <ListView Grid.Row="1" SelectionMode="Multiple" BorderBrush="Transparent" ItemContainerStyle="{StaticResource checkmarkItem}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{Binding Title}">
                        <Image Source="{Binding Icon}" Height="48" Width="48" VerticalAlignment="Center" Margin="5,0,20,0"/>
                        <StackPanel Orientation="Vertical" VerticalAlignment="Center">
                            <TextBlock Text="{Binding Title}" FontSize="16" TextWrapping="Wrap"/>
                            <TextBlock Text="{Binding Description}" TextWrapping="Wrap" />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
    
        </ListView>
    </Grid>