Skip to content

Commit

Permalink
fix: Templatebound Margin to remove hardcoded margin (#715)
Browse files Browse the repository at this point in the history 
(cherry picked from commit df9e747)

# Conflicts:
# src/library/Uno.Toolkit.Material/Styles/Controls/v2/CardContentControl.xaml
  • Loading branch information
@agneszitte
agneszitte committed Aug 31, 2023
1 parent d771ab4 commit d761bac
Showing 1 changed file with 148 additions and 107 deletions.
255 changes: 148 additions & 107 deletions src/library/Uno.Toolkit.Material/Styles/Controls/v2/CardContentControl.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,55 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:toolkit="using:Uno.UI.Toolkit"
xmlns:um="using:Uno.Material"
xmlns:utu="using:Uno.Toolkit.UI"
xmlns:toolkit="using:Uno.UI.Toolkit">
xmlns:utu="using:Uno.Toolkit.UI">
<ResourceDictionary.ThemeDictionaries>
<!-- Card Brushes Theme Resources -->
<ResourceDictionary x:Key="Default">
<!-- Filled -->
<StaticResource x:Key="FilledCardContentBackground" ResourceKey="SurfaceBrush" />
<StaticResource x:Key="FilledCardContentBorderBrush" ResourceKey="SystemControlTransparentBrush" />
<StaticResource x:Key="FilledCardContentBorderBrushPointerOver" ResourceKey="OnSurfaceHoverBrush" />
<StaticResource x:Key="FilledCardContentBorderBrushFocused" ResourceKey="OnSurfaceFocusedBrush" />
<StaticResource x:Key="FilledCardContentBorderBrushPressed" ResourceKey="OnSurfacePressedBrush" />

<!-- Outlined -->
<StaticResource x:Key="OutlinedCardContentBackground" ResourceKey="SurfaceBrush" />
<StaticResource x:Key="OutlinedCardContentBorderBrush" ResourceKey="OutlineBrush" />

<!-- Elevated -->
<StaticResource x:Key="ElevatedCardContentBackground" ResourceKey="SurfaceBrush" />
<StaticResource x:Key="ElevatedCardContentBorderBrush" ResourceKey="SystemControlTransparentBrush" />
<StaticResource x:Key="ElevatedCardContentBorderBrushPointerOver" ResourceKey="OnSurfaceHoverBrush" />
<StaticResource x:Key="ElevatedCardContentBorderBrushFocused" ResourceKey="OnSurfaceFocusedBrush" />
<StaticResource x:Key="ElevatedCardContentBorderBrushPressed" ResourceKey="OnSurfacePressedBrush" />
</ResourceDictionary>

<ResourceDictionary x:Key="Light">
<!-- Filled -->
<StaticResource x:Key="FilledCardContentBackground" ResourceKey="SurfaceBrush" />
<StaticResource x:Key="FilledCardContentBorderBrush" ResourceKey="SystemControlTransparentBrush" />
<StaticResource x:Key="FilledCardContentBorderBrushPointerOver" ResourceKey="OnSurfaceHoverBrush" />
<StaticResource x:Key="FilledCardContentBorderBrushFocused" ResourceKey="OnSurfaceFocusedBrush" />
<StaticResource x:Key="FilledCardContentBorderBrushPressed" ResourceKey="OnSurfacePressedBrush" />

<!-- Outlined -->
<StaticResource x:Key="OutlinedCardContentBackground" ResourceKey="SurfaceBrush" />
<StaticResource x:Key="OutlinedCardContentBorderBrush" ResourceKey="OutlineBrush" />

<!-- Elevated -->
<StaticResource x:Key="ElevatedCardContentBackground" ResourceKey="SurfaceBrush" />
<StaticResource x:Key="ElevatedCardContentBorderBrush" ResourceKey="SystemControlTransparentBrush" />
<StaticResource x:Key="ElevatedCardContentBorderBrushPointerOver" ResourceKey="OnSurfaceHoverBrush" />
<StaticResource x:Key="ElevatedCardContentBorderBrushFocused" ResourceKey="OnSurfaceFocusedBrush" />
<StaticResource x:Key="ElevatedCardContentBorderBrushPressed" ResourceKey="OnSurfacePressedBrush" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

<!-- CardContentControl Base Style -->
<Style x:Key="MaterialBaseCardContentControlStyle"
TargetType="utu:CardContentControl">
<Setter Property="CornerRadius" Value="{StaticResource MaterialCardCornerRadius}" />
<Setter Property="CornerRadius" Value="{StaticResource CardCornerRadius}" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Center" />
Expand All @@ -18,7 +60,8 @@
<Style x:Key="MaterialFilledCardContentControlStyle"
BasedOn="{StaticResource MaterialBaseCardContentControlStyle}"
TargetType="utu:CardContentControl">
<Setter Property="Background" Value="{StaticResource MaterialFilledCardBackground}" />
<Setter Property="Background" Value="{StaticResource FilledCardContentBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource FilledCardContentBorderBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="utu:CardContentControl">
Expand All @@ -27,12 +70,48 @@
MinHeight="{TemplateBinding MinHeight}"
MaxWidth="{TemplateBinding MaxWidth}"
MaxHeight="{TemplateBinding MaxHeight}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="{TemplateBinding CornerRadius}"
BorderThickness="{TemplateBinding BorderThickness}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
CornerRadius="{TemplateBinding CornerRadius}">
<!-- Ripple effect -->
<!-- Will add the ripple effect later on when this issue is taken care of: -->
<!-- https://github.com/unoplatform/uno.ui.toolkit/issues/88 -->
<!--<um:Ripple Feedback="{ThemeResource FilledCardContentBorderBrushFocused}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{StaticResource MaterialCardCornerRadius}"
Padding="{TemplateBinding Padding}"
AutomationProperties.AccessibilityView="Raw" />-->

<!-- Main ContentPresenter -->
<ContentPresenter x:Name="ContentPresenter"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />

<!-- Border for Pressed State -->
<Border x:Name="HoverPressed"
Background="{ThemeResource FilledCardContentBorderBrushPressed}"
IsHitTestVisible="False"
Opacity="0" />

<!-- Border for PointerOver State -->
<Border x:Name="HoverOverlay"
Background="{ThemeResource FilledCardContentBorderBrushPointerOver}"
IsHitTestVisible="False"
Opacity="0" />

<!-- Border for Focused State -->
<Border x:Name="FocusedOverlay"
Background="{ThemeResource FilledCardContentBorderBrushFocused}"
IsHitTestVisible="False"
Opacity="0" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
Expand All @@ -45,9 +124,9 @@
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HoverOverlay"
Storyboard.TargetProperty="Opacity"
Duration="{StaticResource MaterialDelayedBeginTime}"
From="0"
To="1">
To="1"
Duration="{StaticResource MaterialDelayedBeginTime}">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
Expand All @@ -59,27 +138,27 @@
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HoverPressed"
Storyboard.TargetProperty="Opacity"
Duration="{StaticResource MaterialDelayedBeginTime}"
From="0"
To="1">
To="1"
Duration="{StaticResource MaterialDelayedBeginTime}">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>

<DoubleAnimation Storyboard.TargetName="HoverOverlay"
Storyboard.TargetProperty="Opacity"
Duration="{StaticResource MaterialDelayedBeginTime}"
To="0">
To="0"
Duration="{StaticResource MaterialDelayedBeginTime}">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>

<DoubleAnimation Storyboard.TargetName="FocusedOverlay"
Storyboard.TargetProperty="Opacity"
Duration="{StaticResource MaterialDelayedBeginTime}"
To="0">
To="0"
Duration="{StaticResource MaterialDelayedBeginTime}">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
Expand Down Expand Up @@ -109,43 +188,6 @@
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<!-- Ripple effect -->
<!-- Will add the ripple effect later on when this issue is taken care of: -->
<!-- https://github.com/unoplatform/uno.ui.toolkit/issues/88 -->
<!--<um:Ripple Feedback="{ThemeResource OnSurfaceFocusedBrush}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{StaticResource MaterialCardCornerRadius}"
Padding="{TemplateBinding Padding}"
AutomationProperties.AccessibilityView="Raw" />-->

<!-- Main ContentPresenter -->
<ContentPresenter x:Name="ContentPresenter"
Padding="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw" />

<!-- Border for Pressed State -->
<Border x:Name="HoverPressed"
Background="{ThemeResource OnSurfacePressedBrush}"
IsHitTestVisible="False"
Opacity="0" />

<!-- Border for PointerOver State -->
<Border x:Name="HoverOverlay"
Background="{ThemeResource OnSurfaceHoverBrush}"
IsHitTestVisible="False"
Opacity="0" />

<!-- Border for Focused State -->
<Border x:Name="FocusedOverlay"
Background="{ThemeResource OnSurfaceFocusedBrush}"
IsHitTestVisible="False"
Opacity="0" />
</Grid>
</ControlTemplate>
</Setter.Value>
Expand All @@ -156,17 +198,18 @@
<Style x:Key="MaterialOutlinedCardContentControlStyle"
BasedOn="{StaticResource MaterialFilledCardContentControlStyle}"
TargetType="utu:CardContentControl">
<Setter Property="Background" Value="{StaticResource MaterialOutlinedCardBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource MaterialOutlinedCardBorderBrush}" />
<Setter Property="BorderThickness" Value="{StaticResource MaterialCardBorderThickness}" />
<Setter Property="Background" Value="{ThemeResource OutlinedCardContentBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource OutlinedCardContentBorderBrush}" />
<Setter Property="BorderThickness" Value="{StaticResource CardBorderThickness}" />
</Style>

<!-- Elevated -->
<Style x:Key="MaterialElevatedCardContentControlStyle"
BasedOn="{StaticResource MaterialBaseCardContentControlStyle}"
TargetType="utu:CardContentControl">
<Setter Property="Background" Value="{StaticResource MaterialElevatedCardBackground}" />
<Setter Property="Elevation" Value="{StaticResource MaterialCardElevation}" />
<Setter Property="Background" Value="{ThemeResource ElevatedCardContentBackground}" />
<Setter Property="Elevation" Value="{StaticResource CardElevation}" />
<Setter Property="Margin" Value="{StaticResource CardElevationMargin}" />

<Setter Property="Template">
<Setter.Value>
Expand All @@ -177,13 +220,51 @@
MinHeight="{TemplateBinding MinHeight}"
MaxWidth="{TemplateBinding MaxWidth}"
MaxHeight="{TemplateBinding MaxHeight}"
Background="{TemplateBinding Background}"
Margin="{TemplateBinding Margin}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}"
Elevation="{TemplateBinding Elevation}"
Margin="{StaticResource MaterialCardElevationMargin}"
ShadowColor="{TemplateBinding ShadowColor}">
<Grid x:Name="GridRoot"
CornerRadius="{TemplateBinding CornerRadius}">

<!-- Ripple effect -->
<!-- Will add the ripple effect later on when this issue is taken care of: -->
<!-- https://github.com/unoplatform/uno.ui.toolkit/issues/88 -->
<!--<um:Ripple Feedback="{ThemeResource ElevatedCardContentBorderBrushFocused}"
CornerRadius="{StaticResource MaterialCardCornerRadius}"
Padding="{TemplateBinding Padding}"
AutomationProperties.AccessibilityView="Raw" />-->

<!-- Main ContentPresenter -->
<ContentPresenter x:Name="ContentPresenter"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />

<!-- Border for Pressed State -->
<Border x:Name="HoverPressed"
Background="{ThemeResource ElevatedCardContentBorderBrushPressed}"
IsHitTestVisible="False"
Opacity="0" />

<!-- Border for PointerOver State -->
<Border x:Name="HoverOverlay"
Background="{ThemeResource ElevatedCardContentBorderBrushPointerOver}"
IsHitTestVisible="False"
Opacity="0" />

<!-- Border for Focused State -->
<Border x:Name="FocusedOverlay"
Background="{ThemeResource ElevatedCardContentBorderBrushFocused}"
IsHitTestVisible="False"
Opacity="0" />
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
Expand All @@ -196,9 +277,9 @@
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HoverOverlay"
Storyboard.TargetProperty="Opacity"
Duration="{StaticResource MaterialDelayedBeginTime}"
From="0"
To="1">
To="1"
Duration="{StaticResource MaterialDelayedBeginTime}">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
Expand All @@ -209,27 +290,27 @@
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HoverPressed"
Storyboard.TargetProperty="Opacity"
Duration="{StaticResource MaterialDelayedBeginTime}"
From="0"
To="1">
To="1"
Duration="{StaticResource MaterialDelayedBeginTime}">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>

<DoubleAnimation Storyboard.TargetName="HoverOverlay"
Storyboard.TargetProperty="Opacity"
Duration="{StaticResource MaterialDelayedBeginTime}"
To="0">
To="0"
Duration="{StaticResource MaterialDelayedBeginTime}">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>

<DoubleAnimation Storyboard.TargetName="FocusedOverlay"
Storyboard.TargetProperty="Opacity"
Duration="{StaticResource MaterialDelayedBeginTime}"
To="0">
To="0"
Duration="{StaticResource MaterialDelayedBeginTime}">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
Expand Down Expand Up @@ -258,49 +339,9 @@
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Grid x:Name="GridRoot"
CornerRadius="{TemplateBinding CornerRadius}">

<!-- Ripple effect -->
<!-- Will add the ripple effect later on when this issue is taken care of: -->
<!-- https://github.com/unoplatform/uno.ui.toolkit/issues/88 -->
<!--<um:Ripple Feedback="{ThemeResource OnSurfaceFocusedBrush}"
CornerRadius="{StaticResource MaterialCardCornerRadius}"
Padding="{TemplateBinding Padding}"
AutomationProperties.AccessibilityView="Raw" />-->

<!-- Main ContentPresenter -->
<ContentPresenter x:Name="ContentPresenter"
Padding="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw" />

<!-- Border for Pressed State -->
<Border x:Name="HoverPressed"
Background="{ThemeResource OnSurfacePressedBrush}"
IsHitTestVisible="False"
Opacity="0" />

<!-- Border for PointerOver State -->
<Border x:Name="HoverOverlay"
Background="{ThemeResource OnSurfaceHoverBrush}"
IsHitTestVisible="False"
Opacity="0" />

<!-- Border for Focused State -->
<Border x:Name="FocusedOverlay"
Background="{ThemeResource OnSurfaceFocusedBrush}"
IsHitTestVisible="False"
Opacity="0" />
</Grid>
</toolkit:ElevatedView>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

</ResourceDictionary>

0 comments on commit d761bac

Please sign in to comment.