[英]UWP unfocused VisualState overriding selected VisualState on ListViewItem
我有一個 ListView 在其 ItemContainerStyle 屬性上使用自定義樣式。
問題是,當我使用鍵盤瀏覽列表中的項目時,如果我導航到當前選定的項目,它會獲得焦點樣式(這很好),但是當我離開該項目時它開始使用未聚焦的樣式而不是選定的樣式。
例如,假設在 ListView 中選擇了 5 個項目中的第 3 個項目。 在列表獲得焦點之前它看起來像這樣,這是正確的:
然后我使用我的鍵盤導航到列表,它將“聚焦”樣式應用於所選項目,這很好......
但隨后我按向下箭頭鍵向下導航,突然第三項看起來不再“選中”。 看起來它只是一個普通的未選中項:
發生這種情況是因為“未聚焦” state 覆蓋了第三項的“選定”視覺 state,但我希望它是相反的。
注意:我在 ListView 上有 SingleSelectionFollowsFocus="False"。
如果我刪除“未選擇的”state,然后將焦點從第三個項目移開,我導航的任何項目看起來就像它當前正在獲得焦點 state ...如果我能弄清楚為什么會發生這種情況,那么我可以安全地刪除“未選擇” state,它會正常工作。
取消對焦后如何保留所選項目的“選定”視覺state?
這是我的代碼:
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>
自定義樣式:
<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>
取消對焦后如何保留所選項目的“選定”視覺state?
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 . 首先判斷失去焦點的項目是否被選中,如果是,則可以觸發“選中”state。 例如:
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);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.