feat: add surface tint to tabbar (#508)

unoplatform · Mar 17, 2023 · c0e5680 · c0e5680
1 parent 7e80e66
commit c0e5680
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 12 deletions.
diff --git a/samples/Directory.Packages.props b/samples/Directory.Packages.props
@@ -19,12 +19,12 @@
     <PackageVersion Include="SkiaSharp.Views.Uno.WinUI" Version="2.88.2" />
     <PackageVersion Include="Uno.Core.Extensions.Compatibility" Version="4.0.1" />
     <PackageVersion Include="Uno.Core.Extensions.Logging.Singleton" Version="4.0.1" />
-    <PackageVersion Include="Uno.Cupertino" Version="2.5.2" />
-    <PackageVersion Include="Uno.Cupertino.WinUI" Version="2.5.2" />
+    <PackageVersion Include="Uno.Cupertino" Version="2.5.3" />
+    <PackageVersion Include="Uno.Cupertino.WinUI" Version="2.5.3" />
     <PackageVersion Include="Uno.Extensions.Logging.OSLog" Version="1.3.0" />
     <PackageVersion Include="Uno.Extensions.Logging.WebAssembly.Console" Version="1.4.0" />
-    <PackageVersion Include="Uno.Material" Version="2.5.2" />
-    <PackageVersion Include="Uno.Material.WinUI" Version="2.5.2" />
+    <PackageVersion Include="Uno.Material" Version="2.5.3" />
+    <PackageVersion Include="Uno.Material.WinUI" Version="2.5.3" />
     <PackageVersion Include="Uno.UI" Version="4.7.37" />
     <PackageVersion Include="Uno.UI.Adapter.Microsoft.Extensions.Logging" Version="4.5.9" />
     <PackageVersion Include="Uno.UI.RemoteControl" Version="4.7.37" />

diff --git a/src/Directory.Packages.props b/src/Directory.Packages.props
@@ -7,13 +7,13 @@
     <PackageVersion Include="Uno.Core.Extensions.Collections" Version="4.0.1" />
     <PackageVersion Include="Uno.Core.Extensions.Logging.Singleton" Version="4.0.1" />
     <PackageVersion Include="Uno.Core.Extensions.Logging" Version="4.0.1" />
-    <PackageVersion Include="Uno.Cupertino" Version="2.5.2" />
-    <PackageVersion Include="Uno.Cupertino.WinUI" Version="2.5.2" />
+    <PackageVersion Include="Uno.Cupertino" Version="2.5.3" />
+    <PackageVersion Include="Uno.Cupertino.WinUI" Version="2.5.3" />
     <PackageVersion Include="Uno.Extensions.Markup.Generators" Version="1.0.0-dev.166" />
     <PackageVersion Include="Uno.SourceGenerationTasks" Version="4.2.0" />
     <PackageVersion Include="Uno.WinUI.Markup" Version="4.6.0-dev.16" />
-    <PackageVersion Include="Uno.Material" Version="2.5.2" />
-    <PackageVersion Include="Uno.Material.WinUI" Version="2.5.2" />
+    <PackageVersion Include="Uno.Material" Version="2.5.3" />
+    <PackageVersion Include="Uno.Material.WinUI" Version="2.5.3" />
     <PackageVersion Include="Uno.UI" Version="4.7.37" />
     <PackageVersion Include="Uno.WinUI" Version="4.7.37" />
     <PackageVersion Include="Uno.XamlMerge.Task" Version="1.1.0-dev.12" />

diff --git a/src/library/Uno.Toolkit.Material/Styles/Controls/v2/TabBar.xaml b/src/library/Uno.Toolkit.Material/Styles/Controls/v2/TabBar.xaml
@@ -45,11 +45,80 @@
 
 	<!--#region TabBar Styles-->
 
+	<Style x:Key="BaseMaterialTabBarStyle"
+		   BasedOn="{StaticResource DefaultTabBarStyle}"
+		   TargetType="utu:TabBar">
 
+		<Setter Property="um:ControlExtensions.TintedBackground"
+				Value="{x:Null}" />
+		<Setter Property="um:ControlExtensions.IsTintEnabled"
+				Value="True" />
+		<Setter Property="IsTabStop"
+				Value="False" />
+		<Setter Property="ItemsPanel">
+			<Setter.Value>
+				<ItemsPanelTemplate>
+					<utu:TabBarListPanel />
+				</ItemsPanelTemplate>
+			</Setter.Value>
+		</Setter>
+		<Setter Property="ItemContainerStyle"
+				Value="{StaticResource DefaultTabBarItemStyle}" />
+		<Setter Property="SelectionIndicatorPresenterStyle"
+				Value="{StaticResource DefaultTabBarSelectionIndicatorPresenterStyle}" />
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="utu:TabBar">
+					<Grid x:Name="TabBarGrid"
+						  Background="{Binding Path=(um:ControlExtensions.TintedBackground), RelativeSource={RelativeSource TemplatedParent}}"
+						  BorderBrush="{TemplateBinding BorderBrush}"
+						  BorderThickness="{TemplateBinding BorderThickness}">
+						<VisualStateManager.VisualStateGroups>
+							<VisualStateGroup x:Name="OrientationStates">
+								<VisualState x:Name="Horizontal">
+									<VisualState.Setters>
+										<Setter Target="TabBarGrid.Height"
+												Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
+										<Setter Target="SelectionIndicatorPresenter.VerticalContentAlignment"
+												Value="Stretch" />
+										<Setter Target="SelectionIndicatorPresenter.HorizontalContentAlignment"
+												Value="Left" />
+									</VisualState.Setters>
+								</VisualState>
+								<VisualState x:Name="Vertical">
+									<VisualState.Setters>
+										<Setter Target="TabBarGrid.Width"
+												Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}" />
+										<Setter Target="SelectionIndicatorPresenter.VerticalContentAlignment"
+												Value="Top" />
+										<Setter Target="SelectionIndicatorPresenter.HorizontalContentAlignment"
+												Value="Stretch" />
+									</VisualState.Setters>
+								</VisualState>
+							</VisualStateGroup>
+						</VisualStateManager.VisualStateGroups>
+						<ItemsPresenter x:Name="TabBarItemsPresenter"
+										Padding="{TemplateBinding Padding}" />
+						<utu:TabBarSelectionIndicatorPresenter x:Name="SelectionIndicatorPresenter"
+															   Content="{TemplateBinding SelectionIndicatorContent}"
+															   ContentTemplate="{TemplateBinding SelectionIndicatorContentTemplate}"
+															   Style="{TemplateBinding SelectionIndicatorPresenterStyle}"
+															   IndicatorTransitionMode="{TemplateBinding SelectionIndicatorTransitionMode}"
+															   Foreground="{TemplateBinding Foreground}"
+															   Owner="{Binding RelativeSource={RelativeSource TemplatedParent}}"
+															   AutomationProperties.AutomationId="SelectionIndicatorPresenter"
+															   Opacity="0" />
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
 
 	<Style x:Key="MaterialVerticalTabBarStyle"
-		   BasedOn="{StaticResource DefaultTabBarStyle}"
+		   BasedOn="{StaticResource BaseMaterialTabBarStyle}"
 		   TargetType="utu:TabBar">
+		<Setter Property="um:ControlExtensions.Elevation"
+				Value="1" />
 		<Setter Property="Background"
 				Value="{ThemeResource SurfaceBrush}" />
 		<Setter Property="Orientation"
@@ -63,8 +132,10 @@
 	</Style>
 
 	<Style x:Key="MaterialBottomTabBarStyle"
-		   BasedOn="{StaticResource DefaultTabBarStyle}"
+		   BasedOn="{StaticResource BaseMaterialTabBarStyle}"
 		   TargetType="utu:TabBar">
+		<Setter Property="um:ControlExtensions.Elevation"
+				Value="1" />
 		<Setter Property="Background"
 				Value="{ThemeResource SurfaceBrush}" />
 		<Setter Property="Orientation"
@@ -78,7 +149,7 @@
 	</Style>
 
 	<Style x:Key="MaterialTopTabBarStyle"
-		   BasedOn="{StaticResource DefaultTabBarStyle}"
+		   BasedOn="{StaticResource BaseMaterialTabBarStyle}"
 		   TargetType="utu:TabBar">
 		<Setter Property="Background"
 				Value="{ThemeResource BackgroundBrush}" />
@@ -105,7 +176,7 @@
 	</Style>
 
 	<Style x:Key="MaterialColoredTopTabBarStyle"
-		   BasedOn="{StaticResource DefaultTabBarStyle}"
+		   BasedOn="{StaticResource BaseMaterialTabBarStyle}"
 		   TargetType="utu:TabBar">
 		<Setter Property="Background"
 				Value="{ThemeResource PrimaryBrush}" />