NavigationViewItem Height and Width PaneDisplayMode="Left" on Close

[NewCode82]

I would like to be able to increase the width of the NavigationView Panel and increase the height of the navigationViewItems, I am using the PanelDisplayMode="Left" property.

ui:FluentWindow x:Class="UiDesktopAppTemplate.Views.Windows.MainWindow"
                 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="clr-namespace:UiDesktopAppTemplate.Views.Windows"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
                 xmlns:pages="clr-namespace:UiDesktopAppTemplate.Views.Pages"
                 Title="{Binding ViewModel.ApplicationTitle, Mode=OneWay}"
                 Width="1100"
                 Height="650"
                 d:DataContext="{d:DesignInstance local:MainWindow, IsDesignTimeCreatable=True}"
                 d:DesignHeight="450"
                 d:DesignWidth="800"
                 ExtendsContentIntoTitleBar="True"
                 WindowBackdropType="Mica"
                 WindowCornerPreference="Round"
                 WindowStartupLocation="CenterScreen"
                 mc:Ignorable="d">

    <ui:FluentWindow.Resources>
        <SolidColorBrush x:Key="NavigationViewSelectionIndicatorForeground" Color="Lime"/>

        <Style TargetType="ui:NavigationViewItem" x:Key="CustomNavigationViewItemStyle">
            <Setter Property="FontFamily" Value="Arial"/>
            <Setter Property="FontWeight" Value="DemiBold"/>
            <Style.Triggers>
                <Trigger Property="IsActive" Value="True">
                    <Setter Property="Foreground" Value="{StaticResource NavViewItemColor}"/>
                </Trigger>
            </Style.Triggers>
        </Style>

        <Style TargetType="ui:SymbolIcon" x:Key="CustomSymbolIconStyle">
            <Setter Property="FontWeight" Value="DemiBold"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsActive, RelativeSource={RelativeSource AncestorType=ui:NavigationViewItem}}" Value="True">
                    <Setter Property="Foreground" Value="{StaticResource NavViewItemColor}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ui:FluentWindow.Resources>

    <Grid>
        <ui:TitleBar x:Name="TitleBar"
                     Title="{Binding ViewModel.ApplicationTitle}"
                     Grid.Row="0"
                     CloseWindowByDoubleClickOnIcon="True">
            <ui:TitleBar.Icon>
                <ui:ImageIcon Source="pack://application:,,,/Assets/wpfui-icon-256.png" />
            </ui:TitleBar.Icon>
        </ui:TitleBar>

        <ui:NavigationView x:Name="RootNavigation"
                           Padding="42,0,42,0"
                           BreadcrumbBar="{Binding ElementName=BreadcrumbBar}"
                           FooterMenuItemsSource="{Binding ViewModel.FooterMenuItems, Mode=OneWay}"
                           FrameMargin="0"
                           IsPaneOpen="False"
                           IsBackButtonVisible="Visible"
                           IsPaneToggleVisible="True"
                           MenuItemsSource="{Binding ViewModel.MenuItems, Mode=TwoWay}"
                           OpenPaneLength="200"
                           PaneDisplayMode="Left"
                           TitleBar="{Binding ElementName=TitleBar, Mode=OneWay}">

            <ui:NavigationView.Header>
                <ui:BreadcrumbBar x:Name="BreadcrumbBar" Margin="42,32,42,20" />
            </ui:NavigationView.Header>

            <ui:NavigationView.MenuItems>
                <ui:NavigationViewItem Tag="DashboardPage"
                                       Content="HOME"
                                       TargetPageType="{x:Type pages:DashboardPage}"
                                       Style="{StaticResource CustomNavigationViewItemStyle}">
                    <ui:NavigationViewItem.Icon>
                        <ui:SymbolIcon Symbol="Home32"
                                       Style="{StaticResource CustomSymbolIconStyle}"/>
                    </ui:NavigationViewItem.Icon>
                </ui:NavigationViewItem>
                <ui:NavigationViewItem Tag="TestPage"
                                       Content="TEST"
                                       TargetPageType="{x:Type pages:TestPage}"
                                       Style="{StaticResource CustomNavigationViewItemStyle}">
                    <ui:NavigationViewItem.Icon>
                        <ui:SymbolIcon Symbol="Accessibility32"
                                       Style="{StaticResource CustomSymbolIconStyle}"/>
                    </ui:NavigationViewItem.Icon>
                </ui:NavigationViewItem>
            </ui:NavigationView.MenuItems>

            <ui:NavigationView.ContentOverlay>
                <Grid>
                    <ui:SnackbarPresenter x:Name="SnackbarPresenter"/>
                </Grid>
            </ui:NavigationView.ContentOverlay>
        </ui:NavigationView>
    </Grid>
</ui:FluentWindow>

Do you have any suggestions...?

[solenei]

I suggest using something besides NavigationViewItem, i ran threw the code in the repository. Seems like the size of the interactable and icon are fixed. Adjustable. Simply replace them with a button or textblock. You can add the navigation in the xaml.cs on button click.

[NewCode82]

Hi solenei,
I'll do some testing, thanks for the advice