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
@nguyeenvy @mergify
nguyeenvy authored and mergify[bot] committed Aug 30, 2023
1 parent 162f9f8 commit 6e36492
Showing 1 changed file with 251 additions and 0 deletions.
251 changes: 251 additions & 0 deletions src/library/Uno.Toolkit.Material/Styles/Controls/v2/CardContentControl.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
<<<<<<< HEAD
xmlns:um="using:Uno.Material"
xmlns:utu="using:Uno.Toolkit.UI"
xmlns:toolkit="using:Uno.UI.Toolkit">
Expand All @@ -8,6 +9,58 @@
<Style x:Key="MaterialBaseCardContentControlStyle"
TargetType="utu:CardContentControl">
<Setter Property="CornerRadius" Value="{StaticResource MaterialCardCornerRadius}" />
=======
xmlns:toolkit="using:Uno.UI.Toolkit"
xmlns:um="using:Uno.Material"
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 CardCornerRadius}" />
>>>>>>> df9e747 (fix: Templatebound Margin to remove hardcoded margin (#715))
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Center" />
Expand All @@ -18,7 +71,12 @@
<Style x:Key="MaterialFilledCardContentControlStyle"
BasedOn="{StaticResource MaterialBaseCardContentControlStyle}"
TargetType="utu:CardContentControl">
<<<<<<< HEAD
<Setter Property="Background" Value="{StaticResource MaterialFilledCardBackground}" />
=======
<Setter Property="Background" Value="{StaticResource FilledCardContentBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource FilledCardContentBorderBrush}" />
>>>>>>> df9e747 (fix: Templatebound Margin to remove hardcoded margin (#715))
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="utu:CardContentControl">
Expand All @@ -27,6 +85,7 @@
MinHeight="{TemplateBinding MinHeight}"
MaxWidth="{TemplateBinding MaxWidth}"
MaxHeight="{TemplateBinding MaxHeight}"
<<<<<<< HEAD
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="{TemplateBinding CornerRadius}"
Expand Down Expand Up @@ -114,6 +173,18 @@
<!-- 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}"
=======
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
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}"
>>>>>>> df9e747 (fix: Templatebound Margin to remove hardcoded margin (#715))
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{StaticResource MaterialCardCornerRadius}"
Expand All @@ -123,6 +194,7 @@
<!-- Main ContentPresenter -->
<ContentPresenter x:Name="ContentPresenter"
Padding="{TemplateBinding Padding}"
<<<<<<< HEAD
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Expand All @@ -132,20 +204,117 @@
<!-- Border for Pressed State -->
<Border x:Name="HoverPressed"
Background="{ThemeResource OnSurfacePressedBrush}"
=======
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}"
>>>>>>> df9e747 (fix: Templatebound Margin to remove hardcoded margin (#715))
IsHitTestVisible="False"
Opacity="0" />

<!-- Border for PointerOver State -->
<Border x:Name="HoverOverlay"
<<<<<<< HEAD
Background="{ThemeResource OnSurfaceHoverBrush}"
=======
Background="{ThemeResource FilledCardContentBorderBrushPointerOver}"
>>>>>>> df9e747 (fix: Templatebound Margin to remove hardcoded margin (#715))
IsHitTestVisible="False"
Opacity="0" />

<!-- Border for Focused State -->
<Border x:Name="FocusedOverlay"
<<<<<<< HEAD
Background="{ThemeResource OnSurfaceFocusedBrush}"
IsHitTestVisible="False"
Opacity="0" />
=======
Background="{ThemeResource FilledCardContentBorderBrushFocused}"
IsHitTestVisible="False"
Opacity="0" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Target="HoverOverlay.Opacity" Value="0" />
<Setter Target="FocusedOverlay.Opacity" Value="0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HoverOverlay"
Storyboard.TargetProperty="Opacity"
From="0"
To="1"
Duration="{StaticResource MaterialDelayedBeginTime}">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>

<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HoverPressed"
Storyboard.TargetProperty="Opacity"
From="0"
To="1"
Duration="{StaticResource MaterialDelayedBeginTime}">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>

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

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

<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="HoverOverlay.Opacity" Value="0" />
<Setter Target="FocusedOverlay.Opacity" Value="0" />
<Setter Target="GridRoot.Opacity" Value="0.38" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<VisualState.Setters>
<Setter Target="FocusedOverlay.Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerFocused" />
<VisualState x:Name="Unfocused">
<VisualState.Setters>
<Setter Target="FocusedOverlay.Opacity" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
>>>>>>> df9e747 (fix: Templatebound Margin to remove hardcoded margin (#715))
</Grid>
</ControlTemplate>
</Setter.Value>
Expand All @@ -156,17 +325,29 @@
<Style x:Key="MaterialOutlinedCardContentControlStyle"
BasedOn="{StaticResource MaterialFilledCardContentControlStyle}"
TargetType="utu:CardContentControl">
<<<<<<< HEAD
<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}" />
>>>>>>> df9e747 (fix: Templatebound Margin to remove hardcoded margin (#715))
</Style>

<!-- Elevated -->
<Style x:Key="MaterialElevatedCardContentControlStyle"
BasedOn="{StaticResource MaterialBaseCardContentControlStyle}"
TargetType="utu:CardContentControl">
<<<<<<< HEAD
<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}" />
>>>>>>> df9e747 (fix: Templatebound Margin to remove hardcoded margin (#715))

<Setter Property="Template">
<Setter.Value>
Expand All @@ -177,13 +358,61 @@
MinHeight="{TemplateBinding MinHeight}"
MaxWidth="{TemplateBinding MaxWidth}"
MaxHeight="{TemplateBinding MaxHeight}"
<<<<<<< HEAD
Background="{TemplateBinding Background}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
CornerRadius="{TemplateBinding CornerRadius}"
Elevation="{TemplateBinding Elevation}"
Margin="{StaticResource MaterialCardElevationMargin}"
ShadowColor="{TemplateBinding ShadowColor}">
=======
Margin="{TemplateBinding Margin}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}"
Elevation="{TemplateBinding Elevation}"
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>
>>>>>>> df9e747 (fix: Templatebound Margin to remove hardcoded margin (#715))
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
Expand All @@ -196,9 +425,15 @@
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HoverOverlay"
Storyboard.TargetProperty="Opacity"
<<<<<<< HEAD
Duration="{StaticResource MaterialDelayedBeginTime}"
From="0"
To="1">
=======
From="0"
To="1"
Duration="{StaticResource MaterialDelayedBeginTime}">
>>>>>>> df9e747 (fix: Templatebound Margin to remove hardcoded margin (#715))
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
Expand All @@ -209,27 +444,43 @@
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HoverPressed"
Storyboard.TargetProperty="Opacity"
<<<<<<< HEAD
Duration="{StaticResource MaterialDelayedBeginTime}"
From="0"
To="1">
=======
From="0"
To="1"
Duration="{StaticResource MaterialDelayedBeginTime}">
>>>>>>> df9e747 (fix: Templatebound Margin to remove hardcoded margin (#715))
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>

<DoubleAnimation Storyboard.TargetName="HoverOverlay"
Storyboard.TargetProperty="Opacity"
<<<<<<< HEAD
Duration="{StaticResource MaterialDelayedBeginTime}"
To="0">
=======
To="0"
Duration="{StaticResource MaterialDelayedBeginTime}">
>>>>>>> df9e747 (fix: Templatebound Margin to remove hardcoded margin (#715))
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>

<DoubleAnimation Storyboard.TargetName="FocusedOverlay"
Storyboard.TargetProperty="Opacity"
<<<<<<< HEAD
Duration="{StaticResource MaterialDelayedBeginTime}"
To="0">
=======
To="0"
Duration="{StaticResource MaterialDelayedBeginTime}">
>>>>>>> df9e747 (fix: Templatebound Margin to remove hardcoded margin (#715))
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
Expand Down

0 comments on commit 6e36492

Please sign in to comment.