代码之家 › 专栏 › 技术社区 › XFox

如何在SplitView窗格UWP中更改选择颜色?

uwp-xaml uwp xaml c#

XFox · 技术社区 · 6 年前

我需要你的帮助。我正在开发一个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>

1 回复 | 直到 6 年前

Xie Steven 6 年前

我建议你可以 ListView 控件而不是列表框。你会得到同样的效果。然后编辑 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>