Skip to content

Commit

Permalink
fix: Removing Tint Color (#1307)
Browse files Browse the repository at this point in the history
(cherry picked from commit d380d7d)
  • Loading branch information
iurycarlos authored and mergify[bot] committed Jan 29, 2024
1 parent 5a164fd commit f785d59
Show file tree
Hide file tree
Showing 6 changed files with 9 additions and 260 deletions.
Binary file removed doc/assets/material-elevation-buttons.png
Binary file not shown.
39 changes: 6 additions & 33 deletions doc/material-controls-extensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,25 +53,13 @@ It's control specific and for now, you can only use it with the `ToggleButton` c

This feature allows to set the level of elevation to depict on the supported control.

Setting the elevation on [supported controls](#supported-controls) can result in changes to both the shadow and the [surface tint](#surface-tint).
Setting the elevation on [supported controls](#supported-controls) can result in changes to shadow.

[Material Design Elevation Guidance](https://m3.material.io/styles/elevation/overview)

## Surface Tint

The surface tint properties allow for customization of how elevation can be depicted on certain controls. While the Background of a control remains static, the surface color can change based on the level of elevation.

### TintedBackground

This is a readonly property that will provide a SolidColorBrush depicting the control's current background color overlayed with the surface tint color at a certain opacity based on the elevation of the control.

### IsTintEnabled

This feature allows for enabling or disabling the surface tint that may be applied to an elevated control. When `IsTintEnabled` is `false`, the `TintedBackground` property will remain the same value as the control's background color.

### Example Usage for `Button`

The `ElevatedButtonStyle` in Uno Material supports elevation and surface tints through the use of the `TintedBackground`, `IsTintEnabled`, and `Elevation` attached properties.
The `ElevatedButtonStyle` in Uno Material supports elevation through the use of the `Elevation` attached property.

`ElevatedButtonStyle` contains the following `Setter`s:

Expand All @@ -80,22 +68,10 @@ The `ElevatedButtonStyle` in Uno Material supports elevation and surface tints t

<Setter Property="um:ControlExtensions.Elevation"
Value="1" />
<Setter Property="um:ControlExtensions.IsTintEnabled"
Value="True" />
...
```

Within the `ControlTemplate` of the `ElevatedButtonStyle`, instead of performing a `TemplateBinding` to the `Background` property of the `Button`, we instead bind to the `TintedBackground` attached property:

```xml
<Grid x:Name="Root"
...
Background="{Binding Path=(um:ControlExtensions.TintedBackground), RelativeSource={RelativeSource TemplatedParent}}">
<!-- Remaining content omitted for brevity -->
</Grid>
```

Applying the surface tint for elevated controls is optional and must be explicitly enabled through the use of the `IsTintEnabled` attached property. Below is an example of how an elevated control may appear with or without a surface tint:
Below is an example of how an elevated control may appear:

```xml
<StackPanel Spacing="8">
Expand All @@ -122,16 +98,13 @@ Applying the surface tint for elevated controls is optional and must be explicit

The above XAML will produce the following result:

![Uno Material Elevation Buttons with Tint Enabled](assets/material-elevation-buttons.png)

If we were to alter the XAML above and set `um:ControlExtensions.IsTintEnabled="False"` on each of the buttons, we would see elevated buttons without tints:

![Uno Material Elevation Buttons with Tint Disabled](assets/material-elevation-buttons-shadow-only.png)
![Uno Material Elevation Buttons](assets/material-elevation-buttons-shadow-only.png)

### Supported Controls

The following control styles have support for surface tint:
The following control styles have support for elevation:

| Control | Supporting Styles |
|----------|-----------------------|
| `Button` | `ElevatedButtonStyle` |
|----------|-----------------------|
43 changes: 2 additions & 41 deletions src/library/Uno.Material/Extensions/ControlExtensions.cs
Original file line number Diff line number Diff line change
Expand Up @@ -82,58 +82,19 @@ public static class ControlExtensions
#region DependencyProperty: Elevation

/// <summary>
/// Gets or sets the level of elevation to depict for the attached view. In Material, elevation can be used to drive both the shadow and the surface tint color (https://m3.material.io/styles/elevation/overview)
/// Gets or sets the level of elevation to depict for the attached view.
/// </summary>
public static DependencyProperty ElevationProperty { [DynamicDependency(nameof(ElevationProperty))] get; } = DependencyProperty.RegisterAttached(
"Elevation",
typeof(int),
typeof(ControlExtensions),
new PropertyMetadata(0, OnElevationChanged));
new PropertyMetadata(0));

[DynamicDependency(nameof(SetElevation))]
public static int GetElevation(Control obj) => (int)obj.GetValue(ElevationProperty);
[DynamicDependency(nameof(GetElevation))]
public static void SetElevation(Control obj, int value) => obj.SetValue(ElevationProperty, value);

#endregion

#region DependencyProperty: TintedBackground
/// <summary>
/// Gets or sets the SolidColorBrush to use when depicting a surface tint on an elevated view.
/// </summary>
public static DependencyProperty TintedBackgroundProperty { [DynamicDependency(nameof(GetTintedBackground))] get; } = DependencyProperty.RegisterAttached(
"TintedBackground",
typeof(SolidColorBrush),
typeof(ControlExtensions),
new PropertyMetadata(default(SolidColorBrush)));

[DynamicDependency(nameof(SetTintedBackground))]
public static SolidColorBrush GetTintedBackground(UIElement obj) => (SolidColorBrush)obj.GetValue(TintedBackgroundProperty);
[DynamicDependency(nameof(GetTintedBackground))]
public static void SetTintedBackground(UIElement obj, SolidColorBrush value) => obj.SetValue(TintedBackgroundProperty, value);

#endregion
#region DependencyProperty: IsTintEnabled
/// <summary>
/// Gets or sets whether or not the SurfaceTintColor should be applied for elevated views
/// </summary>
public static DependencyProperty IsTintEnabledProperty { [DynamicDependency(nameof(GetIsTintEnabled))] get; } = DependencyProperty.RegisterAttached(
"IsTintEnabled",
typeof(bool),
typeof(ControlExtensions),
new PropertyMetadata(false, OnIsTintEnabledChanged));

[DynamicDependency(nameof(SetIsTintEnabled))]
public static bool GetIsTintEnabled(UIElement obj) => (bool)obj.GetValue(IsTintEnabledProperty);
[DynamicDependency(nameof(GetIsTintEnabled))]
public static void SetIsTintEnabled(UIElement obj, bool value) => obj.SetValue(IsTintEnabledProperty, value);

#endregion

private static void OnElevationChanged(DependencyObject element, DependencyPropertyChangedEventArgs e)
=> SurfaceTintExtensions.OnElevationChanged(element, (int)e.NewValue);

private static void OnIsTintEnabledChanged(DependencyObject element, DependencyPropertyChangedEventArgs e)
=> SurfaceTintExtensions.OnIsTintEnabledChanged(element, (bool)e.NewValue);
}
}
179 changes: 0 additions & 179 deletions src/library/Uno.Material/Extensions/SurfaceTintExtensions.cs

This file was deleted.

5 changes: 1 addition & 4 deletions src/library/Uno.Material/Styles/Controls/v2/Button.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
<x:String x:Key="ButtonIconVerticalAlignment">Stretch</x:String>
<x:String x:Key="IconButtonEllipseVerticalAlignment">Stretch</x:String>
<x:String x:Key="IconButtonEllipseHorizontalAlignment">Stretch</x:String>
<x:Boolean x:Key="ElevatedButtonIsTintEnabled">True</x:Boolean>

<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
Expand Down Expand Up @@ -409,8 +408,6 @@
<Setter Property="Foreground" Value="{ThemeResource ElevatedButtonForeground}" />
<Setter Property="Background" Value="{ThemeResource ElevatedButtonBackground}" />
<Setter Property="um:ControlExtensions.Elevation" Value="{ThemeResource ElevatedButtonElevation}" />
<Setter Property="um:ControlExtensions.TintedBackground" Value="{x:Null}" />
<Setter Property="um:ControlExtensions.IsTintEnabled" Value="{StaticResource ElevatedButtonIsTintEnabled}" />
<Setter Property="BorderBrush" Value="{ThemeResource ElevatedButtonBorderBrush}" />

<Setter Property="Template">
Expand Down Expand Up @@ -490,7 +487,7 @@
</VisualStateManager.VisualStateGroups>

<Grid x:Name="Root"
Background="{Binding Path=(um:ControlExtensions.TintedBackground), RelativeSource={RelativeSource TemplatedParent}}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
Expand Down
3 changes: 0 additions & 3 deletions src/library/Uno.Themes.WinUI.Markup/Theme/Button.cs
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,6 @@ public static partial class Foreground
[ResourceKeyDefinition(typeof(Brush), "ElevatedButtonForeground")]
public static ThemeResourceKey<Brush> Default => new("ElevatedButtonForeground");
}

[ResourceKeyDefinition(typeof(bool), "ElevatedButtonIsTintEnabled")]
public static StaticResourceKey<bool> IsTintEnabled => new("ElevatedButtonIsTintEnabled");
}

public static partial class Filled
Expand Down

0 comments on commit f785d59

Please sign in to comment.