chore: remove platform specific, native commandBar styles (#1421)

(cherry picked from commit 9b440f0)

src/library/Uno.Material/Styles/Controls/v2/CommandBar.xaml

@@ -9,9 +9,11 @@
 					xmlns:uuc="using:Uno.UI.Controls"
 					mc:Ignorable="android ios">
 
+	<!-- Define Material properties for CommandBar -->
 	<x:Double x:Key="MaterialCommandBarElevation">4</x:Double>
 	<x:Double x:Key="MaterialCommandBarHeight">48</x:Double>
 
+	<!-- Define Material AppBarButton Style -->
 	<Style x:Key="MaterialAppBarButtonStyle"
 		   TargetType="AppBarButton">
 		<Setter Property="Height" Value="{StaticResource MaterialCommandBarHeight}" />
@@ -25,7 +27,7 @@
 			<Setter.Value>
 				<ControlTemplate TargetType="AppBarButton">
 					<um:Ripple Feedback="{TemplateBinding Foreground}"
-									 FeedbackOpacity="{StaticResource PressedOpacity}">
+							   FeedbackOpacity="{StaticResource PressedOpacity}">
 						<Viewbox x:Name="ContentViewbox"
 								 MaxHeight="{ThemeResource AppBarButtonContentHeight}"
 								 MaxWidth="{ThemeResource AppBarButtonContentHeight}"
@@ -42,126 +44,24 @@
 			</Setter.Value>
 		</Setter>
 	</Style>
-
-	<ios:ControlTemplate x:Key="NativeM3CommandBarTemplate"
-						 TargetType="CommandBar">
-		<!-- We use BorderBrush instead of Background to ensure that semi-transparent background of Grid and NativeCommandBarPresenter don't add up -->
-		<Border BorderBrush="{TemplateBinding Background}"
-				BorderThickness="{TemplateBinding Padding}"
-				Background="{TemplateBinding Background}">
-			<uuc:NativeCommandBarPresenter Height="44"/>
-		</Border>
-	</ios:ControlTemplate>
-	<android:ControlTemplate x:Key="NativeM3CommandBarTemplate"
-							 TargetType="CommandBar">
-		<uuc:NativeCommandBarPresenter />
-	</android:ControlTemplate>
-
-	<ControlTemplate x:Key="MaterialXamlCommandBarTemplate"
-					 TargetType="CommandBar">
-		<!-- Simplified CommandBar template that adds support for Uno.UI.CommandBarExtensions.NavigationCommand on Windows. -->
-		<Grid x:Name="LayoutRoot"
-			  win:Height="48"
-			  Background="{TemplateBinding Background}">
-
-			<Grid x:Name="ContentRoot"
-				  Margin="{TemplateBinding Padding}"
-				  Background="{TemplateBinding Background}"
-				  Opacity="{TemplateBinding Opacity}">
-
-				<Grid.ColumnDefinitions>
-					<ColumnDefinition Width="Auto" />
-					<ColumnDefinition Width="*" />
-					<ColumnDefinition Width="Auto" />
-				</Grid.ColumnDefinitions>
-
-				<!-- note: NavigationCommand is an AppBarButton, not ICommand -->
-				<ContentControl Content="{Binding (toolkit:CommandBarExtensions.NavigationCommand), RelativeSource={RelativeSource TemplatedParent}}"
-								Foreground="{TemplateBinding Foreground}"
-								Height="{StaticResource MaterialCommandBarHeight}"
-								Width="{StaticResource MaterialCommandBarHeight}"
-								IsTabStop="False" />
-
-				<!--
-					Use a ContentControl rather than a ContentPresenter so that IsEnabled can be set to false
-					in the Minimal/HiddenClosed states to remove it from being a tab-stop candidate.
-				-->
-				<ContentControl x:Name="ContentControl"
-								Grid.Column="1"
-								Margin="16,0"
-								Content="{TemplateBinding Content}"
-								ContentTemplate="{TemplateBinding ContentTemplate}"
-								ContentTransitions="{TemplateBinding ContentTransitions}"
-								Foreground="{TemplateBinding Foreground}"
-								HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-								VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-								HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-								VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-								IsTabStop="False" />
-
-				<ItemsControl x:Name="PrimaryItemsControl"
-							  HorizontalAlignment="Right"
-							  MinHeight="{ThemeResource AppBarThemeCompactHeight}"
-							  IsTabStop="False"
-							  Grid.Column="2">
-					<ItemsControl.ItemsPanel>
-						<ItemsPanelTemplate>
-							<StackPanel Orientation="Horizontal" />
-						</ItemsPanelTemplate>
-					</ItemsControl.ItemsPanel>
-				</ItemsControl>
-			</Grid>
-		</Grid>
-	</ControlTemplate>
-
+	<!-- Define the base style for Material CommandBar -->
 	<Style x:Key="MaterialBaseCommandBarStyle"
 		   TargetType="CommandBar">
-		<!-- Setting content to empty to avoid getting the datacontext -->
-		<Setter Property="Content" Value="" />
-		<Setter Property="ContentTemplate">
-			<Setter.Value>
-				<DataTemplate>
-					<TextBlock Text="{Binding}"
-							   Style="{StaticResource MaterialTitleLarge}" />
-				</DataTemplate>
-			</Setter.Value>
-		</Setter>
-
 		<Setter Property="Background" Value="{ThemeResource SurfaceBrush}" />
 		<Setter Property="Foreground" Value="{ThemeResource OnSurfaceBrush}" />
-
-		<android:Setter Property="(toolkit:UIElementExtensions.Elevation)"
-						Value="{StaticResource MaterialCommandBarElevation}" />
-		<Setter Property="Height" Value="{StaticResource MaterialCommandBarHeight}" />
-
 		<Setter Property="HorizontalAlignment" Value="Stretch" />
 		<Setter Property="VerticalAlignment" Value="Top" />
 		<Setter Property="HorizontalContentAlignment" Value="Left" />
 		<Setter Property="VerticalContentAlignment" Value="Center" />
-
-		<Setter Property="OverflowButtonVisibility" Value="Collapsed" />
-		<Setter Property="IsDynamicOverflowEnabled" Value="False" />
-
-		<!-- Workaround for WinUI issue: https://github.com/microsoft/microsoft-ui-xaml/issues/6388 -->
-		<Setter Property="toolkit:CommandBarExtensions.NavigationCommand" Value="{x:Null}" />
-
-		<Setter Property="Template" Value="{StaticResource MaterialXamlCommandBarTemplate}" />
 	</Style>
+	<!-- Define the main Material CommandBar Style -->
 	<Style x:Key="MaterialCommandBarStyle"
 		   TargetType="CommandBar"
-		   BasedOn="{StaticResource MaterialBaseCommandBarStyle}">
-
-		<ios:Setter Property="Height" Value="NaN" />
-		<ios:Setter Property="Template"
-					Value="{StaticResource NativeM3CommandBarTemplate}" />
-		<android:Setter Property="Template"
-						Value="{StaticResource NativeM3CommandBarTemplate}" />
-	</Style>
-
+		   BasedOn="{StaticResource MaterialBaseCommandBarStyle}" />
+	<!-- Define default styles for AppBarButton and CommandBar -->
 	<Style x:Key="MaterialDefaultAppBarButtonStyle"
 		   TargetType="AppBarButton"
 		   BasedOn="{StaticResource MaterialAppBarButtonStyle}" />
-
 	<Style x:Key="MaterialDefaultCommandBarStyle"
 		   TargetType="CommandBar"
 		   BasedOn="{StaticResource MaterialCommandBarStyle}" />

src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/CommandBarSamplePage.xaml

@@ -6,44 +6,36 @@
 	  xmlns:sample="using:Uno.Themes.Samples"
 	  xmlns:android="http:/uno.ui/android"
 	  xmlns:ios="http:/uno.ui/ios"
+	  xmlns:smtx="using:ShowMeTheXAML"
 	  mc:Ignorable="d android ios"
 	  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
 	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 		<sample:SamplePageLayout>
-			<sample:SamplePageLayout.MaterialTemplate>
-				<DataTemplate>
-					<StackPanel>
-						<Grid BorderBrush="{StaticResource MaterialOnSurfaceBrush}"
-							  BorderThickness="1"
-							  android:Margin="12"
-							  ios:Margin="12"
-							  Padding="12">
-
-							<Button Content="Show Sample"
-									Click="ShowSampleInNestedFrame" />
-
-						</Grid>
-					</StackPanel>
-				</DataTemplate>
-			</sample:SamplePageLayout.MaterialTemplate>
 			<sample:SamplePageLayout.M3MaterialTemplate>
 				<DataTemplate>
 					<StackPanel>
-						<Grid BorderBrush="{StaticResource OnSurfaceBrush}"
-							  BorderThickness="1"
-							  android:Margin="12"
-							  ios:Margin="12"
-							  Padding="12">
-
-							<Button Content="Show Sample"
-									Click="ShowM3SampleInNestedFrame" />
-
+						<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+							<StackPanel>
+								<smtx:XamlDisplay Margin="16"
+												  UniqueKey="CommandBarSamplePage">
+									<CommandBar Content="Command Bar Sample"
+												Style="{StaticResource MaterialCommandBarStyle}">
+										<CommandBar.PrimaryCommands>
+											<AppBarButton Icon="Add"
+														  Label="Add" />
+											<AppBarButton Icon="Edit"
+														  Label="Edit" />
+											<AppBarButton Icon="Delete"
+														  Label="Delete" />
+										</CommandBar.PrimaryCommands>
+									</CommandBar>
+								</smtx:XamlDisplay>
+							</StackPanel>
 						</Grid>
 					</StackPanel>
 				</DataTemplate>
 			</sample:SamplePageLayout.M3MaterialTemplate>
 		</sample:SamplePageLayout>
 	</Grid>
 </Page>
-

src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/CommandBarSamplePage.xaml.cs

@@ -1,4 +1,4 @@
-using Uno.Themes.Samples.Content.NestedSamples;
+using Uno.Themes.Samples.Content.NestedSamples;
 
 namespace Uno.Themes.Samples.Content.Controls;
 
@@ -10,13 +10,4 @@ public CommandBarSamplePage()
 	{
 		this.InitializeComponent();
 	}
-	private void ShowSampleInNestedFrame(object sender, RoutedEventArgs e)
-	{
-		Shell.GetForCurrentView()?.ShowNestedSample<CommandBarSample_NestedPage1>(clearStack: true);
-	}
-
-	private void ShowM3SampleInNestedFrame(object sender, RoutedEventArgs e)
-	{
-		Shell.GetForCurrentView()?.ShowNestedSample<M3MaterialCommandBarSample_NestedPage1>(clearStack: true);
-	}
 }