(Since there's a limit in the number of characters per answer...)
Regarding to the errors or exceptions you get when you bring the Style
s 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>