簡體   English   中英

UWP 未聚焦的 VisualState 覆蓋 ListViewItem 上選定的 VisualState

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM