I'm trying to change the default light gray highlight on a selected ListViewItem
to be the blue highlight that shows up when the ListView
is focused. I've been trying to reconcile different StackOverflow answers and sources online, but I haven't figured out what kind of XAML I need yet. I have the following:
<ListView ItemContainerStyle="{StaticResource checkableListViewItem}"
SelectionMode="Multiple"
View="{StaticResource fieldValueGridView}"/>
The referenced View
resource is:
<GridView x:Key="fieldValueGridView" AllowsColumnReorder="False">
<GridViewColumn Header="Field">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock FontWeight="Bold" Text="{Binding Path=DisplayName}"/>
<TextBlock FontWeight="Bold" Text=": "/>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Value" DisplayMemberBinding="{Binding Path=FieldValue}"/>
</GridView>
And the referenced ItemContainerStyle
resource is:
<Style TargetType="ListViewItem" BasedOn="{StaticResource {x:Type ListViewItem}}"
x:Key="checkableListViewItem">
<Setter Property="IsSelected" Value="{Binding Path=IsChecked}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Top" />
</Style>
The ListView
's IsEnabled
property does change, if that matters. I wanted to somehow incorporate <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="{x:Static SystemColors.HighlightColor}"/>
, or something similar, to highlight selected ListViewItem
s that are in an unfocused ListView
.
I have the following style, but this does not seem to affect ListViewItem
s in my ListView
, and I thought the GridView
that I'm using might be the reason. When I tried to override the Template
property, the View
property got ignored so my GridView
wasn't being displayed.
<Style TargetType="ListViewItem">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"
Color="{x:Static SystemColors.HighlightColor}"/>
</Style.Resources>
</Style>
How do I highlight in blue the selected items in my ListView
when that ListView
is unfocused?
This will work for a ListView that doesn't have a GridView
<Style TargetType="{x:Type ListViewItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"
Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"/>
</Style.Resources>
</Style>
Update
1.Without re-templating when using GridView
<LinearGradientBrush x:Key="ListItemSelectedFill" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFD9F4FF" Offset="0"/>
<GradientStop Color="#FF9BDDFB" Offset="1"/>
</LinearGradientBrush>
<Style TargetType="ListViewItem" x:Key="checkableListViewItem">
<Setter Property="IsSelected" Value="{Binding Path=IsChecked}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource ListItemSelectedFill}" />
<Setter Property="BorderBrush" Value="#FF98DDFB" />
</Trigger>
<!-- Or if you want to choose another color for unfocused
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True" />
<Condition Property="Selector.IsSelectionActive" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="{StaticResource ListItemSelectedFill}" />
<Setter Property="BorderBrush" Value="#FF98DDFB" />
</MultiTrigger>
-->
</Style.Triggers>
</Style>
2. Re-templating the ListViewItem when using GridView.
<LinearGradientBrush x:Key="ListItemHoverFill" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF1FBFF" Offset="0"/>
<GradientStop Color="#FFD5F1FE" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ListItemSelectedFill" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFD9F4FF" Offset="0"/>
<GradientStop Color="#FF9BDDFB" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ListItemSelectedInactiveFill" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFEEEDED" Offset="0"/>
<GradientStop Color="#FFDDDDDD" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ListItemSelectedHoverFill" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFEAF9FF" Offset="0"/>
<GradientStop Color="#FFC9EDFD" Offset="1"/>
</LinearGradientBrush>
<Style TargetType="ListViewItem" x:Key="checkableListViewItem">
<Setter Property="IsSelected" Value="{Binding Path=IsChecked}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border CornerRadius="2" SnapsToDevicePixels="True"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}">
<Border Name="InnerBorder" CornerRadius="1" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="11" />
<RowDefinition />
</Grid.RowDefinitions>
<Rectangle Name="UpperHighlight" Visibility="Collapsed" Fill="#75FFFFFF" />
<GridViewRowPresenter Grid.RowSpan="2"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource ListItemHoverFill}" />
<Setter Property="BorderBrush" Value="#FFCCF0FF" />
<Setter TargetName="UpperHighlight" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource ListItemSelectedFill}" />
<Setter Property="BorderBrush" Value="#FF98DDFB" />
<Setter TargetName="InnerBorder" Property="BorderBrush" Value="#80FFFFFF" />
<Setter TargetName="UpperHighlight" Property="Visibility" Value="Visible" />
<Setter TargetName="UpperHighlight" Property="Fill" Value="#40FFFFFF" />
</Trigger>
<!--<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True" />
<Condition Property="Selector.IsSelectionActive" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="{StaticResource ListItemSelectedInactiveFill}" />
<Setter Property="BorderBrush" Value="#FFCFCFCF" />
</MultiTrigger>-->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="{StaticResource ListItemSelectedHoverFill}" />
<Setter Property="BorderBrush" Value="#FF98DDFB" />
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With