-
-
Notifications
You must be signed in to change notification settings - Fork 897
Description
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)
- Download and install the official WPF-UI from Microsoft Store https://apps.microsoft.com/detail/9n9lkv8r9vgm?cid=windows-lp-hero&hl=en-US&gl=CH
- Run WPF UI, click on the PaneToggle button
- 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
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>
`