Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions doc/controls/NavigationBar.md
Original file line number Diff line number Diff line change
Expand Up @@ -285,12 +285,23 @@ The height is fixed and cannot be changed.

### MainCommandMode

The `NavigationBar` has a property named `MainCommandMode` that can be set to either:
The `NavigationBar` has a property named `MainCommandMode` that can be set to:

1. `MainCommandMode.Back` (default)
1. `MainCommandMode.Action`
2. `MainCommandMode.Action`
3. `MainCommandMode.Hidden`

`MainCommandMode` should be set to `Action` when the `MainCommand` is being used for anything other than backward navigation, such as displaying a burger menu or displaying a prompt to the user before the navigation occurs.
#### Back Mode (Default)

When set to `Back`, the `MainCommand` will be used for backward navigation. The button will automatically appear when the Frame has items in its back stack and will trigger navigation back when clicked.

#### Action Mode

`MainCommandMode` should be set to `Action` when the `MainCommand` is being used for anything other than backward navigation, such as displaying a burger menu or displaying a prompt to the user before the navigation occurs. In this mode, the `MainCommand` remains visible and its click behavior must be handled by setting the `Command` property or handling the `Click` event.

#### Hidden Mode

When set to `Hidden`, the `MainCommand` will be completely hidden from view regardless of the Frame's back stack state. This is useful when you want to hide the main command entirely, such as on a home/landing page or when implementing custom navigation logic that doesn't require a visible back button.

### MainCommand

Expand Down
56 changes: 56 additions & 0 deletions src/Uno.Toolkit.RuntimeTests/Tests/NavigationBarTests.cs
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,62 @@ public async Task MainCommand_In_Popup_With_Page_With_BackStack(MainCommandMode
}
}

[TestMethod]
public async Task MainCommand_Hidden_Mode_Hides_Button()
{
var mainCommand = new AppBarButton();
var navigationBar = new NavigationBar
{
Content = "Title",
MainCommandMode = MainCommandMode.Hidden,
MainCommand = mainCommand
};
var content = new Grid { Children = { navigationBar } };

await UnitTestUIContentHelperEx.SetContentAndWait(content);

Assert.AreEqual(Visibility.Collapsed, mainCommand.Visibility, "MainCommand should be collapsed when MainCommandMode is Hidden");
Assert.IsFalse(navigationBar.TryPerformMainCommand(), "TryPerformMainCommand should return false when MainCommandMode is Hidden");
}

[TestMethod]
public async Task MainCommand_Hidden_Mode_In_Frame_Stays_Hidden()
{
var frame = new Frame() { Width = 400, Height = 400 };
await UnitTestUIContentHelperEx.SetContentAndWait(frame);

frame.Navigate(typeof(NavBarFirstPage));
await UnitTestsUIContentHelper.WaitForIdle();

var firstPage = frame.Content as NavBarFirstPage;
var firstNavBar = firstPage?.FindChild<NavigationBar>();

if (firstNavBar != null)
{
firstNavBar.MainCommandMode = MainCommandMode.Hidden;
await UnitTestsUIContentHelper.WaitForIdle();

// Navigate to a second page to create backstack
frame.Navigate(typeof(NavBarSecondPage));
await UnitTestsUIContentHelper.WaitForIdle();

var secondPage = frame.Content as NavBarSecondPage;
var secondNavBar = secondPage?.FindChild<NavigationBar>();

if (secondNavBar != null)
{
secondNavBar.MainCommandMode = MainCommandMode.Hidden;
await UnitTestsUIContentHelper.WaitForIdle();

// Even with backstack, Hidden mode should keep button collapsed
Assert.AreEqual(Visibility.Collapsed, secondNavBar.MainCommand?.Visibility,
"MainCommand should remain collapsed in Hidden mode even with backstack");
Assert.IsFalse(secondNavBar.TryPerformMainCommand(),
"TryPerformMainCommand should return false in Hidden mode");
}
}
}

#if __ANDROID__ || __IOS__
[TestMethod]
public async Task NavigationBar_Dynamic_Background()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,6 @@ public enum MainCommandMode
{
Back,
Action,
Hidden,
}
}
15 changes: 14 additions & 1 deletion src/Uno.Toolkit.UI/Controls/NavigationBar/NavigationBar.cs
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,8 @@ protected override void OnApplyTemplate()

internal bool TryPerformMainCommand()
{
// Only perform back navigation when MainCommandMode is Back
// Action and Hidden modes should not perform automatic navigation
if (MainCommandMode != MainCommandMode.Back)
{
return false;
Expand Down Expand Up @@ -198,13 +200,24 @@ private void OnBackStackChanged(object? sender, NotifyCollectionChangedEventArgs

internal void UpdateMainCommandVisibility()
{
if (MainCommand is not { } mainCommand)
{
return;
}

if (MainCommandMode == MainCommandMode.Hidden)
{
mainCommand.Visibility = Visibility.Collapsed;
return;
}

if (MainCommandMode != MainCommandMode.Back)
{
return;
}

var buttonVisibility = Visibility.Collapsed;
if (GetPage() is { } page && MainCommand is { } mainCommand)
if (GetPage() is { } page)
{
if (page.Frame?.CanGoBack ?? false)
{
Expand Down
Loading