Skip to content

Commit

Permalink
Merge pull request unoplatform#15310 from Youssef1313/issues/14032
Browse files Browse the repository at this point in the history 
fix: Fix navigation view back button styles
  • Loading branch information
@jeromelaban
jeromelaban authored Feb 1, 2024
2 parents c69f07c + 0589667 commit 6d6b8d7
Show file tree
Hide file tree
Showing 7 changed files with 69 additions and 113 deletions.
37 changes: 11 additions & 26 deletions src/Uno.UI.FluentTheme.v1/Resources/Version1/PriorityDefault/NavigationBackButton_v1.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,11 @@
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="Content" Value="&#xE72B;" />
<Setter Property="Margin" Value="4,2" />
<contract7Present:Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid"
Background="{TemplateBinding Background}"
contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
contract7NotPresent:CornerRadius="{ThemeResource ControlCornerRadius}">
Background="{TemplateBinding Background}">

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
Expand All @@ -43,9 +39,6 @@
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<VisualState.Setters>
<Setter Target="Content.(local:AnimatedIcon.State)" Value="PointerOver"/>
</VisualState.Setters>
</VisualState>

<VisualState x:Name="Pressed">
Expand All @@ -58,9 +51,6 @@
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<VisualState.Setters>
<Setter Target="Content.(local:AnimatedIcon.State)" Value="Pressed"/>
</VisualState.Setters>
</VisualState>

<VisualState x:Name="Disabled">
Expand All @@ -74,29 +64,24 @@
</VisualStateGroup>

</VisualStateManager.VisualStateGroups>
<local:AnimatedIcon x:Name="Content"
Height="16"
Width="16"
local:AnimatedIcon.State="Normal"
<FontIcon
x:Name="Content"
FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
Glyph="{TemplateBinding Content}"
MirroredWhenRightToLeft="True"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw">
<animatedvisuals:AnimatedBackVisualSource/>
<local:AnimatedIcon.FallbackIconSource>
<local:FontIconSource
FontSize="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FontSize}"
FontFamily="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FontFamily}"
Glyph="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}"
MirroredWhenRightToLeft="True"/>
</local:AnimatedIcon.FallbackIconSource>
</local:AnimatedIcon>
AutomationProperties.AccessibilityView="Raw" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="NavigationBackButtonSmallStyle" TargetType="Button" BasedOn="{StaticResource NavigationBackButtonNormalStyle}">
<Setter Property="Margin" Value="4,2,0,2" />
<Setter Property="FontSize" Value="20" />
<Setter Property="Height" Value="32" />
<Setter Property="Width" Value="32" />
</Style>
</ResourceDictionary>
21 changes: 5 additions & 16 deletions src/Uno.UI.FluentTheme.v1/themeresources_v1.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14845,12 +14845,10 @@
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="Content" Value="&#xE72B;" />
<Setter Property="Margin" Value="4,2" />
<contract7Present:Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}" contract7Present:CornerRadius="{TemplateBinding CornerRadius}" contract7NotPresent:CornerRadius="{ThemeResource ControlCornerRadius}">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
Expand All @@ -14863,9 +14861,6 @@
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<VisualState.Setters>
<Setter Target="Content.(controls:AnimatedIcon.State)" Value="PointerOver" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
Expand All @@ -14876,9 +14871,6 @@
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<VisualState.Setters>
<Setter Target="Content.(controls:AnimatedIcon.State)" Value="Pressed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
Expand All @@ -14889,19 +14881,16 @@
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<controls:AnimatedIcon x:Name="Content" Height="16" Width="16" local:AnimatedIcon.State="Normal" MirroredWhenRightToLeft="True" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw" xmlns:local="using:Microsoft.UI.Xaml.Controls">
<animatedvisuals:AnimatedBackVisualSource />
<controls:AnimatedIcon.FallbackIconSource>
<controls:FontIconSource FontSize="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FontSize}" FontFamily="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FontFamily}" Glyph="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" MirroredWhenRightToLeft="True" />
</controls:AnimatedIcon.FallbackIconSource>
</controls:AnimatedIcon>
<FontIcon x:Name="Content" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" Glyph="{TemplateBinding Content}" MirroredWhenRightToLeft="True" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="NavigationBackButtonSmallStyle" TargetType="Button" BasedOn="{StaticResource NavigationBackButtonNormalStyle}">
<Setter Property="Margin" Value="4,2,0,2" />
<Setter Property="FontSize" Value="20" />
<Setter Property="Height" Value="32" />
<Setter Property="Width" Value="32" />
</Style>
<Thickness x:Key="NavigationViewAutoSuggestBoxMargin">10,0,16,0</Thickness>
<Thickness x:Key="TopNavigationViewAutoSuggestBoxMargin">12,0,12,0</Thickness>
Expand Down
36 changes: 10 additions & 26 deletions src/Uno.UI.FluentTheme.v2/Resources/Version2/PriorityDefault/NavigationBackButton.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,11 @@
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="Content" Value="&#xE72B;" />
<Setter Property="Margin" Value="4,2" />
<contract7Present:Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid"
Background="{TemplateBinding Background}"
contract7Present:CornerRadius="{TemplateBinding CornerRadius}"
contract7NotPresent:CornerRadius="{ThemeResource ControlCornerRadius}">
Background="{TemplateBinding Background}">

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
Expand All @@ -43,9 +39,6 @@
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<VisualState.Setters>
<Setter Target="Content.(local:AnimatedIcon.State)" Value="PointerOver"/>
</VisualState.Setters>
</VisualState>

<VisualState x:Name="Pressed">
Expand All @@ -58,9 +51,6 @@
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<VisualState.Setters>
<Setter Target="Content.(local:AnimatedIcon.State)" Value="Pressed"/>
</VisualState.Setters>
</VisualState>

<VisualState x:Name="Disabled">
Expand All @@ -74,29 +64,23 @@
</VisualStateGroup>

</VisualStateManager.VisualStateGroups>
<local:AnimatedIcon x:Name="Content"
Height="16"
Width="16"
local:AnimatedIcon.State="Normal"
<FontIcon x:Name="Content"
FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
Glyph="{TemplateBinding Content}"
MirroredWhenRightToLeft="True"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw">
<animatedvisuals:AnimatedBackVisualSource/>
<local:AnimatedIcon.FallbackIconSource>
<local:FontIconSource
FontSize="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FontSize}"
FontFamily="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FontFamily}"
Glyph="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}"
MirroredWhenRightToLeft="True"/>
</local:AnimatedIcon.FallbackIconSource>
</local:AnimatedIcon>
AutomationProperties.AccessibilityView="Raw" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="NavigationBackButtonSmallStyle" TargetType="Button" BasedOn="{StaticResource NavigationBackButtonNormalStyle}">
<Setter Property="Margin" Value="4,2,0,2" />
<Setter Property="FontSize" Value="20" />
<Setter Property="Height" Value="32" />
<Setter Property="Width" Value="32" />
</Style>
</ResourceDictionary>
2 changes: 1 addition & 1 deletion ...tTheme.v2/Resources/Version2/PriorityDefault/NavigationBackButton_rs1_themeresources.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<x:Double x:Key="NavigationBackButtonWidth">40</x:Double>
<x:Double x:Key="NavigationBackButtonHeight">36</x:Double>
<x:Double x:Key="NavigationBackButtonHeight">40</x:Double>

<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Dark">
Expand Down
23 changes: 6 additions & 17 deletions src/Uno.UI.FluentTheme.v2/themeresources_v2.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17781,12 +17781,10 @@
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="Content" Value="&#xE72B;" />
<Setter Property="Margin" Value="4,2" />
<contract7Present:Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}" contract7Present:CornerRadius="{TemplateBinding CornerRadius}" contract7NotPresent:CornerRadius="{ThemeResource ControlCornerRadius}">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
Expand All @@ -17799,9 +17797,6 @@
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<VisualState.Setters>
<Setter Target="Content.(controls:AnimatedIcon.State)" Value="PointerOver" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
Expand All @@ -17812,9 +17807,6 @@
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<VisualState.Setters>
<Setter Target="Content.(controls:AnimatedIcon.State)" Value="Pressed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
Expand All @@ -17825,22 +17817,19 @@
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<controls:AnimatedIcon x:Name="Content" Height="16" Width="16" local:AnimatedIcon.State="Normal" MirroredWhenRightToLeft="True" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw" xmlns:local="using:Microsoft.UI.Xaml.Controls">
<animatedvisuals:AnimatedBackVisualSource />
<controls:AnimatedIcon.FallbackIconSource>
<controls:FontIconSource FontSize="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FontSize}" FontFamily="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FontFamily}" Glyph="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" MirroredWhenRightToLeft="True" />
</controls:AnimatedIcon.FallbackIconSource>
</controls:AnimatedIcon>
<FontIcon x:Name="Content" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" Glyph="{TemplateBinding Content}" MirroredWhenRightToLeft="True" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="NavigationBackButtonSmallStyle" TargetType="Button" BasedOn="{StaticResource NavigationBackButtonNormalStyle}">
<Setter Property="Margin" Value="4,2,0,2" />
<Setter Property="FontSize" Value="20" />
<Setter Property="Height" Value="32" />
<Setter Property="Width" Value="32" />
</Style>
<x:Double x:Key="NavigationBackButtonWidth">40</x:Double>
<x:Double x:Key="NavigationBackButtonHeight">36</x:Double>
<x:Double x:Key="NavigationBackButtonHeight">40</x:Double>
<Style TargetType="controls:NavigationView">
<Setter Property="PaneToggleButtonStyle" Value="{StaticResource PaneToggleButtonStyle}" />
<Setter Property="IsTabStop" Value="False" />
Expand Down
25 changes: 25 additions & 0 deletions src/Uno.UI.RuntimeTests/Tests/Windows_UI_Xaml_Controls/Given_Button.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,38 @@
using Microsoft.UI.Xaml.Media;
using Uno.UI.RuntimeTests.Helpers;
using static Private.Infrastructure.TestServices;
using Windows.Foundation;
using Microsoft.UI.Xaml.Markup;

namespace Uno.UI.RuntimeTests.Tests.Windows_UI_Xaml_Controls
{
[TestClass]
[RunsOnUIThread]
public class Given_Button
{
[TestMethod]
[DataRow(true)]
[DataRow(false)]
public async Task When_NavigationViewButtonStyles(bool useFluent)
{
using var _ = useFluent ? StyleHelper.UseFluentStyles() : null;

var normalBtn = (Button)XamlReader.Load("""
<Button xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Style="{StaticResource NavigationBackButtonNormalStyle}" />
""");
var normalBtnRect = await UITestHelper.Load(normalBtn);

var smallBtn = (Button)XamlReader.Load("""
<Button xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Style="{StaticResource NavigationBackButtonSmallStyle}" />
""");
var smallBtnRect = await UITestHelper.Load(smallBtn);

Assert.AreEqual(new Size(40, 40), new Size(normalBtnRect.Width, normalBtnRect.Height));
Assert.AreEqual(new Size(32, 32), new Size(smallBtnRect.Width, smallBtnRect.Height));
Assert.AreEqual(0, normalBtnRect.Left - smallBtnRect.Left);
Assert.AreEqual(8, normalBtnRect.Right - smallBtnRect.Right);
}

[TestMethod]
public async Task When_Enabled_Inside_Disabled_Control()
{
Expand Down
Loading

0 comments on commit 6d6b8d7

Please sign in to comment.