Add cross-platform Toolbar component using native platform views

CHANGELOG.md

@@ -1,3 +1,6 @@
+## [55.3.0]
+- [Toolbar] Added `Toolbar` component with `ToolbarButton` items. The toolbar provides a cross-platform horizontal bar of icon buttons, aligned with Apple HIG toolbars and Material 3 toolbars.
+
 ## [55.2.2]
 - [iOS26][Tip] Added more padding.
 

src/app/Components/ComponentsSamples/Toolbar/ToolbarSamples.xaml

@@ -0,0 +1,73 @@
+<?xml
+    version="1.0"
+    encoding="utf-8"?>
+
+<dui:ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                 xmlns:dui="http://dips.com/mobile.ui"
+                 xmlns:local="clr-namespace:Components.ComponentsSamples.Toolbar"
+                 x:DataType="local:ToolbarSamplesViewModel"
+                 x:Class="Components.ComponentsSamples.Toolbar.ToolbarSamples"
+                 Title="Toolbar"
+                 >
+
+    <dui:ContentPage.BindingContext>
+        <local:ToolbarSamplesViewModel />
+    </dui:ContentPage.BindingContext>
+
+    <dui:ContentPage.ToolbarItems>
+        <ToolbarItem Text="Close" Clicked="OnCloseClicked" />
+    </dui:ContentPage.ToolbarItems>
+
+    <dui:ContentPage.BottomToolbar>
+        <dui:Toolbar>
+            <dui:ToolbarButton Icon="{dui:Icons edit_line}"
+                               Title="Edit"
+                               Command="{Binding EditCommand}" />
+            <dui:ToolbarButton Icon="{dui:Icons save_line}"
+                               Title="Save"
+                               Command="{Binding SaveCommand}" />
+            <dui:ToolbarButton Icon="{dui:Icons filter_line}"
+                               Title="Filter"
+                               Command="{Binding FilterCommand}" />
+            <dui:ToolbarButton Icon="{dui:Icons plus_line}"
+                               Title="Add"
+                               Command="{Binding AddCommand}" />
+        </dui:Toolbar>
+    </dui:ContentPage.BottomToolbar>
+
+    <dui:ScrollView Padding="{dui:Sizes size_4}" >
+        <dui:VerticalStackLayout Spacing="8">
+            <dui:Label Text="Bottom Toolbar"
+                       Style="{dui:Styles Label=SectionHeader}" />
+            <dui:Label
+                Text="The bottom toolbar is set as a property on ContentPage. On iOS it uses a native glass capsule toolbar. On Android it renders a Material 3 Bottom App Bar."
+                Style="{dui:Styles Label=UI200}" />
+
+            <dui:Label Text="Last action"
+                       Style="{dui:Styles Label=SectionHeader}"
+                       Margin="{dui:Thickness Top=size_4}" />
+            <dui:Label Text="{Binding LastAction}"
+                       Style="{dui:Styles Label=UI200}" />
+
+            <dui:Label Text="Scroll to test translucency"
+                       Style="{dui:Styles Label=SectionHeader}"
+                       Margin="{dui:Thickness Top=size_4}" />
+
+            <BoxView HeightRequest="80" Color="Red" CornerRadius="12" />
+            <BoxView HeightRequest="80" Color="Orange" CornerRadius="12" />
+            <BoxView HeightRequest="80" Color="Gold" CornerRadius="12" />
+            <BoxView HeightRequest="80" Color="Green" CornerRadius="12" />
+            <BoxView HeightRequest="80" Color="DodgerBlue" CornerRadius="12" />
+            <BoxView HeightRequest="80" Color="Red" CornerRadius="12" />
+            <BoxView HeightRequest="80" Color="Orange" CornerRadius="12" />
+            <BoxView HeightRequest="80" Color="Gold" CornerRadius="12" />
+            <BoxView HeightRequest="80" Color="Green" CornerRadius="12" />
+            <BoxView HeightRequest="80" Color="DodgerBlue" CornerRadius="12" />
+            <BoxView HeightRequest="80" Color="Red" CornerRadius="12" />
+            <BoxView HeightRequest="80" Color="Orange" CornerRadius="12" />
+            <BoxView HeightRequest="120" Margin="0,0,0,80" Color="Gold" CornerRadius="12" />
+        </dui:VerticalStackLayout>
+    </dui:ScrollView>
+
+</dui:ContentPage>

src/app/Components/ComponentsSamples/Toolbar/ToolbarSamples.xaml.cs

@@ -0,0 +1,14 @@
+namespace Components.ComponentsSamples.Toolbar;
+
+public partial class ToolbarSamples
+{
+    public ToolbarSamples()
+    {
+        InitializeComponent();
+    }
+
+    private async void OnCloseClicked(object? sender, EventArgs e)
+    {
+        await Navigation.PopModalAsync();
+    }
+}

src/app/Components/ComponentsSamples/Toolbar/ToolbarSamplesViewModel.cs

@@ -0,0 +1,24 @@
+using DIPS.Mobile.UI.MVVM;
+
+namespace Components.ComponentsSamples.Toolbar;
+
+internal class ToolbarSamplesViewModel : ViewModel
+{
+    private string m_lastAction = "None";
+
+    public Command EditCommand => new(OnEdit);
+    public Command SaveCommand => new(OnSave);
+    public Command FilterCommand => new(OnFilter);
+    public Command AddCommand => new(OnAdd);
+
+    public string LastAction
+    {
+        get => m_lastAction;
+        set => RaiseWhenSet(ref m_lastAction, value);
+    }
+
+    private void OnEdit() => LastAction = "Edit tapped";
+    private void OnSave() => LastAction = "Save tapped";
+    private void OnFilter() => LastAction = "Filter tapped";
+    private void OnAdd() => LastAction = "Add tapped";
+}

src/app/Components/REGISTER_YOUR_SAMPLES_HERE.cs

@@ -21,6 +21,7 @@
 using Components.ComponentsSamples.Sorting;
 using Components.ComponentsSamples.SyntaxHighlighting;
 using Components.ComponentsSamples.TabView;
+using Components.ComponentsSamples.Toolbar;
 using Components.ComponentsSamples.Tags;
 using Components.ComponentsSamples.Text;
 using Components.ComponentsSamples.TextFields;
@@ -73,6 +74,7 @@ public static List<Sample> RegisterSamples()
             new(SampleType.Components, "Zoom Container", () => new PanZoomContainerSample()),
             new(SampleType.Components, "Gallery", () => new GallerySample()),
             new(SampleType.Components, "TIFF Viewer", () => new TiffViewerSample()),
+            new(SampleType.Components, "Toolbar", () => new ToolbarSamples(), isModal: true),
             new(SampleType.Accessibility, "VoiceOver/TalkBack", () => new VoiceOverSamples()),
 
 

src/library/DIPS.Mobile.UI/AssemblyInfo.cs

@@ -100,6 +100,7 @@
 [assembly: XmlnsDefinition("http://dips.com/mobile.ui","DIPS.Mobile.UI.Components.TiffViewer")]
 [assembly: XmlnsDefinition("http://dips.com/mobile.ui","DIPS.Mobile.UI.Components.Gallery")]
 [assembly: XmlnsDefinition("http://dips.com/mobile.ui","DIPS.Mobile.UI.Effects.Accessibility")]
+[assembly: XmlnsDefinition("http://dips.com/mobile.ui","DIPS.Mobile.UI.Components.Toolbar")]
 
 
 

src/library/DIPS.Mobile.UI/Components/Pages/Android/ContentPage.cs

@@ -0,0 +1,14 @@
+namespace DIPS.Mobile.UI.Components.Pages;
+
+public partial class ContentPage
+{
+    private partial void UpdateBottomToolbarOnPlatform()
+    {
+        // TODO: Implement Android bottom toolbar (Material 3 Bottom App Bar)
+    }
+
+    private partial void HideBottomToolbarOnPlatform()
+    {
+        // TODO: Implement Android bottom toolbar cleanup
+    }
+}

src/library/DIPS.Mobile.UI/Components/Pages/ContentPage.Properties.cs

@@ -1,10 +1,29 @@
 using DIPS.Mobile.UI.API.Library;
+using DIPS.Mobile.UI.Components.Toolbar;
 using Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;
 
 namespace DIPS.Mobile.UI.Components.Pages;
 
 public partial class ContentPage
 {
+    public static readonly BindableProperty BottomToolbarProperty = BindableProperty.Create(
+        nameof(BottomToolbar),
+        typeof(Toolbar.Toolbar),
+        typeof(ContentPage));
+
+    /// <summary>
+    /// A bottom toolbar to display on the page.
+    /// </summary>
+    /// <remarks>
+    /// On iOS, this renders the UINavigationController's built-in toolbar with Liquid Glass on iOS 26+.
+    /// On Android, a Material 3 Bottom App Bar is displayed at the bottom of the page.
+    /// </remarks>
+    public Toolbar.Toolbar? BottomToolbar
+    {
+        get => (Toolbar.Toolbar?)GetValue(BottomToolbarProperty);
+        set => SetValue(BottomToolbarProperty, value);
+    }
+
     public static readonly BindableProperty ShouldHideFloatingNavigationMenuProperty = BindableProperty.Create(
         nameof(ShouldHideFloatingNavigationMenuButton),
         typeof(bool),

src/library/DIPS.Mobile.UI/Components/Pages/ContentPage.cs

@@ -73,13 +73,17 @@ protected override void OnAppearing()
             HasAppeared = true;
 
             HideOrShowFloatingNavigationMenu();
+            UpdateBottomToolbarOnPlatform();
 
 #if __ANDROID__
             // Update status bar color for this page (works for both modal and non-modal)
             StatusBarHandler.TrySetStatusBarColor(this, StatusBarColor);
 #endif
         }
 
+        private partial void UpdateBottomToolbarOnPlatform();
+        private partial void HideBottomToolbarOnPlatform();
+
         protected override void OnNavigatedTo(NavigatedToEventArgs args)
         {
             base.OnNavigatedTo(args);
@@ -185,11 +189,22 @@ protected override void OnDisappearing()
             base.OnDisappearing();
 
             HasAppeared = false;
+            HideBottomToolbarOnPlatform();
 
             if (Application.Current != null)
             {
                 Application.Current.RequestedThemeChanged -= OnRequestedThemeChanged;
             }
         }
+
+        protected override void OnPropertyChanged(string? propertyName = null)
+        {
+            base.OnPropertyChanged(propertyName);
+
+            if (propertyName == nameof(BottomToolbar) && HasAppeared)
+            {
+                UpdateBottomToolbarOnPlatform();
+            }
+        }
     }
 }

src/library/DIPS.Mobile.UI/Components/Pages/dotnet/ContentPage.cs

@@ -0,0 +1,12 @@
+namespace DIPS.Mobile.UI.Components.Pages;
+
+public partial class ContentPage
+{
+    private partial void UpdateBottomToolbarOnPlatform()
+    {
+    }
+
+    private partial void HideBottomToolbarOnPlatform()
+    {
+    }
+}