如何更改拆分视图窗格 UWP 中的选择颜色？

Question

我需要你的帮助。 我正在开发一个 UWP 应用程序。现在我正在处理汉堡菜单，当我选择一个菜单项时，它标有system accent color。我想制作像this 这样的选择样式 - 靠近菜单项的一个小矩形，或者至少改变选择颜色。但不幸的是，实际上没有任何信息可以帮助我。无论是在 StackOverflow 上还是在其他地方。 所以，请帮助我。并提前感谢。 这是我的一段代码：

<SplitView Name="menu" Grid.Row="1" OpenPaneLength="250" CompactPaneLength="50" DisplayMode="CompactInline" PaneClosed="menu_PaneClosed">
        <SplitView.Pane>
            <RelativePanel>
                <ListBox>
                    <ListBoxItem Name="homeMenu" IsSelected="True">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Style="{StaticResource ItemIcon}" Text="&#xE10F;"/>
                            <TextBlock Style="{StaticResource MenuItem}" Text="Home"/>
                        </StackPanel>
                    </ListBoxItem>
                    <ListBoxItem Name="gamingMenu">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Style="{StaticResource ItemIcon}" Text="&#xE7FC;"/>
                            <TextBlock Style="{StaticResource MenuItem}"  Text="Gaming"/>
                        </StackPanel>
                    </ListBoxItem>
                    <ListBoxItem Name="historyMenu">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Style="{StaticResource ItemIcon}" Text="&#xE81C;"/>
                            <TextBlock Style="{StaticResource MenuItem}"  Text="History"/>
                        </StackPanel>
                    </ListBoxItem>
                    <ListBoxItem Name="likedMenu">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Style="{StaticResource ItemIcon}" Text="&#xE19F;"/>
                            <TextBlock Style="{StaticResource MenuItem}"  Text="Liked videos"/>
                        </StackPanel>
                    </ListBoxItem>
                    <ListBoxItem Name="watchLaterMenu">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Style="{StaticResource ItemIcon}" Text="&#xE121;"/>
                            <TextBlock Style="{StaticResource MenuItem}"  Text="Watch later"/>
                        </StackPanel>
                    </ListBoxItem>
                </ListBox>
            </RelativePanel>
        </SplitView.Pane>
        <SplitView.Content>
            <Frame Name="content"/>
        </SplitView.Content>
    </SplitView>

Answer 1

我建议您可以使用ListView 控件而不是ListBox。你会得到同样的效果。然后编辑ListViewItem styles and templates。你可以看到里面有一个SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}"。您可以根据需要更改它。

例如，

<Page.Resources>
    <Style x:Key="ListViewItemContainerStyle1" TargetType="ListViewItem">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="Padding" Value="12,0,12,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="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter
      ContentTransitions="{TemplateBinding ContentTransitions}"
      SelectionCheckMarkVisualEnabled="True"
      CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
      CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
      DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
      DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
      FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
      FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
      PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
      PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
      PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
      SelectedBackground="Red"
      SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
      SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}"
      PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
      SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
      DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
      DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
      ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
      ContentMargin="{TemplateBinding Padding}"
      CheckMode="Inline"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<SplitView Name="menu" Grid.Row="1" OpenPaneLength="250" CompactPaneLength="50" DisplayMode="CompactInline">
    <SplitView.Pane>
        <RelativePanel>
            <ListView ItemContainerStyle="{StaticResource ListViewItemContainerStyle1}">
                <ListViewItem  Name="homeMenu">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock  Text="&#xE10F;"/>
                        <TextBlock Text="Home"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem Name="gamingMenu">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock  Text="&#xE7FC;"/>
                        <TextBlock  Text="Gaming"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem Name="historyMenu">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock  Text="&#xE81C;"/>
                        <TextBlock   Text="History"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem Name="likedMenu">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock  Text="&#xE19F;"/>
                        <TextBlock   Text="Liked videos"/>
                    </StackPanel>
                </ListViewItem>
                <ListViewItem Name="watchLaterMenu">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock  Text="&#xE121;"/>
                        <TextBlock   Text="Watch later"/>
                    </StackPanel>
                </ListViewItem>
            </ListView>
        </RelativePanel>
    </SplitView.Pane>
    <SplitView.Content>
        <Frame Name="content"/>
    </SplitView.Content>
</SplitView>