Merge pull request #1137 from unoplatform/dev/lebo/toggle-button-crash

unoplatform · Aug 15, 2023 · 2a042fd · 2a042fd
2 parents 164ca08 + d8553c7
commit 2a042fd
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 20 deletions.
diff --git a/src/library/Uno.Material/Styles/Application/Common/Converters.xaml b/src/library/Uno.Material/Styles/Application/Common/Converters.xaml
@@ -36,6 +36,10 @@
 								 NotNullValue="Visible"
 								 NullValue="Collapsed" />
 
+	<um:FromNullToValueConverter x:Key="MaterialNullToTransparent"
+								 NotNullValue="1"
+								 NullValue="0" />
+
 	<um:FromEmptyStringOrNullObjectToValueConverter x:Key="MaterialEmptyOrNullToVisible"
 													NotEmptyOrNullValue="Collapsed"
 													EmptyOrNullValue="Visible" />

diff --git a/src/library/Uno.Material/Styles/Controls/v2/ToggleButton.xaml b/src/library/Uno.Material/Styles/Controls/v2/ToggleButton.xaml
@@ -457,9 +457,6 @@
 		<Setter Property="HorizontalContentAlignment" Value="Center" />
 		<Setter Property="VerticalContentAlignment" Value="Center" />
 
-		<!-- Workaround for WinUI issue: https://github.com/microsoft/microsoft-ui-xaml/issues/6388 -->
-		<Setter Property="um:ControlExtensions.AlternateContent" Value="{x:Null}" />
-
 		<Setter Property="Template">
 			<Setter.Value>
 				<ControlTemplate TargetType="ToggleButton">
@@ -473,9 +470,9 @@
 								<VisualState x:Name="Normal" />
 								<VisualState x:Name="PointerOver">
 									<VisualState.Setters>
-										<Setter Target="ContentPresenter.Visibility" Value="Visible" />
+										<Setter Target="ContentPresenter.Opacity" Value="1" />
 										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource IconToggleButtonForegroundPointerOver}" />
-										<Setter Target="AlternateContentPresenter.Visibility" Value="Collapsed" />
+										<Setter Target="AlternateContentPresenter.Opacity" Value="0" />
 										<Setter Target="AlternateContentPresenter.Foreground" Value="{ThemeResource IconToggleButtonForegroundPointerOver}" />
 										<Setter Target="HoverOverlay.Opacity" Value="1" />
 										<Setter Target="RootGrid.Background" Value="{ThemeResource IconToggleButtonBackgroundPointerOver}" />
@@ -484,9 +481,9 @@
 								</VisualState>
 								<VisualState x:Name="Pressed">
 									<VisualState.Setters>
-										<Setter Target="ContentPresenter.Visibility" Value="Visible" />
+										<Setter Target="ContentPresenter.Opacity" Value="1" />
 										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource IconToggleButtonForegroundPressed}" />
-										<Setter Target="AlternateContentPresenter.Visibility" Value="Collapsed" />
+										<Setter Target="AlternateContentPresenter.Opacity" Value="0" />
 										<Setter Target="AlternateContentPresenter.Foreground" Value="{ThemeResource IconToggleButtonForegroundPressed}" />
 										<Setter Target="PressedOverlay.Opacity" Value="1" />
 										<Setter Target="RootGrid.Background" Value="{ThemeResource IconToggleButtonBackgroundPressed}" />
@@ -495,29 +492,31 @@
 								</VisualState>
 								<VisualState x:Name="Disabled">
 									<VisualState.Setters>
-										<Setter Target="ContentPresenter.Visibility" Value="Visible" />
+										<Setter Target="ContentPresenter.Opacity" Value="1" />
 										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource IconToggleButtonForegroundDisabled}" />
-										<Setter Target="AlternateContentPresenter.Visibility" Value="Collapsed" />
+										<Setter Target="AlternateContentPresenter.Opacity" Value="0" />
 										<Setter Target="AlternateContentPresenter.Foreground" Value="{ThemeResource IconToggleButtonForegroundDisabled}" />
 										<Setter Target="RootGrid.Background" Value="{ThemeResource IconToggleButtonBackgroundDisabled}" />
 										<Setter Target="RootGrid.BorderBrush" Value="{ThemeResource IconToggleButtonBorderBrushDisabled}" />
 									</VisualState.Setters>
 								</VisualState>
+								<!-- For the checked states, we need to also validate if AlternateContent is set first before changing opacity -->
+								<!-- https://github.com/unoplatform/Uno.Themes/issues/1132 -->
 								<VisualState x:Name="Checked">
 									<VisualState.Setters>
-										<Setter Target="ContentPresenter.Visibility" Value="Collapsed" />
+										<Setter Target="ContentPresenter.Opacity" Value="0" />
 										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource IconToggleButtonForegroundChecked}" />
-										<Setter Target="AlternateContentPresenter.Visibility" Value="Visible" />
+										<Setter Target="AlternateContentPresenter.Opacity" Value="{Binding Path=(um:ControlExtensions.AlternateContent), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToTransparent}, FallbackValue=1, TargetNullValue=1}" />
 										<Setter Target="AlternateContentPresenter.Foreground" Value="{ThemeResource IconToggleButtonForegroundChecked}" />
 										<Setter Target="RootGrid.Background" Value="{ThemeResource IconToggleButtonBackgroundChecked}" />
 										<Setter Target="RootGrid.BorderBrush" Value="{ThemeResource IconToggleButtonBorderBrushChecked}" />
 									</VisualState.Setters>
 								</VisualState>
 								<VisualState x:Name="CheckedPointerOver">
 									<VisualState.Setters>
-										<Setter Target="ContentPresenter.Visibility" Value="Collapsed" />
+										<Setter Target="ContentPresenter.Opacity" Value="0" />
 										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource IconToggleButtonForegroundCheckedPointerOver}" />
-										<Setter Target="AlternateContentPresenter.Visibility" Value="Visible" />
+										<Setter Target="AlternateContentPresenter.Opacity" Value="{Binding Path=(um:ControlExtensions.AlternateContent), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToTransparent}, FallbackValue=1, TargetNullValue=1}" />
 										<Setter Target="AlternateContentPresenter.Foreground" Value="{ThemeResource IconToggleButtonForegroundCheckedPointerOver}" />
 										<Setter Target="HoverOverlay.Opacity" Value="1" />
 										<Setter Target="RootGrid.Background" Value="{ThemeResource IconToggleButtonBackgroundCheckedPointerOver}" />
@@ -526,9 +525,9 @@
 								</VisualState>
 								<VisualState x:Name="CheckedPressed">
 									<VisualState.Setters>
-										<Setter Target="ContentPresenter.Visibility" Value="Collapsed" />
+										<Setter Target="ContentPresenter.Opacity" Value="0" />
 										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource IconToggleButtonForegroundCheckedPressed}" />
-										<Setter Target="AlternateContentPresenter.Visibility" Value="Visible" />
+										<Setter Target="AlternateContentPresenter.Opacity" Value="{Binding Path=(um:ControlExtensions.AlternateContent), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToTransparent}, FallbackValue=1, TargetNullValue=1}" />
 										<Setter Target="AlternateContentPresenter.Foreground" Value="{ThemeResource IconToggleButtonForegroundCheckedPressed}" />
 										<Setter Target="PressedOverlay.Opacity" Value="1" />
 										<Setter Target="RootGrid.Background" Value="{ThemeResource IconToggleButtonBackgroundCheckedPressed}" />
@@ -537,9 +536,9 @@
 								</VisualState>
 								<VisualState x:Name="CheckedDisabled">
 									<VisualState.Setters>
-										<Setter Target="ContentPresenter.Visibility" Value="Collapsed" />
+										<Setter Target="ContentPresenter.Opacity" Value="0" />
 										<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource IconToggleButtonForegroundCheckedDisabled}" />
-										<Setter Target="AlternateContentPresenter.Visibility" Value="Visible" />
+										<Setter Target="AlternateContentPresenter.Opacity" Value="{Binding Path=(um:ControlExtensions.AlternateContent), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource MaterialNullToTransparent}, FallbackValue=1, TargetNullValue=1}" />
 										<Setter Target="AlternateContentPresenter.Foreground" Value="{ThemeResource IconToggleButtonForegroundCheckedDisabled}" />
 										<Setter Target="RootGrid.Background" Value="{ThemeResource IconToggleButtonBackgroundCheckedDisabled}" />
 										<Setter Target="RootGrid.BorderBrush" Value="{ThemeResource IconToggleButtonBorderBrushCheckedDisabled}" />
@@ -605,11 +604,11 @@
 						<!-- Alternate Content -->
 						<ContentPresenter x:Name="AlternateContentPresenter"
 										  AutomationProperties.AccessibilityView="Raw"
-										  Content="{Binding Path=(um:ControlExtensions.AlternateContent), RelativeSource={RelativeSource TemplatedParent}}"
+										  Content="{Binding Path=(um:ControlExtensions.AlternateContent), RelativeSource={RelativeSource TemplatedParent}, FallbackValue=' ', TargetNullValue=' '}"
 										  Foreground="{TemplateBinding Foreground}"
 										  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
 										  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-										  Visibility="Collapsed" />
+										  Opacity="0"/>
 					</Grid>
 				</ControlTemplate>
 			</Setter.Value>

diff --git a/...samples/UWP/Uno.Themes.Samples.Shared/Content/Extensions/ControlExtensionsSamplePage.xaml b/...samples/UWP/Uno.Themes.Samples.Shared/Content/Extensions/ControlExtensionsSamplePage.xaml
@@ -127,7 +127,7 @@
 
 				<smtx:XamlDisplay UniqueKey="ControlExtensionsSamplePage_ToggleButtonIcon"
 								  Style="{StaticResource XamlDisplayBelowStyle}">
-					<ToggleButton Style="{StaticResource MaterialToggleButtonIconStyle}">
+					<ToggleButton Style="{StaticResource MaterialIconToggleButtonStyle}">
 						<ToggleButton.Content>
 							<PathIcon Data="{StaticResource Icon_more_horizontal}" />
 						</ToggleButton.Content>
@@ -137,6 +137,20 @@
 					</ToggleButton>
 				</smtx:XamlDisplay>
 
+				<smtx:XamlDisplay UniqueKey="ControlExtensionsSamplePage_ToggleButtonIconWithSymbolIcon_NoAlternateContent"
+								  Style="{StaticResource XamlDisplayBelowStyle}">
+					<ToggleButton Style="{StaticResource MaterialIconToggleButtonStyle}">
+						<ToggleButton.Content>
+							<SymbolIcon Symbol="Accept" />
+						</ToggleButton.Content>
+					</ToggleButton>
+				</smtx:XamlDisplay>
+
+				<smtx:XamlDisplay UniqueKey="ControlExtensionsSamplePage_ToggleButtonIconWithPathIconOnly_NoAlternateContent"
+								  Style="{StaticResource XamlDisplayBelowStyle}">
+					<ToggleButton Style="{StaticResource MaterialIconToggleButtonStyle}"
+								  Content="Hello" />
+				</smtx:XamlDisplay>
 			</StackPanel>
 		</StackPanel>
 	</ScrollViewer>