如何删除导航视图选择指示符位置

Question

Can someone suggest how to remove selection indicator from NavigationView of UWP.

Below style remove indicator but still shows empty space at the beginning of item as shown on attached screenshot.

<SolidColorBrush x:Key="NavigationViewSelectionIndicatorForeground" Color="Transparent" />

Thanks

Answer 1

How to remove navigationview selection indicator place

Derive from NavigationViewItemPresenter style you could find IconBox contain a default margin NavigationViewItemIconBoxMargin left side is 10 px. if you want to remove indicator place, please update 10 to 0 like the following.

<Thickness x:Key="NavigationViewItemIconBoxMargin">0,12,16,12</Thickness>

And please note if you want above Thickness could work, you also need to add NavigationViewItemPresenter and NavigationViewItem style in the page resource like this line .

Update for 16299

<Style TargetType="NavigationViewItem">
    <Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
    <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="Template">
        <Setter.Value>
            <ControlTemplate TargetType="NavigationViewItem">
                <Grid
                    x:Name="LayoutRoot"
                    Height="40"
                    Background="{TemplateBinding Background}"
                    Control.IsTemplateFocusTarget="True">
                    <!--  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="6"
                            Height="24"
                            Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}"
                            Opacity="0.0" />
                    </Grid>

                    <Border
                        x:Name="RevealBorder"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}" />

                    <Grid Height="40" HorizontalAlignment="Left">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="IconColumn" Width="48" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Viewbox
                            x:Name="IconBox"
                            Margin="-10,12,16,12"
                            Child="{TemplateBinding Icon}" />

                        <ContentPresenter
                            x:Name="ContentPresenter"
                            Grid.Column="1"
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            ContentTransitions="{TemplateBinding ContentTransitions}" />
                    </Grid>

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

                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPointerOver}" />
                                    <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPointerOver}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPointerOver}" />
                                </VisualState.Setters>
                            </VisualState>

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

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

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

                            <VisualState x:Name="PressedSelected">
                                <VisualState.Setters>
                                    <Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
                                    <Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPressed}" />
                                    <Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelectedPressed}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPressed}" />
                                </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="PaneStates">
                            <VisualState x:Name="NotClosedCompact" />
                            <VisualState x:Name="ClosedCompact">
                                <VisualState.Setters>
                                    <Setter Target="RevealBorder.HorizontalAlignment" Value="Left" />
                                    <Setter Target="RevealBorder.Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CompactPaneLength}" />
                                </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="16" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>