CODEWITHSUNDEEP
xamlwinui-3winuiwinui-xaml
Carlos Costa
Carlos Costa

Reputation: 197

Underline for NavigationViewItems in horizontal mode too small

I am using a NavigationView in a WinUI desktop app in a Widows 10 machine. The selected underline i from the NavigationView should cover the whole text, but it doesn't. Is this a design bug, or is there some way to customize the underline?

Thanks in advance for some help.

enter image description here

Follows xaml code:


    <Grid>

        <NavigationView
            x:Name="nvSample"
            IsTitleBarAutoPaddingEnabled="False"
            AlwaysShowHeader="False"
            PaneDisplayMode="Top"
            IsBackButtonVisible="Collapsed"
            HorizontalAlignment="Stretch"
            Margin="-50,0,0,0"
            IsSettingsVisible="False">

            <NavigationView.MenuItems>

                <NavigationViewItem
                    Content="ST1"
                    Tag="Sample_Station1"/>
                <NavigationViewItem
                    Content="ST2"
                    Tag="Sample_Station2" />
                <NavigationViewItem
                    Content="ST3"
                    Tag="Sample_Station3" />

            </NavigationView.MenuItems>
            <Frame
                x:Name="contentFrame" />
        </NavigationView>
    </Grid>
</Page>

Upvotes: 1

Views: 77

Answers (1)

Andrew KeepCoding
Andrew KeepCoding

Reputation: 13666

This is by design. That underline is a Rectangle named "SelectionIndicator". You can change its Width:

private void NavigationView_Loaded(object sender, RoutedEventArgs e)
{
    if (sender is not NavigationView navigationView)
    {
        return;
    }

    foreach (var navigationViewItem in navigationView.MenuItems.OfType<NavigationViewItem>())
    {
        if (navigationViewItem.FindDescendant<Rectangle>(rectangle => rectangle.Name is "SelectionIndicator") is not Rectangle selectionIndicator)
        {
            continue;
        }

        selectionIndicator.Width = navigationViewItem.ActualWidth - 50;
    }
}

Upvotes: 0

Related Questions