Skip to content

Commit

Permalink
fix: material appbarbutton styles + converter bug (#1473)
Browse files Browse the repository at this point in the history
  • Loading branch information
kazo0 authored Sep 16, 2024
1 parent 2ec07f4 commit 1724854
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 100 deletions.
96 changes: 96 additions & 0 deletions src/library/Uno.Material/Styles/Controls/v2/AppBarButton.xaml
Original file line number Diff line number Diff line change
@@ -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>
100 changes: 2 additions & 98 deletions src/library/Uno.Material/Styles/Controls/v2/CommandBar.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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}" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit 1724854

Please sign in to comment.