I have a ListView where the SelectionMode is set to Multiple. That adds checkboxes in front of every ListViewItem. Is it possible to change the layout so that I can change the color and position of the checkboxes?
U can see my code here of the ListView:
<ListView x:Name="lstCategories" Grid.Row="2" Margin="20,10,20,0" ItemsSource="{Binding Categories}" SelectionMode="Multiple">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding}" Style="{StaticResource TextBlockStyle}" />
<Rectangle Style="{StaticResource DividerStyle}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
What I get as result when running this XAML is: https://i.sstatic.net/WYvUN.png, but I need something like this: https://i.sstatic.net/vmtaQ.png
I know you can adjust templates to change individual controls but I dont know how to change it when it's in a ListViewItem.
<Style TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="IsHoldingEnabled" Value="False" />
<Setter Property="Margin" Value="{ThemeResource ListViewItemMargin}" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border x:Name="OuterContainer" RenderTransformOrigin="0.5,0.5">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="TiltContainer" />
</Storyboard>
</VisualState>
<VisualState x:Name="CheckboxPressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="CheckboxTiltContainer" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="Opacity"
To="{ThemeResource ListViewItemDisabledThemeOpacity}" />
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="NormalRectangle"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="CheckGlyph"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="SelectedBorder"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="SelectedEarmark"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="SelectedGlyph"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="TiltContainer" />
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="CheckGlyph"
Storyboard.TargetProperty="Opacity"
To="1" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="SelectedCheckMark"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="CheckGlyph"
Storyboard.TargetProperty="Opacity"
To="1" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="SelectedCheckMark"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DataVirtualizationStates">
<VisualState x:Name="DataAvailable" />
<VisualState x:Name="DataPlaceholder">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="PlaceholderTextBlock"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="PlaceholderRect"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="MultiSelectStates">
<VisualState x:Name="NoMultiSelect" />
<VisualState x:Name="ListMultiSelect">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="CheckboxContainerTranslateTransform"
Storyboard.TargetProperty="X"
To="0" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="ContentBorderTranslateTransform"
Storyboard.TargetProperty="X"
To="{ThemeResource ListViewItemContentTranslateX}" />
</Storyboard>
</VisualState>
<VisualState x:Name="GridMultiSelect">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="SelectedBorder"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition From="ListMultiSelect"
GeneratedDuration="0:0:0.15"
To="NoMultiSelect" />
<VisualTransition From="NoMultiSelect"
GeneratedDuration="0:0:0.15"
To="ListMultiSelect" />
</VisualStateGroup.Transitions>
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderModeStates">
<VisualState x:Name="ReorderEnabled">
<Storyboard>
<DropTargetItemThemeAnimation Storyboard.TargetName="OuterContainer" />
</Storyboard>
</VisualState>
<VisualState x:Name="Reorderable">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentScaleTransform" Storyboard.TargetProperty="ScaleX">
<LinearDoubleKeyFrame KeyTime="00:00:00.075" Value="1.05" />
<LinearDoubleKeyFrame KeyTime="00:00:00.2" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentScaleTransform" Storyboard.TargetProperty="ScaleY">
<LinearDoubleKeyFrame KeyTime="00:00:00.075" Value="1.05" />
<LinearDoubleKeyFrame KeyTime="00:00:00.2" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ReorderDisabled" />
<VisualStateGroup.Transitions>
<VisualTransition From="ReorderEnabled"
GeneratedDuration="00:00:00.2"
To="ReorderDisabled" />
</VisualStateGroup.Transitions>
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderHintStates">
<VisualState x:Name="NoReorderHint" />
<VisualState x:Name="BottomReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Bottom"
Storyboard.TargetName="ReorderHintContent"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" />
</Storyboard>
</VisualState>
<VisualState x:Name="RightReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Right"
Storyboard.TargetName="ReorderHintContent"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" />
</Storyboard>
</VisualState>
<VisualState x:Name="TopReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Top"
Storyboard.TargetName="ReorderHintContent"
ToOffset="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="LeftReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Left"
Storyboard.TargetName="ReorderHintContent"
ToOffset="0" />
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2" To="NoReorderHint" />
</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border.RenderTransform>
<ScaleTransform x:Name="ContentScaleTransform" />
</Border.RenderTransform>
<Grid x:Name="ReorderHintContent" Background="Transparent">
<Border x:Name="CheckboxTiltContainer"
Margin="{ThemeResource ListViewItemMultiselectCheckBoxMargin}"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<Border x:Name="CheckboxOuterContainer">
<Border.Clip>
<RectangleGeometry Rect="0,0,25.5,25.5" />
</Border.Clip>
<Grid x:Name="CheckboxContainer">
<Grid.RenderTransform>
<TranslateTransform x:Name="CheckboxContainerTranslateTransform" X="{ThemeResource ListViewItemContentOffsetX}" />
</Grid.RenderTransform>
<Rectangle x:Name="NormalRectangle"
Width="25.5"
Height="25.5"
Fill="{ThemeResource CheckBoxBackgroundThemeBrush}"
Stroke="{ThemeResource CheckBoxBorderThemeBrush}"
StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}" />
<Path x:Name="CheckGlyph"
Width="18.5"
Height="17"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z"
Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
FlowDirection="LeftToRight"
IsHitTestVisible="False"
Opacity="0"
Stretch="Fill"
StrokeLineJoin="Round"
StrokeThickness="2.5" />
</Grid>
</Border>
</Border>
<Border x:Name="ContentContainer">
<Border x:Name="TiltContainer">
<Border x:Name="ContentBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Border.RenderTransform>
<TranslateTransform x:Name="ContentBorderTranslateTransform" />
</Border.RenderTransform>
<Grid>
<ContentPresenter x:Name="contentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}" />
<TextBlock x:Name="PlaceholderTextBlock"
Margin="{TemplateBinding Padding}"
AutomationProperties.AccessibilityView="Raw"
Foreground="{x:Null}"
IsHitTestVisible="False"
Opacity="0"
Text="Xg" />
<Rectangle x:Name="PlaceholderRect"
Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
IsHitTestVisible="False"
Visibility="Collapsed" />
</Grid>
</Border>
</Border>
</Border>
<Border x:Name="SelectedBorder"
BorderBrush="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
BorderThickness="{ThemeResource GridViewItemMultiselectBorderThickness}"
IsHitTestVisible="False"
Opacity="0">
<Grid x:Name="SelectedCheckMark"
Width="34"
Height="34"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Opacity="0">
<Path x:Name="SelectedEarmark"
Data="M0,0 L40,0 L40,40 z"
Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
Stretch="Fill" />
<Path x:Name="SelectedGlyph"
Width="17"
Height="14.5"
Margin="0,1,1,0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z"
Fill="{ThemeResource ListViewItemCheckThemeBrush}"
FlowDirection="LeftToRight"
Stretch="Fill" />
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>