Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[UX] Titlebar improvements #1293

Merged
merged 3 commits into from
Jun 7, 2023
Merged

[UX] Titlebar improvements #1293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0708f9d
Fixing titlebar on Top mode
niels9001 May 16, 2023
c5fa04e
Removing unused code
niels9001 May 16, 2023
17de6a9
Handling activation title updates
niels9001 May 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
25 changes: 9 additions & 16 deletions WinUIGallery/Helper/NavigationOrientationHelper.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.ApplicationModel.Core;
using Windows.Storage;
using Microsoft.UI;
using Microsoft.UI.Windowing;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Windows.Storage;


namespace AppUIBasics.Helper
Expand Down Expand Up @@ -38,26 +31,26 @@ public static bool IsLeftMode()

public static void IsLeftModeForElement(bool isLeftMode, UIElement element)
{
UpdateTitleBarForElement(isLeftMode, element);
UpdateNavigationViewForElement(isLeftMode, element);
#if !UNPACKAGED
ApplicationData.Current.LocalSettings.Values[IsLeftModeKey] = isLeftMode;
#else
_isLeftMode = isLeftMode;
#endif
}

public static void UpdateTitleBarForElement(bool isLeftMode, UIElement element)
public static void UpdateNavigationViewForElement(bool isLeftMode, UIElement element)
{
var window = WindowHelper.GetWindowForElement(element);
window.ExtendsContentIntoTitleBar = isLeftMode;

NavigationView _navView = NavigationRootPage.GetForElement(element).NavigationView;
if (isLeftMode)
{
NavigationRootPage.GetForElement(element).NavigationView.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Auto;
_navView.PaneDisplayMode = NavigationViewPaneDisplayMode.Auto;
Grid.SetRow(_navView, 0);
}
else
{
NavigationRootPage.GetForElement(element).NavigationView.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Top;
_navView.PaneDisplayMode = NavigationViewPaneDisplayMode.Top;
Grid.SetRow(_navView, 1);
}
}
}
Expand Down
38 changes: 26 additions & 12 deletions WinUIGallery/Navigation/NavigationRootPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,33 @@
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<!-- TitleBar -->
<RowDefinition Height="*" />
<!-- NavView -->
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="TitleBarStates">
<VisualState x:Name="WideLayout">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource Breakpoint640Plus}" />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="SmallLayout">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState x:Name="Default" />
<VisualState x:Name="Compact">
<VisualState.Setters>
<Setter Target="AppTitleBar.Margin" Value="96,0,0,0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Top">
<VisualState.Setters>
<Setter Target="AppTitleBar.Margin" Value="16,0,0,0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="WindowActivationStates">
<VisualState x:Name="Activated" />
<VisualState x:Name="Deactivated">
<VisualState.Setters>
<Setter Target="AppTitle.Foreground" Value="{ThemeResource TextFillColorTertiaryBrush}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Expand All @@ -43,15 +55,15 @@
Grid.Column="1"
Height="{Binding ElementName=NavigationViewControl, Path=CompactPaneLength}"
Margin="48,0,0,0"
VerticalAlignment="Top"
VerticalAlignment="Stretch"
AutomationProperties.AutomationId="AppTitleBar"
Canvas.ZIndex="1"
IsHitTestVisible="True">
<StackPanel Orientation="Horizontal">
<StackPanel VerticalAlignment="Center" Orientation="Horizontal">
<Image Width="18" Source="ms-appx:///Assets/Tiles/TitlebarLogo.png" />
<TextBlock
x:Name="AppTitle"
Margin="16,0,0,0"
Margin="12,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{x:Bind AppTitleText}" />
Expand Down Expand Up @@ -140,8 +152,10 @@
-->
<NavigationView
x:Name="NavigationViewControl"
Grid.RowSpan="2"
Grid.Column="1"
Canvas.ZIndex="0"
DisplayModeChanged="OnPaneDisplayModeChanged"
IsTabStop="False"
IsTitleBarAutoPaddingEnabled="True"
Loaded="OnNavigationViewControlLoaded"
Expand Down
58 changes: 38 additions & 20 deletions WinUIGallery/Navigation/NavigationRootPage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Navigation;
using Windows.Devices.Input;
using Windows.Foundation;
using Windows.System.Profile;
using Windows.UI.ViewManagement;
Expand All @@ -34,9 +33,6 @@ public sealed partial class NavigationRootPage : Page
{
public Windows.System.VirtualKey ArrowKey;
public Microsoft.UI.Dispatching.DispatcherQueue dispatcherQueue;

private RootFrameNavigationHelper _navHelper;
private bool _isKeyboardConnected;
private UISettings _settings;


Expand Down Expand Up @@ -77,8 +73,6 @@ public NavigationRootPage()
this.InitializeComponent();
dispatcherQueue = Microsoft.UI.Dispatching.DispatcherQueue.GetForCurrentThread();

_navHelper = new RootFrameNavigationHelper(rootFrame, NavigationViewControl);

SetDeviceFamily();
AddNavigationMenuItems();

Expand All @@ -91,27 +85,56 @@ public NavigationRootPage()
}
};

_isKeyboardConnected = Convert.ToBoolean(new KeyboardCapabilities().KeyboardPresent);

// remove the solid-colored backgrounds behind the caption controls and system back button if we are in left mode
// This is done when the app is loaded since before that the actual theme that is used is not "determined" yet
Loaded += delegate (object sender, RoutedEventArgs e)
{
NavigationOrientationHelper.UpdateTitleBarForElement(NavigationOrientationHelper.IsLeftMode(), this);
NavigationOrientationHelper.UpdateNavigationViewForElement(NavigationOrientationHelper.IsLeftMode(), this);
niels9001 marked this conversation as resolved.
Show resolved Hide resolved

Window window = WindowHelper.GetWindowForElement(sender as UIElement);
window.Title = AppTitleText;
window.ExtendsContentIntoTitleBar = true;
window.Activated += Window_Activated;
window.SetTitleBar(this.AppTitleBar);

AppWindow appWindow = WindowHelper.GetAppWindow(window);
appWindow.SetIcon("Assets/Tiles/GalleryIcon.ico");
_settings = new UISettings();
_settings.ColorValuesChanged += _settings_ColorValuesChanged; // cannot use FrameworkElement.ActualThemeChanged event because the triggerTitleBarRepaint workaround no longer works
};
}

private void Window_Activated(object sender, WindowActivatedEventArgs args)
{
if (args.WindowActivationState == WindowActivationState.Deactivated)
{
VisualStateManager.GoToState(this, "Deactivated", true);
}
else
{
VisualStateManager.GoToState(this, "Activated", true);
}
}

NavigationViewControl.RegisterPropertyChangedCallback(NavigationView.PaneDisplayModeProperty, new DependencyPropertyChangedCallback(OnPaneDisplayModeChanged));
private void OnPaneDisplayModeChanged(NavigationView sender, NavigationViewDisplayModeChangedEventArgs args)
{
if (sender.PaneDisplayMode == NavigationViewPaneDisplayMode.Top)
{
VisualStateManager.GoToState(this, "Top", true);
}
else
{
if (args.DisplayMode == NavigationViewDisplayMode.Minimal)
{
VisualStateManager.GoToState(this, "Compact", true);
}
else
{
VisualStateManager.GoToState(this, "Default", true);
}
}
}

// this handles updating the caption button colors correctly when indows system theme is changed
// while the app is open
private void _settings_ColorValuesChanged(UISettings sender, object args)
Expand All @@ -123,12 +146,6 @@ private void _settings_ColorValuesChanged(UISettings sender, object args)
});
}

private void OnPaneDisplayModeChanged(DependencyObject sender, DependencyProperty dp)
{
var navigationView = sender as NavigationView;
NavigationRootPage.GetForElement(this).AppTitleBar.Visibility = navigationView.PaneDisplayMode == NavigationViewPaneDisplayMode.Top ? Visibility.Collapsed : Visibility.Visible;
}

// Wraps a call to rootFrame.Navigate to give the Page a way to know which NavigationRootPage is navigating.
// Please call this function rather than rootFrame.Navigate to navigate the rootFrame.
public void Navigate(
Expand Down Expand Up @@ -186,7 +203,7 @@ private void AddNavigationMenuItems()
{
foreach (var group in ControlInfoDataSource.Instance.Groups.OrderBy(i => i.Title).Where(i => !i.IsSpecialSection))
{
var itemGroup = new Microsoft.UI.Xaml.Controls.NavigationViewItem() { Content = group.Title, Tag = group.UniqueId, DataContext = group, Icon = GetIcon(group.ImageIconPath) };
var itemGroup = new NavigationViewItem() { Content = group.Title, Tag = group.UniqueId, DataContext = group, Icon = GetIcon(group.ImageIconPath) };

var groupMenuFlyoutItem = new MenuFlyoutItem() { Text = $"Copy Link to {group.Title} samples", Icon = new FontIcon() { Glyph = "\uE8C8" }, Tag = group };
groupMenuFlyoutItem.Click += this.OnMenuFlyoutItemClick;
Expand All @@ -196,7 +213,7 @@ private void AddNavigationMenuItems()

foreach (var item in group.Items)
{
var itemInGroup = new Microsoft.UI.Xaml.Controls.NavigationViewItem() { IsEnabled = item.IncludedInBuild, Content = item.Title, Tag = item.UniqueId, DataContext = item };
var itemInGroup = new NavigationViewItem() { IsEnabled = item.IncludedInBuild, Content = item.Title, Tag = item.UniqueId, DataContext = item };

var itemInGroupMenuFlyoutItem = new MenuFlyoutItem() { Text = $"Copy Link to {item.Title} sample", Icon = new FontIcon() { Glyph = "\uE8C8" }, Tag = item };
itemInGroupMenuFlyoutItem.Click += this.OnMenuFlyoutItemClick;
Expand Down Expand Up @@ -249,7 +266,7 @@ private void SetDeviceFamily()

private void OnNewControlsMenuItemLoaded(object sender, RoutedEventArgs e)
{
if ( NavigationViewControl.DisplayMode == Microsoft.UI.Xaml.Controls.NavigationViewDisplayMode.Expanded)
if ( NavigationViewControl.DisplayMode == NavigationViewDisplayMode.Expanded)
{
controlsSearchBox.Focus(FocusState.Keyboard);
}
Expand All @@ -261,7 +278,7 @@ private void OnNavigationViewControlLoaded(object sender, RoutedEventArgs e)
Task.Delay(500).ContinueWith(_ => this.NavigationViewLoaded?.Invoke(), TaskScheduler.FromCurrentSynchronizationContext());
}

private void OnNavigationViewSelectionChanged(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewSelectionChangedEventArgs args)
private void OnNavigationViewSelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
{
if (args.IsSettingsSelected)
{
Expand Down Expand Up @@ -554,6 +571,7 @@ private void WaitForDebuggerInvokerButton_Click(object sender, RoutedEventArgs e
private static extern void DebugBreak();

#endregion

}

public class NavigationRootPageArgs
Expand Down