UWP unfocused VisualState overriding selected VisualState on ListViewItem
I have a ListView that is using a custom style on its ItemContainerStyle property.
The problem is that when I use a keyboard to navigate through the items in the list, if I navigate to the currently-selected item, it gets the focused style (which is good), but then the moment I navigate away from that item it starts using the unfocused style instead of the selected style.
For example, let's say item 3 out of 5 is selected in the ListView. It'll look like this before the list gets focus, which is correct:
Then I use my keyboard to navigate to the list, which applies the "focused" style to the selected item, which is fine...
But then I navigate down by pressing the down arrow key, and suddenly the third item is no longer looks "selected." It looks like it's just a normal unselected item:
This is happening because the "unfocused" state is overriding the "selected" visual state of the third item, but I want it to be the other way around.
Note: I have SingleSelectionFollowsFocus="False" on the ListView.
If I remove the "unselected" state, then moving the focus from the third item makes any item that I navigate to look like it's currently getting the focused state... if I could figure out why this is happening, then I could safely remove the "unselected" state, and it would work fine.
How can I retain the "selected" visual state of the selected item after unfocusing it?
Here's my code:
XAML:
<ListView x:Name="ThingieListView"
ItemsSource="{x:Bind viewModel.ThingieDataList}"
SingleSelectionFollowsFocus="False"
SelectionMode="Single"
IsItemClickEnabled="True"
XYFocusRight="{x:Bind LocationListView}"
Margin="8"
Width="256"
IsTabStop="True"
TabIndex="0"
LostFocus="ThingieListView_LostFocus"
GotFocus="ThingieListView_GotFocus"
ItemClick="ThingieListView_OnItemClick"
ItemContainerStyle="{StaticResource SelectThingieItemStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<ListViewItem Content="{Binding DisplayValue}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Custom Style:
<Style x:Key="SelectThingieItemStyle" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{StaticResource Res-FontFamily}"/>
<Setter Property="FontSize" Value="{StaticResource FontSizeText2}"/>
<Setter Property="Background" Value="{ThemeResource ListViewItemBackground}"/>
<Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Padding" Value="0,0,0,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="AllowDrop" Value="False"/>
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
<Setter Property="FocusVisualMargin" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter x:Name="Root"
CheckBrush="{ThemeResource ListViewItemCheckBrush}"
ContentMargin="15"
Height="63"
Margin="0 0 0 1"
CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
ContentTransitions="{TemplateBinding ContentTransitions}"
CheckMode="{ThemeResource ListViewItemCheckMode}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackground}"
DragForeground="{ThemeResource ListViewItemDragForeground}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
FocusVisualPrimaryThickness="0"
FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Control.IsTemplateFocusTarget="True"
PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}"
RevealBackground="{ThemeResource ListViewItemRevealBackground}"
SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}"
SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Target="Root.Foreground" Value="{StaticResource Res-White}"/>
<Setter Target="Root.RevealBackground" Value="{StaticResource Res-Gray_2}"/>
<Setter Target="Root.RevealBorderBrush" Value="{StaticResource Res-Gray_1}"/>
<Setter Target="Root.RevealBorderThickness" Value="0"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Target="Root.Foreground" Value="{StaticResource Res-White}"/>
<Setter Target="Root.RevealBorderBrush" Value="{StaticResource Res-Black}"/>
<Setter Target="Root.FontWeight" Value="Bold"/>
<Setter Target="Root.RevealBorderThickness" Value="0"/>
<Setter Target="Root.RevealBackground" Value="{StaticResource Res-Gray_4}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="Root.RevealBackground" Value="{StaticResource Res-Gray_2}"/>
<Setter Target="Root.RevealBorderThickness" Value="3"/>
<Setter Target="Root.Foreground" Value="{StaticResource Res-White}"/>
<Setter Target="Root.RevealBorderBrush" Value="{StaticResource Res-Orange}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOverSelected">
<VisualState.Setters>
<Setter Target="Root.RevealBackground" Value="{StaticResource Res-Gray_4}"/>
<Setter Target="Root.RevealBorderThickness" Value="3"/>
<Setter Target="Root.Foreground" Value="{StaticResource Res-White}"/>
<Setter Target="Root.RevealBorderBrush" Value="{StaticResource Res-Orange}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOverPressed">
<VisualState.Setters>
<Setter Target="Root.RevealBackground" Value="{StaticResource Res-Gray_2}"/>
<Setter Target="Root.RevealBorderThickness" Value="3"/>
<Setter Target="Root.Foreground" Value="{StaticResource Res-Black}"/>
<Setter Target="Root.RevealBorderBrush" Value="{StaticResource Res-Orange}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="Root.RevealBorderThickness" Value="3"/>
<Setter Target="Root.RevealBorderBrush" Value="{StaticResource Res-Orange}"/>
<Setter Target="Root.FontWeight" Value="Bold"/>
<Setter Target="Root.Foreground" Value="{StaticResource Res-White}"/>
<Setter Target="Root.RevealBackground" Value="{StaticResource Res-Orange}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PressedSelected">
<VisualState.Setters>
<Setter Target="Root.RevealBorderThickness" Value="3"/>
<Setter Target="Root.RevealBorderBrush" Value="{StaticResource Res-Orange}"/>
<Setter Target="Root.FontWeight" Value="Bold"/>
<Setter Target="Root.Foreground" Value="{StaticResource Res-White}"/>
<Setter Target="Root.RevealBackground" Value="{StaticResource Res-Orange}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusedStates">
<VisualState x:Name="Focused">
<VisualState.Setters>
<Setter Target="Root.FontWeight" Value="Bold"/>
<Setter Target="Root.Foreground" Value="{StaticResource Res-Black}"/>
<Setter Target="Root.RevealBackground" Value="{StaticResource Res-White}"/>
<Setter Target="Root.RevealBorderThickness" Value="0 0 20 0"/>
<Setter Target="Root.RevealBorderBrush" Value="{StaticResource Res-Orange}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unfocused">
<VisualState.Setters>
<Setter Target="Root.Foreground" Value="{StaticResource Res-White}"/>
<Setter Target="Root.RevealBackground" Value="{StaticResource Res-Gray_2}"/>
<Setter Target="Root.RevealBorderBrush" Value="{StaticResource Res-Gray_1}"/>
<Setter Target="Root.RevealBorderThickness" Value="0 1 0 1"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled"/>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="Root.RevealBorderThickness" Value="0"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ListViewItemPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Solution
How can I retain the "selected" visual state of the selected item after unfocusing it?
As you mentioned, the "unfocused" state will override the "selected" state, if you want to display the "selected" state, you could try to trigger the "selected" visual state manually when the selected item loses focus in the VesselListView_LostFocus event. First determine if the item that loses focus is selected, if it is, you could trigger the "selected" state. For example:
private void VesselListView_LostFocus(object sender, RoutedEventArgs e)
{
ListViewItem litem = e.OriginalSource as ListViewItem;
if (litem != null && litem.IsSelected == true)
{
VisualStateManager.GoToState(litem, "Selected", false);
}
}
- WPF carousel / rotating elements
- TextBox is Focused, but Can't Type Until I Click - XAML/C#/WPF
- WPF ComboBox with CheckBoxes - Wrong header text binded
- XAML Columndefinitions width * not taking available space
- Coloring Gridlines in WPF Datagrid
- A value of type '...' cannot be added to a collection or dictionary of type 'UIElementCollection'
- View element accessed in code-behind is null when it should be initialized - why?
- iOS Display is different from Android .Net MAUI Telerik
- ContentTemplate is not applied for RadioButton
- Show XAML on Condition
- WPF DatePicker Datagrid Filter
- Avalonia DataContext is null in code behind
- .NET MAUI Full scale background image (overlay elements)
- Set style of child of TreeViewItem on mouse hover
- MAUI - unwanted button background color
- How can I achieve this particular resizing behavior?
- Image UriSource and Data Binding
- Get values from *.resx files in XAML
- My WinUI 3 app sporadically crashes after clicking a button on a user control that executes code via commands from Dependency Properties
- Maui MVVM: most simple pattern not working
- CollectionView only shows items, when I have a private or no setter in .NET MAUI
- Why is Context Menu Data Context is null on the first opening but is what is expected on the next opening in WPF?
- How are the Size and Move commands implemented in a system menu?
- Alignment of FlexLayout element and its contents
- MAUI DockLayout
- Really simple menu example?
- .net maui checkbox check mark color
- How to convert SVG image source to any IconSource in WinUI 3
- ReadOnly functionality for TexBox-like controls
- How display PDF file in WinUI 3 Desktop App