Skip to content

Commit

Permalink
Merge pull request #1293 from microsoft/niels9001/gallery-titlebar-fixes
Browse files Browse the repository at this point in the history 
[UX] Titlebar improvements
  • Loading branch information
@niels9001
niels9001 committed Jun 7, 2023
2 parents 831f3c3 + 17de6a9 commit a3bc984
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 48 deletions.
25 changes: 9 additions & 16 deletions WinUIGallery/Helper/NavigationOrientationHelper.cs
View file
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
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
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);

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

0 comments on commit a3bc984

Please sign in to comment.