A community member has associated this post with a similar question:
Navigation page doesn't highlight the selected page

Only moderators can edit this content.

Page problem with navigationView

Eduardo Gomez 3,671 Reputation points
2025-04-27T18:00:07.9366667+00:00

I am using a NavigatonView

<winex:WindowEx
    x:Class="HorizonHub.View.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:local="using:HorizonHub.View"
    xmlns:winex="using:WinUIEx"
    Title="MainWindow">

    <NavigationView
        x:Name="rootContainer"
        Margin="0,50,0,0"
        IsBackButtonVisible="Collapsed"
        IsPaneToggleButtonVisible="False"
        IsSettingsVisible="False"
        PaneDisplayMode="Left">
        <Interactivity:Interaction.Behaviors>
            <Interactivity:EventTriggerBehavior EventName="SelectionChanged">
                <Interactivity:InvokeCommandAction Command="{x:Bind MainWindowModel.NavigateCommand}" />
            </Interactivity:EventTriggerBehavior>
        </Interactivity:Interaction.Behaviors>

        <!--  Avatar & Dropdown at the TOP  -->
        <NavigationView.PaneCustomContent>
            <StackPanel
                Margin="10,0,0,5"
                Orientation="Horizontal">
                <Button
                    Background="Transparent"
                    BorderBrush="Transparent"
                    FocusVisualPrimaryBrush="Transparent"
                    FocusVisualSecondaryBrush="Transparent">
                    <Button.Style>
                        <Style TargetType="Button">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Button">
                                        <ContentPresenter />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Button.Style>
                    <Button.Flyout>
                        <Flyout
                            x:Name="OptionsMenu"
                            Placement="Bottom">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock
                                    Margin="0,0,0,4"
                                    VerticalAlignment="Center"
                                    Text="Compact Mode" />
                                <ToggleSwitch
                                    Margin="10,0,0,0"
                                    IsOn="{Binding IsCompactModeEnabled, Mode=TwoWay}" />
                            </StackPanel>
                        </Flyout>
                    </Button.Flyout>

                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="28" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Image
                            Width="28"
                            Height="28"
                            Source="/AppIcon.ico" />
                        <TextBlock
                            Grid.Column="1"
                            Margin="10,0,0,0"
                            VerticalAlignment="Center"
                            Text="Options" />
                    </Grid>
                </Button>
            </StackPanel>
        </NavigationView.PaneCustomContent>

        <NavigationView.MenuItems>
            <NavigationViewItem
                Content="Calendar"
                Icon="Calendar"
                Tag="CalendarPage" />
            <NavigationViewItem
                Content="Account"
                Icon="People"
                Tag="AccountPage" />
            <NavigationViewItem
                Content="About"
                Icon="Help"
                Tag="AboutPage" />
        </NavigationView.MenuItems>
        <ContentControl
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Content="{Binding CurrentPage}" />
    </NavigationView>

</winex:WindowEx>


The first page is Calendar page

<Page
    x:Class="HorizonHub.View.CalendarPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:HorizonHub.View"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">

    <Grid Background="Red">
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            FontSize="24"
            Foreground="White"
            Text="Calendar Page" />
    </Grid>
</Page>

the problem is that I don't see the red grid to fill all the area

User's image

I need to have the control to position the items

Windows development | Windows App SDK
0 comments No comments
{count} votes