Skip to content

Commit

Permalink
feat(NavigationBar): Add lightweight styling to Navigation bar (#608)
Browse files Browse the repository at this point in the history
* style: fix tabs

* feat(NavigationBar): Add lightweight styling to Navigation bar
  • Loading branch information
Marc-Antoine-Soucy committed Jul 24, 2023
1 parent 423eae7 commit 5dfeeab
Show file tree
Hide file tree
Showing 9 changed files with 493 additions and 141 deletions.
Original file line number Diff line number Diff line change
@@ -1,86 +1,91 @@
<Page x:Class="Uno.Toolkit.Samples.Content.Controls.NavigationBarSamplePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:nested="Uno.Toolkit.Samples.Content.NestedSamples"
xmlns:sample="using:Uno.Toolkit.Samples"
xmlns:utu="using:Uno.Toolkit.UI"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
mc:Ignorable="d">
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:nested="Uno.Toolkit.Samples.Content.NestedSamples"
xmlns:sample="using:Uno.Toolkit.Samples"
xmlns:utu="using:Uno.Toolkit.UI"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
mc:Ignorable="d">

<sample:SamplePageLayout x:Name="NavBarSamplePageLayout">
<sample:SamplePageLayout.MaterialTemplate>
<DataTemplate>
<StackPanel Margin="50"
Spacing="8">
<Button AutomationProperties.AutomationId="Material_NavigationBar_Launch_Sample_Button"
Click="LaunchFullScreenMaterialSample"
Content="Show Sample"
Style="{StaticResource MaterialContainedButtonStyle}" />
<sample:SamplePageLayout x:Name="NavBarSamplePageLayout">
<sample:SamplePageLayout.MaterialTemplate>
<DataTemplate>
<StackPanel Margin="50"
Spacing="8">
<Button AutomationProperties.AutomationId="Material_NavigationBar_Launch_Sample_Button"
Click="LaunchFullScreenMaterialSample"
Content="Show Sample"
Style="{StaticResource MaterialContainedButtonStyle}" />

<Button AutomationProperties.AutomationId="Material_NavigationBar_Launch_DataContext_Sample_Button"
Click="LaunchFullScreenMaterialDataContextSample"
Content="Show DataContext Sample"
Style="{StaticResource MaterialContainedButtonStyle}" />
<Button AutomationProperties.AutomationId="Material_NavigationBar_Launch_DataContext_Sample_Button"
Click="LaunchFullScreenMaterialDataContextSample"
Content="Show DataContext Sample"
Style="{StaticResource MaterialContainedButtonStyle}" />

<Button x:Name="ModalButton"
Content="Show Modal Sample"
Style="{StaticResource MaterialContainedButtonStyle}">
<Button.Flyout>
<Flyout x:Name="ModalFlyout"
Opened="ModalFlyout_Opened"
Placement="Bottom">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="MinWidth"
Value="200" />
<Setter Property="MinHeight"
Value="200" />
</Style>
</Flyout.FlyoutPresenterStyle>
<Button x:Name="ModalButton"
Content="Show Modal Sample"
Style="{StaticResource MaterialContainedButtonStyle}">
<Button.Flyout>
<Flyout x:Name="ModalFlyout"
Opened="ModalFlyout_Opened"
Placement="Bottom">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="MinWidth" Value="200" />
<Setter Property="MinHeight" Value="200" />
</Style>
</Flyout.FlyoutPresenterStyle>

<Grid>
<Frame x:Name="ModalFrame" />
</Grid>
</Flyout>
</Button.Flyout>
</Button>
</StackPanel>
</DataTemplate>
</sample:SamplePageLayout.MaterialTemplate>
<sample:SamplePageLayout.M3MaterialTemplate>
<DataTemplate>
<StackPanel Margin="50"
Spacing="8">
<Button AutomationProperties.AutomationId="Material_M3_NavigationBar_Launch_Sample_Button"
Click="LaunchFullScreenM3MaterialSample"
Content="Show Sample"
Style="{StaticResource FilledButtonStyle}" />
<Grid>
<Frame x:Name="ModalFrame" />
</Grid>
</Flyout>
</Button.Flyout>
</Button>
</StackPanel>
</DataTemplate>
</sample:SamplePageLayout.MaterialTemplate>
<sample:SamplePageLayout.FluentTemplate>
<DataTemplate>
<StackPanel Margin="50"
Spacing="8">
<Button Click="LaunchFullScreenFluentSample"
Content="Show sample" />
</StackPanel>
</DataTemplate>
</sample:SamplePageLayout.FluentTemplate>
<sample:SamplePageLayout.M3MaterialTemplate>
<DataTemplate>
<StackPanel Margin="50"
Spacing="8">
<Button AutomationProperties.AutomationId="Material_M3_NavigationBar_Launch_Sample_Button"
Click="LaunchFullScreenM3MaterialSample"
Content="Show Sample"
Style="{StaticResource FilledButtonStyle}" />

<Button AutomationProperties.AutomationId="Material_M3_Primary_NavigationBar_Launch_Sample_Button"
Click="LaunchFullScreenM3MaterialPrimarySample"
Content="Show Primary Sample"
Style="{StaticResource FilledButtonStyle}" />
Click="LaunchFullScreenM3MaterialPrimarySample"
Content="Show Primary Sample"
Style="{StaticResource FilledButtonStyle}" />

<Button AutomationProperties.AutomationId="Material_M3_NavigationBar_Launch_DataContext_Sample_Button"
Click="LaunchFullScreenM3MaterialDataContextSample"
Content="Show DataContext Sample"
Style="{StaticResource FilledButtonStyle}" />
Click="LaunchFullScreenM3MaterialDataContextSample"
Content="Show DataContext Sample"
Style="{StaticResource FilledButtonStyle}" />

<Button x:Name="M3ModalButton"
Content="Show Modal Sample"
Style="{StaticResource FilledButtonStyle}">
Content="Show Modal Sample"
Style="{StaticResource FilledButtonStyle}">
<Button.Flyout>
<Flyout x:Name="M3ModalFlyout"
Opened="M3ModalFlyout_Opened"
Placement="Full">
Opened="M3ModalFlyout_Opened"
Placement="Full">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="Width"
Value="900" />
<Setter Property="MinHeight"
Value="600" />
<Setter Property="Width" Value="900" />
<Setter Property="MinHeight" Value="600" />
</Style>
</Flyout.FlyoutPresenterStyle>

Expand All @@ -91,7 +96,7 @@
</Button.Flyout>
</Button>
</StackPanel>
</DataTemplate>
</sample:SamplePageLayout.M3MaterialTemplate>
</sample:SamplePageLayout>
</DataTemplate>
</sample:SamplePageLayout.M3MaterialTemplate>
</sample:SamplePageLayout>
</Page>
Original file line number Diff line number Diff line change
Expand Up @@ -80,5 +80,9 @@ private void LaunchFullScreenM3MaterialPrimarySample(object sender, RoutedEventA
Shell.GetForCurrentView().ShowNestedSample<M3MaterialNavigationBarSample_Primary>(clearStack: true);
}

}
private void LaunchFullScreenFluentSample (object sender, RoutedEventArgs e)
{
Shell.GetForCurrentView().ShowNestedSample<FluentNavigationBarSampleNestedPage>(clearStack: true);
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<Page x:Class="Uno.Toolkit.Samples.Content.NestedSamples.FluentNavigationBarSampleNestedPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:ios="http://uno.ui/ios"
xmlns:local="using:Uno.Toolkit.Samples.Content.NestedSamples"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:utu="using:Uno.Toolkit.UI"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
mc:Ignorable="d ios">

<Grid>

<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<utu:NavigationBar Content="First Page"
MainCommandMode="Action"
Style="{StaticResource DefaultNavigationBar}">
<utu:NavigationBar.MainCommand>
<AppBarButton Click="NavigateBack"
Label="Close"
Style="{StaticResource DefaultAppBarButtonStyle}">
<AppBarButton.Icon>
<BitmapIcon UriSource="ms-appx:///Assets/CloseIcon.png" />
</AppBarButton.Icon>
</AppBarButton>
</utu:NavigationBar.MainCommand>
<utu:NavigationBar.PrimaryCommands>
<AppBarButton Command="{Binding Primary1CountCommand}"
Label="More"
Style="{StaticResource DefaultAppBarButtonStyle}">
<AppBarButton.Icon>
<BitmapIcon UriSource="ms-appx:///Assets/MaterialIcon_Small.png" />
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Command="{Binding Primary2CountCommand}"
Label="More"
Style="{StaticResource DefaultAppBarButtonStyle}">
<AppBarButton.Icon>
<BitmapIcon UriSource="ms-appx:///Assets/AppleIcon_Small.png" />
</AppBarButton.Icon>
</AppBarButton>
</utu:NavigationBar.PrimaryCommands>
<utu:NavigationBar.SecondaryCommands>
<AppBarButton Command="{Binding Secondary1CountCommand}"
Label="More"
Style="{StaticResource DefaultAppBarButtonStyle}" />
<AppBarButton Command="{Binding Secondary2CountCommand}"
Label="More"
Style="{StaticResource DefaultAppBarButtonStyle}" />
<AppBarButton Command="{Binding Secondary3CountCommand}"
Label="More"
Style="{StaticResource DefaultAppBarButtonStyle}" />
</utu:NavigationBar.SecondaryCommands>
</utu:NavigationBar>
<StackPanel Grid.Row="1"
VerticalAlignment="Stretch"
Background="Yellow"
BorderBrush="Red"
BorderThickness="20"
Spacing="8">
<Button Click="NavigateBack"
Content="Exit sample" />
<Button Click="NavigateToNextPage"
Content="Navigate To Second Page" />
</StackPanel>
</Grid>
</Page>
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Uno.Toolkit.UI;
using Windows.Foundation;
using Windows.Foundation.Collections;
#if IS_WINUI
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
#else
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
#endif

// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238

namespace Uno.Toolkit.Samples.Content.NestedSamples;

/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class FluentNavigationBarSampleNestedPage : Page
{
public FluentNavigationBarSampleNestedPage()
{
this.InitializeComponent();
}

private void NavigateToNextPage(object sender, RoutedEventArgs e) => Frame.Navigate(typeof(FluentNavigationBarSampleNestedPage2));

private void NavigateBack(object sender, RoutedEventArgs e) => Shell.GetForCurrentView().BackNavigateFromNestedSample();
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<Page x:Class="Uno.Toolkit.Samples.Content.NestedSamples.FluentNavigationBarSampleNestedPage2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:Uno.Toolkit.Samples.Content.NestedSamples"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:utu="using:Uno.Toolkit.UI"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
mc:Ignorable="d">

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<utu:NavigationBar Content="Second Page"
Style="{StaticResource DefaultNavigationBar}">
<utu:NavigationBar.PrimaryCommands>
<AppBarButton Label="More"
Style="{StaticResource DefaultAppBarButtonStyle}" />
<AppBarButton Label="More"
Style="{StaticResource DefaultAppBarButtonStyle}" />
</utu:NavigationBar.PrimaryCommands>
<utu:NavigationBar.SecondaryCommands>
<AppBarButton Label="More"
Style="{StaticResource DefaultAppBarButtonStyle}" />
<AppBarButton Label="More"
Style="{StaticResource DefaultAppBarButtonStyle}" />
<AppBarButton Label="More"
Style="{StaticResource DefaultAppBarButtonStyle}" />
</utu:NavigationBar.SecondaryCommands>
</utu:NavigationBar>
<StackPanel Grid.Row="1"
Padding="16,0"
VerticalAlignment="Center"
Spacing="8">
<TextBlock>
You can use the back button located on the left side of the CommandBar
to navigate back.
</TextBlock>

<Button Click="NavigateBack"
Content="Navigate Back" />
</StackPanel>
</Grid>
</Page>
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Uno.Toolkit.UI;
using Windows.Foundation;
using Windows.Foundation.Collections;
#if IS_WINUI
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
#else
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
#endif

namespace Uno.Toolkit.Samples.Content.NestedSamples;

public sealed partial class FluentNavigationBarSampleNestedPage2 : Page
{
public FluentNavigationBarSampleNestedPage2()
{
this.InitializeComponent();
}

private void NavigateBack(object sender, RoutedEventArgs e) => Frame.GoBack();
}
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@
<Compile Include="$(MSBuildThisFileDirectory)Content\Helpers\BindingExtensionsSamplePage.xaml.cs">
<DependentUpon>BindingExtensionsSamplePage.xaml</DependentUpon>
</Compile>
<Compile Include="$(MSBuildThisFileDirectory)Content\NestedSamples\FluentNavigationBarSampleNestedPage1.xaml.cs" />
<Compile Include="$(MSBuildThisFileDirectory)Content\NestedSamples\FluentNavigationBarSampleNestedPage2.xaml.cs" />
<Compile Include="$(MSBuildThisFileDirectory)Content\NestedSamples\M3MaterialBottomBarSampleNestedPage.xaml.cs">
<DependentUpon>M3MaterialBottomBarSampleNestedPage.xaml</DependentUpon>
</Compile>
Expand Down Expand Up @@ -271,6 +273,14 @@
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="$(MSBuildThisFileDirectory)Content\NestedSamples\FluentNavigationBarSampleNestedPage1.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="$(MSBuildThisFileDirectory)Content\NestedSamples\FluentNavigationBarSampleNestedPage2.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="$(MSBuildThisFileDirectory)Content\NestedSamples\M3MaterialBottomBarSampleNestedPage.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
Expand Down
Loading

0 comments on commit 5dfeeab

Please sign in to comment.