From b16301a9a4963a1d0e58cde54ac3a71ec1de8697 Mon Sep 17 00:00:00 2001
From: Steve Bilogan <steve.bilogan@gmail.com>
Date: Mon, 16 Sep 2024 09:17:08 -0400
Subject: [PATCH] fix: material appbarbutton styles + converter bug (#1473)

(cherry picked from commit 17248545bfd6d2e5c53a15604eee495b70977523)
---
 .../Styles/Controls/v2/AppBarButton.xaml      |  96 +++++++++++++++++
 .../Styles/Controls/v2/CommandBar.xaml        | 100 +-----------------
 .../Applications/Common/Converters.xaml       |   4 +-
 3 files changed, 100 insertions(+), 100 deletions(-)
 create mode 100644 src/library/Uno.Material/Styles/Controls/v2/AppBarButton.xaml

diff --git a/src/library/Uno.Material/Styles/Controls/v2/AppBarButton.xaml b/src/library/Uno.Material/Styles/Controls/v2/AppBarButton.xaml
new file mode 100644
index 000000000..316f52e74
--- /dev/null
+++ b/src/library/Uno.Material/Styles/Controls/v2/AppBarButton.xaml
@@ -0,0 +1,96 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+					xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+					xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+					xmlns:um="using:Uno.Material"
+					xmlns:toolkit="using:Uno.UI.Toolkit"
+					xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+					xmlns:android="http://uno.ui/android"
+					xmlns:ios="http://uno.ui/ios"
+					xmlns:uuc="using:Uno.UI.Controls"
+					mc:Ignorable="android ios">
+	<Style x:Key="MaterialAppBarButtonStyle"
+		   TargetType="AppBarButton">
+		<Setter Property="Background" Value="{ThemeResource AppBarButtonBackground}" />
+		<Setter Property="Foreground" Value="{ThemeResource AppBarButtonForeground}" />
+		<Setter Property="BorderBrush" Value="{ThemeResource AppBarButtonBorderBrush}" />
+		<Setter Property="HorizontalAlignment" Value="Left" />
+		<Setter Property="VerticalAlignment" Value="Top" />
+		<Setter Property="Height" Value="{ThemeResource AppBarButtonHeight}" />
+		<Setter Property="Width" Value="{ThemeResource AppBarButtonWidth}" />
+		<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
+		<Setter Property="FontWeight" Value="Normal" />
+		<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
+		<Setter Property="FocusVisualMargin" Value="-3" />
+		<Setter Property="AllowFocusOnInteraction" Value="False" />
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="AppBarButton">
+					<um:Ripple Feedback="{TemplateBinding Foreground}"
+							   FeedbackOpacity="{StaticResource PressedOpacity}"
+							   MinWidth="{TemplateBinding MinWidth}"
+							   MaxWidth="{TemplateBinding MaxWidth}">
+						<Grid x:Name="Root"
+							  Background="Transparent">
+							<VisualStateManager.VisualStateGroups>
+								<VisualStateGroup x:Name="CommonStates">
+									<VisualState x:Name="Normal" />
+
+									<VisualState x:Name="PointerOver">
+										<VisualState.Setters>
+											<Setter Target="AppBarButtonInnerBorder.Background" Value="{ThemeResource AppBarButtonBackgroundPointerOver}" />
+											<Setter Target="AppBarButtonInnerBorder.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPointerOver}" />
+											<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
+										</VisualState.Setters>
+									</VisualState>
+
+									<VisualState x:Name="Pressed">
+										<VisualState.Setters>
+											<Setter Target="AppBarButtonInnerBorder.Background" Value="{ThemeResource AppBarButtonBackgroundPressed}" />
+											<Setter Target="AppBarButtonInnerBorder.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPressed}" />
+											<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
+										</VisualState.Setters>
+									</VisualState>
+
+									<VisualState x:Name="Disabled">
+										<VisualState.Setters>
+											<Setter Target="AppBarButtonInnerBorder.Background" Value="{ThemeResource AppBarButtonBackgroundDisabled}" />
+											<Setter Target="AppBarButtonInnerBorder.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushDisabled}" />
+											<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
+										</VisualState.Setters>
+									</VisualState>
+								</VisualStateGroup>
+							</VisualStateManager.VisualStateGroups>
+
+							<Border x:Name="AppBarButtonInnerBorder"
+									Margin="{ThemeResource AppBarButtonInnerBorderMargin}"
+									Background="{TemplateBinding Background}"
+									BorderBrush="{TemplateBinding BorderBrush}"
+									BorderThickness="{TemplateBinding BorderThickness}"
+									Control.IsTemplateFocusTarget="True" />
+
+							<Grid x:Name="ContentRoot"
+								  VerticalAlignment="Center"
+								  HorizontalAlignment="Center">
+								<!-- UNO WORKAROUND: The ViewBox center should be horizontal Stretch but the Grid aligns the content left -->
+								<Viewbox x:Name="ContentViewbox"
+										 MaxHeight="{ThemeResource AppBarButtonContentHeight}"
+										 MaxWidth="{ThemeResource AppBarButtonContentHeight}"
+										 VerticalAlignment="Center"
+										 HorizontalAlignment="Center"
+										 AutomationProperties.AccessibilityView="Raw">
+									<ContentPresenter x:Name="Content"
+													  Content="{TemplateBinding Icon}"
+													  Foreground="{TemplateBinding Foreground}" />
+								</Viewbox>
+							</Grid>
+						</Grid>
+					</um:Ripple>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
+
+	<Style x:Key="MaterialDefaultAppBarButtonStyle"
+		   TargetType="AppBarButton"
+		   BasedOn="{StaticResource MaterialAppBarButtonStyle}" />
+</ResourceDictionary>
diff --git a/src/library/Uno.Material/Styles/Controls/v2/CommandBar.xaml b/src/library/Uno.Material/Styles/Controls/v2/CommandBar.xaml
index 354430151..3541f309b 100644
--- a/src/library/Uno.Material/Styles/Controls/v2/CommandBar.xaml
+++ b/src/library/Uno.Material/Styles/Controls/v2/CommandBar.xaml
@@ -9,100 +9,6 @@
 					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>
-
-	<Style x:Key="MaterialAppBarButtonStyle"
-		   TargetType="AppBarButton">
-		<Setter Property="Background" Value="{ThemeResource AppBarButtonBackground}" />
-		<Setter Property="Foreground" Value="{ThemeResource AppBarButtonForeground}" />
-		<Setter Property="BorderBrush" Value="{ThemeResource AppBarButtonBorderBrush}" />
-		<Setter Property="HorizontalAlignment" Value="Left" />
-		<Setter Property="VerticalAlignment" Value="Top" />
-		<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
-		<Setter Property="FontWeight" Value="Normal" />
-		<Setter Property="Width" Value="68" />
-		<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
-		<Setter Property="FocusVisualMargin" Value="-3" />
-		<Setter Property="AllowFocusOnInteraction" Value="False" />
-		<Setter Property="Template">
-			<Setter.Value>
-				<ControlTemplate TargetType="AppBarButton">
-					<um:Ripple Feedback="{TemplateBinding Foreground}"
-							   FeedbackOpacity="{StaticResource PressedOpacity}"
-							   MinWidth="{TemplateBinding MinWidth}"
-							   MaxWidth="{TemplateBinding MaxWidth}">
-						<Grid x:Name="Root"
-							  Background="Transparent">
-							<VisualStateManager.VisualStateGroups>
-								<VisualStateGroup x:Name="CommonStates">
-									<VisualState x:Name="Normal" />
-
-									<VisualState x:Name="PointerOver">
-										<VisualState.Setters>
-											<Setter Target="AppBarButtonInnerBorder.Background" Value="{ThemeResource AppBarButtonBackgroundPointerOver}" />
-											<Setter Target="AppBarButtonInnerBorder.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPointerOver}" />
-											<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
-										</VisualState.Setters>
-									</VisualState>
-
-									<VisualState x:Name="Pressed">
-										<VisualState.Setters>
-											<Setter Target="AppBarButtonInnerBorder.Background" Value="{ThemeResource AppBarButtonBackgroundPressed}" />
-											<Setter Target="AppBarButtonInnerBorder.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPressed}" />
-											<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
-										</VisualState.Setters>
-									</VisualState>
-
-									<VisualState x:Name="Disabled">
-										<VisualState.Setters>
-											<Setter Target="AppBarButtonInnerBorder.Background" Value="{ThemeResource AppBarButtonBackgroundDisabled}" />
-											<Setter Target="AppBarButtonInnerBorder.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushDisabled}" />
-											<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
-										</VisualState.Setters>
-									</VisualState>
-								</VisualStateGroup>
-							</VisualStateManager.VisualStateGroups>
-
-							<Border x:Name="AppBarButtonInnerBorder"
-									Margin="{ThemeResource AppBarButtonInnerBorderMargin}"
-									Background="{TemplateBinding Background}"
-									BorderBrush="{TemplateBinding BorderBrush}"
-									BorderThickness="{TemplateBinding BorderThickness}"
-									Control.IsTemplateFocusTarget="True" />
-
-							<Grid x:Name="ContentRoot"
-								  MinHeight="{ThemeResource AppBarThemeMinHeight}">
-
-								<Grid.ColumnDefinitions>
-									<ColumnDefinition Width="*" />
-									<ColumnDefinition Width="Auto" />
-									<ColumnDefinition Width="Auto" />
-								</Grid.ColumnDefinitions>
-
-								<Grid.RowDefinitions>
-									<RowDefinition Height="*" />
-								</Grid.RowDefinitions>
-								<!-- UNO WORKAROUND: The ViewBox center should be horizontal Stretch but the Grid aligns the content left -->
-								<Viewbox x:Name="ContentViewbox"
-										 Height="{ThemeResource AppBarButtonContentHeight}"
-										 Width="{ThemeResource AppBarButtonContentHeight}"
-										 VerticalAlignment="Center"
-										 HorizontalAlignment="Center"
-										 AutomationProperties.AccessibilityView="Raw">
-									<ContentPresenter x:Name="Content"
-													  Content="{TemplateBinding Icon}"
-													  Foreground="{TemplateBinding Foreground}" />
-								</Viewbox>
-							</Grid>
-						</Grid>
-					</um:Ripple>
-				</ControlTemplate>
-			</Setter.Value>
-		</Setter>
-	</Style>
-
 	<!-- Define the base style for Material CommandBar -->
 	<Style x:Key="MaterialBaseCommandBarStyle"
 		   TargetType="CommandBar">
@@ -113,14 +19,12 @@
 		<Setter Property="HorizontalContentAlignment" Value="Left" />
 		<Setter Property="VerticalContentAlignment" Value="Center" />
 	</Style>
+	
 	<!-- Define the main Material CommandBar Style -->
 	<Style x:Key="MaterialCommandBarStyle"
 		   TargetType="CommandBar"
 		   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}" />
diff --git a/src/library/Uno.Themes/Styles/Applications/Common/Converters.xaml b/src/library/Uno.Themes/Styles/Applications/Common/Converters.xaml
index 62054e89e..28d9cb9ca 100644
--- a/src/library/Uno.Themes/Styles/Applications/Common/Converters.xaml
+++ b/src/library/Uno.Themes/Styles/Applications/Common/Converters.xaml
@@ -43,8 +43,8 @@
 								 NullValue="Collapsed" />
 
 	<ut:FromNullToValueConverter x:Key="NullToVisibleConverter"
-								 NotNullValue="Visible"
-								 NullValue="Collapsed" />
+								 NotNullValue="Collapsed"
+								 NullValue="Visible" />
 
 	<ut:FromNullToValueConverter x:Key="NullToTransparentConverter"
 								 NotNullValue="1"