Skip to content

PaneToggle button "Jump" #1549

@Zhang3h

Description

@Zhang3h

Describe the bug

When clicking on the Pane Toggle button, the whole content of the NavigationView moves upwards for several pixels.
I can observer the same behavior in the official downloaded version from Microsoft Store, is it expected?
From my point view as an normal user, I feel this a little bite wired, the menu should not move when we click on the pane button.

To Reproduce

Two possibilities:
1)

  • Create a .Net 8 WPF application under Visual Studio 2022
  • Use this nuget
  • Add necessary configuration in App.xaml and add a NavigatonView in the MainWindow
  • Build and run the applicaton

Expected behavior

The Navigation View should not move when clicking on PaneToggle button

Screenshots

Image

OS version

Windows 11

.NET version

.Net 8

WPF-UI NuGet version

Latest

Additional context

This is my MainWindows.xaml
`<ui:FluentWindow x:Class="WpfUiSample.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ui="clr-namespace:Wpf.Ui.Controls;assembly=Wpf.Ui"
xmlns:pages="clr-namespace:WpfUiSample.Views.Pages"
Title="My super App"
Height="450"
Width="800"
ResizeMode="CanResize"
WindowStartupLocation="CenterScreen"
ExtendsContentIntoTitleBar="True"
Background="{DynamicResource ApplicationBackgroundBrush}">

<Grid Background="{DynamicResource ApplicationBackgroundBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- Title bar: build the left side with Header so we can put the toggle
         immediately to the RIGHT of the title text. We intentionally do NOT
         set TitleBar.Title to avoid duplicate text. -->
    <ui:TitleBar Grid.Row="0"
                 ShowMinimize="True"
                 ShowMaximize="True"
                 ShowClose="True"
                 CanMaximize="True">

        <ui:TitleBar.Header>
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                <!-- Title text -->
                <TextBlock VerticalAlignment="Center"
                           Margin="10 0 0 0"
                           Foreground="{DynamicResource TextFillColorPrimaryBrush}"
                           Text="{Binding RelativeSource={RelativeSource AncestorType=ui:FluentWindow}, Path=Title}" />

                <!-- Toggle placed immediately to the RIGHT of the title -->
                <ui:ToggleSwitch x:Name="ThemeToggle"
                                 Margin="12,0,0,0"
                                 ToolTip="Dark mode"
                                 Checked="ThemeToggle_OnChecked"
                                 Unchecked="ThemeToggle_OnUnchecked"/>
            </StackPanel>
        </ui:TitleBar.Header>
    </ui:TitleBar>

        <!-- Navigation area -->
    <ui:NavigationView x:Name="RootNavigation"
                       Grid.Row="1"
                       Background="{DynamicResource ApplicationBackgroundBrush}"
                       Foreground="{DynamicResource TextFillColorPrimaryBrush}"
                       IsBackButtonVisible="Collapsed"
                       IsPaneToggleVisible="True">

        <ui:NavigationView.Resources>
            <Style TargetType="ui:NavigationViewItem">
                <Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
            </Style>
            <Style TargetType="ui:SymbolIcon">
                <Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
            </Style>
        </ui:NavigationView.Resources>

        <ui:NavigationView.ContentOverlay>
            <Border Height="8" Background="Transparent"/>
        </ui:NavigationView.ContentOverlay>

        <ui:NavigationView.Header>
            <Border Height="8" Background="Transparent"/>
        </ui:NavigationView.Header>

        <ui:NavigationView.MenuItems>
            <ui:NavigationViewItem Content="Jobs"
                                   TargetPageType="{x:Type pages:DashboardPage}">
                <ui:NavigationViewItem.Icon>
                    <ui:SymbolIcon Symbol="TaskListLtr20" />
                </ui:NavigationViewItem.Icon>
            </ui:NavigationViewItem>

            <ui:NavigationViewItem Content="Services"
                                   TargetPageType="{x:Type pages:SettingsPage}">
                <ui:NavigationViewItem.Icon>
                    <ui:SymbolIcon Symbol="RectangleLandscape20" />
                </ui:NavigationViewItem.Icon>
            </ui:NavigationViewItem>

            <ui:NavigationViewItem Content="Printers"
                                   TargetPageType="{x:Type pages:DashboardPage}">
                <ui:NavigationViewItem.Icon>
                    <ui:SymbolIcon Symbol="Print20" />
                </ui:NavigationViewItem.Icon>
            </ui:NavigationViewItem>

            <ui:NavigationViewItem Content="Hot Folders"
                                   TargetPageType="{x:Type pages:DashboardPage}">
                <ui:NavigationViewItem.Icon>
                    <ui:SymbolIcon Symbol="Fire20" />
                </ui:NavigationViewItem.Icon>
            </ui:NavigationViewItem>
        </ui:NavigationView.MenuItems>
    </ui:NavigationView>
</Grid>

</ui:FluentWindow>
`

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions