0

I 'm trying to set the style of a 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 works, as long as the mouse pointer is not over the item. If it is, it is still using the default one.

I tried this answer and also loaded the generic.xaml from this answer but the application throws an exception when the pointer is over the item then.

Michael Chourdakis
  • 10,345
  • 3
  • 42
  • 78

2 Answers2

1

The NavigationViewItemPresenter inside the NavigationViewItem has these pointer (mouse) related VisualStates:

  • Normal
  • PointerOver
  • Pressed
  • Selected
  • PointerOverSelected
  • PressedSelected

Each VisualState changes some properties including the Foreground and the Background. Also, each VisualState is applied automatically by the control itself.

Your code just changes the Foreground and Background of the Normal VisualState. That's why you get different results when you place your mouse (pointer) over the control.

In order to meet your requirements, you need to bring the entire Style for NavigationViewItem and NavigationViewItemPresenter and edit the VisualStates.

Andrew KeepCoding
  • 7,040
  • 2
  • 14
  • 21
1

(Since there's a limit in the number of characters per answer...)

Regarding to the errors or exceptions you get when you bring the Styles from the generic.xaml, my first guess is that you are facing problems with namespaces.

In this case, you need to remove namespaces like controls:, primitives and animatedvisuals:.

The code below is from a sample app I created to verify my answer, so this should work. It's just commenting out the changes in the PointerOver VisualState.

<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>
Andrew KeepCoding
  • 7,040
  • 2
  • 14
  • 21