XAML WinUI3 NavigationItem样式

mkh04yzy  于 2023-05-11  发布在  其他
关注(0)|答案(2)|浏览(261)

我正在尝试设置NavigationItem的样式。

<NavigationView.Resources>
                <Style TargetType="NavigationViewItem" x:Key="sx1">
                    <Setter Property="Background" Value="{ThemeResource AccentTextFillColorPrimaryBrush}"/>
                    <Setter Property="Foreground" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}"/>
                </Style>
</NavigationView.Resources>

只要鼠标指针不在项目上,这就可以工作。如果是,则仍在使用默认值。
我尝试了this answer,也从this answer加载了generic.xaml,但是当指针在该项上时,应用程序抛出异常。

tf7tbtn2

tf7tbtn21#

NavigationViewItem中的NavigationViewItemPresenter具有以下与VisualState相关的指针(鼠标):

  • 正常
  • PointerOver
  • 按下
  • 已选定
  • PointerOverSelected
  • 按下选定

每个VisualState都会更改一些属性,包括ForegroundBackground。此外,每个VisualState都是由控件本身自动应用的。
您的代码只是更改了 NormalVisualStateForegroundBackground。这就是为什么当您将鼠标(指针)放在控件上时会得到不同的结果。
为了满足您的要求,您需要为NavigationViewItemNavigationViewItemPresenter带来整个Style,并编辑VisualStates

33qvvth1

33qvvth12#

(由于每个答案的字符数有限制...)
关于从generic.xaml中引入Style时出现的错误或异常,我的第一个猜测是名称空间有问题。
在这种情况下,您需要删除名称空间,如 controls:primitivesanimatedvisuals:
下面的代码来自我创建的一个示例应用程序,用于验证我的答案,所以这应该可以工作。它只是注解了 PointerOverVisualState中的更改。

<Style TargetType="NavigationViewItem">
    <!--
    <Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
    <Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
    -->
    <Setter Property="Background" Value="{ThemeResource AccentTextFillColorPrimaryBrush}"/>
    <Setter Property="Foreground" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}"/>

    <Setter Property="BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrush}" />
    <Setter Property="BorderThickness" Value="{StaticResource NavigationViewItemBorderThickness}" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Margin" Value="{ThemeResource NavigationViewItemMargin}" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="TabNavigation" Value="Once" />
    <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="NavigationViewItem">
                <Grid x:Name="NVIRootGrid">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <NavigationViewItemPresenter
                        x:Name="NavigationViewItemPresenter"
                        Padding="{TemplateBinding Padding}"
                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        Control.IsTemplateFocusTarget="True"
                        CornerRadius="{TemplateBinding CornerRadius}"
                        Foreground="{TemplateBinding Foreground}"
                        Icon="{TemplateBinding Icon}"
                        InfoBadge="{TemplateBinding InfoBadge}"
                        IsTabStop="false"
                        UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}" />
                    <ItemsRepeater
                        x:Name="NavigationViewItemMenuItemsHost"
                        Grid.Row="1"
                        x:Load="False"
                        Visibility="Collapsed">
                        <ItemsRepeater.Layout>
                            <StackLayout Orientation="Vertical" />
                        </ItemsRepeater.Layout>
                    </ItemsRepeater>
                    <FlyoutBase.AttachedFlyout>
                        <Flyout
                            x:Name="ChildrenFlyout"
                            Placement="RightEdgeAlignedTop">
                            <Flyout.FlyoutPresenterStyle>
                                <Style TargetType="FlyoutPresenter">
                                    <Setter Property="Padding" Value="{ThemeResource NavigationViewItemChildrenMenuFlyoutPadding}" />
                                    <Setter Property="Margin" Value="0,-4,0,0" />
                                    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
                                    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
                                    <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
                                    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
                                    <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
                                    <Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="FlyoutPresenter">
                                                <ScrollViewer
                                                    x:Name="ScrollViewer"
                                                    AutomationProperties.AccessibilityView="Raw"
                                                    HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                                    HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                                    VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                                    VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                                    ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                                                    <ContentPresenter
                                                        x:Name="ContentPresenter"
                                                        Padding="{TemplateBinding Padding}"
                                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                        Background="{TemplateBinding Background}"
                                                        BorderBrush="{TemplateBinding BorderBrush}"
                                                        BorderThickness="{TemplateBinding BorderThickness}"
                                                        Content="{TemplateBinding Content}"
                                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                                        ContentTransitions="{TemplateBinding ContentTransitions}"
                                                        CornerRadius="{TemplateBinding CornerRadius}" />
                                                </ScrollViewer>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </Flyout.FlyoutPresenterStyle>
                            <Grid x:Name="FlyoutRootGrid">
                                <Grid x:Name="FlyoutContentGrid" />

                            </Grid>
                        </Flyout>
                    </FlyoutBase.AttachedFlyout>

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ItemOnNavigationViewListPositionStates">
                            <VisualState x:Name="OnLeftNavigation">
                                <VisualState.Setters>
                                    <Setter Target="NavigationViewItemPresenter.Style" Value="{StaticResource MUX_NavigationViewItemPresenterStyleWhenOnLeftPane}" />

                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="OnTopNavigationPrimary">
                                <VisualState.Setters>
                                    <Setter Target="NavigationViewItemPresenter.Margin" Value="{ThemeResource TopNavigationViewItemMargin}" />
                                    <Setter Target="NavigationViewItemPresenter.Style" Value="{StaticResource MUX_NavigationViewItemPresenterStyleWhenOnTopPane}" />
                                    <Setter Target="ChildrenFlyout.Placement" Value="BottomEdgeAlignedLeft" />

                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="OnTopNavigationOverflow">
                                <VisualState.Setters>
                                    <Setter Target="NavigationViewItemPresenter.Style" Value="{StaticResource MUX_NavigationViewItemPresenterStyleWhenOnTopPaneOverflow}" />

                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>
                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style
    x:Key="MUX_NavigationViewItemPresenterStyleWhenOnLeftPane"
    TargetType="NavigationViewItemPresenter">
    <Setter Property="Foreground" Value="{ThemeResource TopNavigationViewItemForeground}" />
    <Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
    <Setter Property="BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrush}" />
    <Setter Property="BorderThickness" Value="{StaticResource NavigationViewItemBorderThickness}" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="NavigationViewItemPresenter">
                <Grid
                    x:Name="LayoutRoot"
                    MinHeight="{ThemeResource NavigationViewItemOnLeftMinHeight}"
                    Margin="{ThemeResource NavigationViewItemButtonMargin}"
                    Background="{TemplateBinding Background}"
                    Control.IsTemplateFocusTarget="True"
                    CornerRadius="{TemplateBinding CornerRadius}">
                    <Grid.Resources />
                    <Grid x:Name="PresenterContentRootGrid">
                        <!--  Wrap SelectionIndicator in a grid so that its offset is 0,0 - this enables the offset animation.  -->
                        <Grid
                            HorizontalAlignment="Left"
                            VerticalAlignment="Center">
                            <Rectangle
                                x:Name="SelectionIndicator"
                                Width="{ThemeResource NavigationViewSelectionIndicatorWidth}"
                                Height="{ThemeResource NavigationViewSelectionIndicatorHeight}"
                                Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}"
                                Opacity="0.0"
                                RadiusX="{ThemeResource NavigationViewSelectionIndicatorRadius}"
                                RadiusY="{ThemeResource NavigationViewSelectionIndicatorRadius}" />
                        </Grid>
                        <Grid
                            x:Name="ContentGrid"
                            MinHeight="{ThemeResource NavigationViewItemOnLeftMinHeight}"
                            Margin="0,0,14,0"
                            HorizontalAlignment="Stretch">

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Border
                                x:Name="IconColumn"
                                Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SmallerIconWidth}">
                                <Viewbox
                                    x:Name="IconBox"
                                    Height="{ThemeResource NavigationViewItemOnLeftIconBoxHeight}"
                                    Margin="{ThemeResource NavigationViewItemOnLeftIconBoxMargin}"
                                    HorizontalAlignment="Center">
                                    <ContentPresenter
                                        xmlns:local="using:Microsoft.UI.Xaml.Controls"
                                        x:Name="Icon"
                                        local:AnimatedIcon.State="Normal"
                                        Content="{TemplateBinding Icon}"
                                        Foreground="{TemplateBinding Foreground}" />
                                </Viewbox>
                            </Border>
                            <ContentPresenter
                                x:Name="ContentPresenter"
                                Grid.Column="1"
                                Margin="{ThemeResource NavigationViewItemContentPresenterMargin}"
                                Padding="{TemplateBinding Padding}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                AutomationProperties.AccessibilityView="Raw"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                Foreground="{TemplateBinding Foreground}" />
                            <Grid
                                xmlns:local="using:Microsoft.UI.Xaml.Controls"
                                x:Name="ExpandCollapseChevron"
                                Grid.Column="3"
                                Width="40"
                                Margin="{ThemeResource NavigationViewItemExpandChevronMargin}"
                                HorizontalAlignment="Right"
                                local:AnimatedIcon.State="NormalOff"
                                x:Load="False"
                                Background="Transparent"
                                Visibility="Collapsed">
                                <AnimatedIcon
                                    x:Name="ExpandCollapseChevronIcon"
                                    Width="12"
                                    Height="12"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    x:DeferLoadStrategy="Lazy"
                                    AutomationProperties.AccessibilityView="Raw"
                                    RenderTransformOrigin="0.5, 0.5"
                                    Visibility="Collapsed">
                                    <animatedvisuals:AnimatedChevronUpDownSmallVisualSource />
                                    <AnimatedIcon.FallbackIconSource>
                                        <FontIconSource
                                            FontFamily="{StaticResource SymbolThemeFontFamily}"
                                            FontSize="{ThemeResource NavigationViewItemExpandedGlyphFontSize}"
                                            Foreground="{ThemeResource NavigationViewItemForeground}"
                                            Glyph="{StaticResource NavigationViewItemExpandedGlyph}" />
                                    </AnimatedIcon.FallbackIconSource>
                                    <AnimatedIcon.RenderTransform />
                                </AnimatedIcon>

                            </Grid>
                            <ContentPresenter
                                x:Name="InfoBadgePresenter"
                                Grid.Column="2"
                                VerticalAlignment="Center"
                                Content="{TemplateBinding InfoBadge}" />
                        </Grid>

                    </Grid>

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="PointerStates">
                            <VisualState x:Name="Normal" />

                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <!--
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPointerOver}" />
                                    <Setter Target="Icon.Foreground" Value="{ThemeResource NavigationViewItemForegroundPointerOver}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPointerOver}" />
                                    -->
                                    <Setter Target="Icon.(AnimatedIcon.State)" Value="PointerOver" />

                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPressed}" />
                                    <Setter Target="Icon.Foreground" Value="{ThemeResource NavigationViewItemForegroundPressed}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPressed}" />
                                    <Setter Target="Icon.(AnimatedIcon.State)" Value="Pressed" />

                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelected}" />
                                    <Setter Target="Icon.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelected}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelected}" />

                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="PointerOverSelected">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPointerOver}" />
                                    <Setter Target="Icon.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPointerOver}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPointerOver}" />
                                    <Setter Target="Icon.(AnimatedIcon.State)" Value="PointerOver" />

                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="PressedSelected">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPressed}" />
                                    <Setter Target="Icon.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPressed}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPressed}" />
                                    <Setter Target="Icon.(AnimatedIcon.State)" Value="Pressed" />

                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="DisabledStates">
                            <VisualState x:Name="Enabled" />

                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.Opacity" Value="{ThemeResource ListViewItemDisabledThemeOpacity}" />

                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>
                        <VisualStateGroup x:Name="IconStates">
                            <VisualState x:Name="IconVisible" />
                            <VisualState x:Name="IconCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="IconBox.Visibility" Value="Collapsed" />
                                    <Setter Target="IconColumn.Width" Value="8" />

                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>
                        <VisualStateGroup x:Name="InfoBadgeStates">
                            <VisualState x:Name="InfoBadgeVisible" />
                            <VisualState x:Name="InfoBadgeCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="InfoBadgePresenter.Visibility" Value="Collapsed" />

                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ChevronStates">
                            <VisualState x:Name="ChevronHidden" />
                            <VisualState x:Name="ChevronVisibleOpen">
                                <VisualState.Setters>
                                    <Setter Target="ExpandCollapseChevron.Visibility" Value="Visible" />
                                    <Setter Target="ExpandCollapseChevronIcon.Visibility" Value="Visible" />

                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="ChevronVisibleClosed">
                                <VisualState.Setters>
                                    <Setter Target="ExpandCollapseChevron.Visibility" Value="Visible" />
                                    <Setter Target="ExpandCollapseChevronIcon.Visibility" Value="Visible" />

                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>
                        <VisualStateGroup x:Name="PointerChevronStates">
                            <VisualState x:Name="NormalChevronHidden" />
                            <VisualState x:Name="NormalChevronVisibleOpen">
                                <VisualState.Setters>
                                    <Setter Target="ExpandCollapseChevron.(AnimatedIcon.State)" Value="NormalOn" />

                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="NormalChevronVisibleClosed">
                                <VisualState.Setters>
                                    <Setter Target="ExpandCollapseChevron.(AnimatedIcon.State)" Value="NormalOff" />

                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PointerOverChevronHidden">
                                <VisualState.Setters>
                                    <Setter Target="ExpandCollapseChevron.(AnimatedIcon.State)" Value="PointerOverOff" />

                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PointerOverChevronVisibleOpen">
                                <VisualState.Setters>
                                    <Setter Target="ExpandCollapseChevronIcon.Foreground" Value="{ThemeResource NavigationViewItemForegroundPointerOver}" />
                                    <Setter Target="ExpandCollapseChevron.(AnimatedIcon.State)" Value="PointerOverOn" />

                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PointerOverChevronVisibleClosed">
                                <VisualState.Setters>
                                    <Setter Target="ExpandCollapseChevronIcon.Foreground" Value="{ThemeResource NavigationViewItemForegroundPointerOver}" />
                                    <Setter Target="ExpandCollapseChevron.(AnimatedIcon.State)" Value="PointerOverOff" />

                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PressedChevronHidden">
                                <VisualState.Setters>
                                    <Setter Target="ExpandCollapseChevron.(AnimatedIcon.State)" Value="PressedOff" />

                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PressedChevronVisibleOpen">
                                <VisualState.Setters>
                                    <Setter Target="ExpandCollapseChevronIcon.Foreground" Value="{ThemeResource NavigationViewItemForegroundPressed}" />
                                    <Setter Target="ExpandCollapseChevron.(AnimatedIcon.State)" Value="PressedOn" />

                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="PressedChevronVisibleClosed">
                                <VisualState.Setters>
                                    <Setter Target="ExpandCollapseChevronIcon.Foreground" Value="{ThemeResource NavigationViewItemForegroundPressed}" />
                                    <Setter Target="ExpandCollapseChevron.(AnimatedIcon.State)" Value="PressedOff" />

                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>
                        <VisualStateGroup x:Name="PaneAndTopLevelItemStates">
                            <VisualState x:Name="NotClosedCompactAndTopLevelItem" />
                            <VisualState x:Name="ClosedCompactAndTopLevelItem">
                                <VisualState.Setters>
                                    <Setter Target="ContentPresenter.Margin" Value="{ThemeResource NavigationViewCompactItemContentPresenterMargin}" />
                                    <Setter Target="ContentGrid.Margin" Value="0,0,0,0" />
                                    <Setter Target="InfoBadgePresenter.(Grid.Column)" Value="0" />
                                    <Setter Target="InfoBadgePresenter.(Grid.ColumnSpan)" Value="4" />
                                    <Setter Target="InfoBadgePresenter.VerticalAlignment" Value="Top" />
                                    <Setter Target="InfoBadgePresenter.HorizontalAlignment" Value="Right" />
                                    <Setter Target="InfoBadgePresenter.Margin" Value="0,2,2,0" />

                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>
                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

相关问题