From 09617376286cd43c4cb3b5ee0c5e26973e7b59c5 Mon Sep 17 00:00:00 2001
From: Nicolai Henriksen <nicolai.h80@gmail.com>
Date: Sat, 2 Jul 2022 01:05:35 +0200
Subject: [PATCH 1/3] Added card styles and sample

Default card style is now MaterialDesignElevatedCard and a new alternative style, MaterialDesignOutlineCard added.
---
 MainDemo.Wpf/Cards.xaml                       |  62 ++++++++++
 .../DoubleToCornerRadiusConverter.cs          |  13 +++
 MaterialDesignThemes.Wpf/Themes/Generic.xaml  |   1 +
 .../Themes/MaterialDesignTheme.Card.xaml      | 107 +++++++++++-------
 4 files changed, 145 insertions(+), 38 deletions(-)
 create mode 100644 MaterialDesignThemes.Wpf/Converters/DoubleToCornerRadiusConverter.cs

diff --git a/MainDemo.Wpf/Cards.xaml b/MainDemo.Wpf/Cards.xaml
index e87a47aa83..78a2206432 100644
--- a/MainDemo.Wpf/Cards.xaml
+++ b/MainDemo.Wpf/Cards.xaml
@@ -83,6 +83,68 @@
             </materialDesign:Card>
         </smtx:XamlDisplay>
 
+        <smtx:XamlDisplay
+            UniqueKey="cards_1b"
+            Margin="4 4 0 16"
+            VerticalContentAlignment="Top">
+            <materialDesign:Card Width="200" Style="{StaticResource MaterialDesignOutlinedCard}">
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="140" />
+                        <RowDefinition Height="*" />
+                        <RowDefinition Height="Auto" />
+                    </Grid.RowDefinitions>
+                    <Image
+                        Source="Resources/Chartridge046_small.jpg"
+                        Height="140"
+                        Width="196"
+                        Stretch="UniformToFill"/>
+                    <Button
+                        Grid.Row="0"
+                        Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" 
+                        HorizontalAlignment="Right"
+                        VerticalAlignment="Bottom"
+                        Margin="0 0 16 -20">
+                        <materialDesign:PackIcon Kind="Bike" />
+                    </Button>
+                    <StackPanel Grid.Row="1" Margin="8 24 8 0" >
+                        <TextBlock FontWeight="Bold">Outlined style</TextBlock>
+                        <TextBlock
+                            TextWrapping="Wrap"
+                            VerticalAlignment="Center"
+                            Text="Removes the drop shadow and flattens the look of the card."/>
+                    </StackPanel>
+                    <StackPanel
+                        HorizontalAlignment="Right"
+                        Grid.Row="2"
+                        Orientation="Horizontal"
+                        Margin="8">
+                        <Button
+                            Style="{StaticResource MaterialDesignToolButton}"
+                            Width="30" Padding="2 0 2 0"
+                            materialDesign:RippleAssist.IsCentered="True">
+                            <materialDesign:PackIcon Kind="ShareVariant" />
+                        </Button>
+                        <Button
+                            Style="{StaticResource MaterialDesignToolButton}"
+                            Width="30"
+                            Padding="2 0 2 0"
+                            materialDesign:RippleAssist.IsCentered="True">
+                            <materialDesign:PackIcon Kind="Heart" />
+                        </Button>
+                        <materialDesign:PopupBox
+                            Style="{StaticResource MaterialDesignToolPopupBox}"
+                            Padding="2 0 2 0">
+                            <StackPanel>
+                                <Button Content="More"/>
+                                <Button Content="Options"/>
+                            </StackPanel>
+                        </materialDesign:PopupBox>
+                    </StackPanel>
+                </Grid>
+            </materialDesign:Card>
+        </smtx:XamlDisplay>
+
         <smtx:XamlDisplay
             UniqueKey="cards_2"
             Margin="4 4 0 16"
diff --git a/MaterialDesignThemes.Wpf/Converters/DoubleToCornerRadiusConverter.cs b/MaterialDesignThemes.Wpf/Converters/DoubleToCornerRadiusConverter.cs
new file mode 100644
index 0000000000..c7b582b338
--- /dev/null
+++ b/MaterialDesignThemes.Wpf/Converters/DoubleToCornerRadiusConverter.cs
@@ -0,0 +1,13 @@
+using System.Globalization;
+using System.Windows.Data;
+
+namespace MaterialDesignThemes.Wpf.Converters;
+
+internal class DoubleToCornerRadiusConverter : IValueConverter
+{
+    public static readonly DoubleToCornerRadiusConverter Instance = new();
+
+    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) => new CornerRadius((double)value);
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) => throw new NotImplementedException();
+}
diff --git a/MaterialDesignThemes.Wpf/Themes/Generic.xaml b/MaterialDesignThemes.Wpf/Themes/Generic.xaml
index c068c1e004..a4a137c65b 100644
--- a/MaterialDesignThemes.Wpf/Themes/Generic.xaml
+++ b/MaterialDesignThemes.Wpf/Themes/Generic.xaml
@@ -33,6 +33,7 @@
     <!-- set up default styles for our custom Material Design in XAML Toolkit controls -->
     <Style TargetType="{x:Type local:Clock}" BasedOn="{StaticResource MaterialDesignClock}" />
     <Style TargetType="{x:Type local:Badged}" BasedOn="{StaticResource MaterialDesignBadge}" />
+    <Style TargetType="{x:Type local:Card}" BasedOn="{StaticResource MaterialDesignElevatedCard}" />
     <Style TargetType="{x:Type local:PopupBox}" BasedOn="{StaticResource MaterialDesignPopupBox}" />
     <Style TargetType="{x:Type local:TimePicker}" BasedOn="{StaticResource MaterialDesignTimePicker}" />
 
diff --git a/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Card.xaml b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Card.xaml
index bb63d20ace..a9d8f298aa 100644
--- a/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Card.xaml
+++ b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Card.xaml
@@ -7,47 +7,78 @@
         <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Shadows.xaml" />
     </ResourceDictionary.MergedDictionaries>
 
-    <ControlTemplate TargetType="{x:Type wpf:Card}" x:Key="CardTemplate">
-        <ControlTemplate.Resources>
-            <converters:ShadowEdgeConverter x:Key="ShadowEdgeConverter" />
-        </ControlTemplate.Resources>
-        <Grid Background="Transparent">
-            <AdornerDecorator CacheMode="{Binding RelativeSource={RelativeSource Self}, Path=(wpf:ShadowAssist.CacheMode)}">
-                <AdornerDecorator.OpacityMask>
-                    <MultiBinding Converter="{StaticResource ShadowEdgeConverter}">
-                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="ActualWidth"/>
-                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="ActualHeight"/>
-                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:ShadowAssist.ShadowDepth)" />
-                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:ShadowAssist.ShadowEdges)" />
-                    </MultiBinding>
-                </AdornerDecorator.OpacityMask>
-                <Border Effect="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ShadowAssist.ShadowDepth), Converter={x:Static converters:ShadowConverter.Instance}}"
-                        CornerRadius="{TemplateBinding UniformCornerRadius}">
-                    <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" 
-                            x:Name="PART_ClipBorder"
-                            Clip="{TemplateBinding ContentClip}" />
-                </Border>
-            </AdornerDecorator>
-            <ContentPresenter 
-                x:Name="ContentPresenter"
-                Margin="{TemplateBinding Padding}"
-                Content="{TemplateBinding ContentControl.Content}" 
-                ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" 
-                ContentTemplateSelector="{TemplateBinding ContentControl.ContentTemplateSelector}" 
-                ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}">
-            </ContentPresenter>
-        </Grid>
-        <ControlTemplate.Triggers>
-            <Trigger Property="ClipContent" Value="True">
-                <Setter Property="Clip" TargetName="ContentPresenter" Value="{Binding ContentClip, RelativeSource={RelativeSource TemplatedParent}}" />
-            </Trigger>
-        </ControlTemplate.Triggers>
-    </ControlTemplate>
-    <Style TargetType="{x:Type wpf:Card}">
-        <Setter Property="Template" Value="{StaticResource CardTemplate}" />
+    <Style x:Key="MaterialDesignElevatedCard" TargetType="{x:Type wpf:Card}">
         <Setter Property="Background" Value="{DynamicResource MaterialDesignCardBackground}" />
         <Setter Property="wpf:ShadowAssist.ShadowDepth" Value="Depth2" />
         <Setter Property="Focusable" Value="False"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type wpf:Card}">
+                    <ControlTemplate.Resources>
+                        <converters:ShadowEdgeConverter x:Key="ShadowEdgeConverter" />
+                    </ControlTemplate.Resources>
+                    <Grid Background="Transparent">
+                        <AdornerDecorator CacheMode="{Binding RelativeSource={RelativeSource Self}, Path=(wpf:ShadowAssist.CacheMode)}">
+                            <AdornerDecorator.OpacityMask>
+                                <MultiBinding Converter="{StaticResource ShadowEdgeConverter}">
+                                    <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="ActualWidth"/>
+                                    <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="ActualHeight"/>
+                                    <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:ShadowAssist.ShadowDepth)" />
+                                    <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="(wpf:ShadowAssist.ShadowEdges)" />
+                                </MultiBinding>
+                            </AdornerDecorator.OpacityMask>
+                            <Border Effect="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ShadowAssist.ShadowDepth), Converter={x:Static converters:ShadowConverter.Instance}}"
+                                    CornerRadius="{TemplateBinding UniformCornerRadius}">
+                                <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" 
+                                        x:Name="PART_ClipBorder"
+                                        Clip="{TemplateBinding ContentClip}" />
+                            </Border>
+                        </AdornerDecorator>
+                        <ContentPresenter x:Name="ContentPresenter"
+                                          Margin="{TemplateBinding Padding}"
+                                          Content="{TemplateBinding ContentControl.Content}"
+                                          ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
+                                          ContentTemplateSelector="{TemplateBinding ContentControl.ContentTemplateSelector}"
+                                          ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" />
+                    </Grid>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="ClipContent" Value="True">
+                            <Setter Property="Clip" TargetName="ContentPresenter" Value="{Binding ContentClip, RelativeSource={RelativeSource TemplatedParent}}" />
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
     </Style>
 
+    <Style x:Key="MaterialDesignOutlinedCard" TargetType="{x:Type wpf:Card}">
+        <Setter Property="Background" Value="{DynamicResource MaterialDesignCardBackground}" />
+        <Setter Property="Focusable" Value="False"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type wpf:Card}">
+                    <Grid Background="Transparent">
+                        <Border BorderThickness="1" CornerRadius="{TemplateBinding UniformCornerRadius, Converter={x:Static converters:DoubleToCornerRadiusConverter.Instance}}" BorderBrush="{DynamicResource MaterialDesignDivider}">
+                            <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" 
+                                        x:Name="PART_ClipBorder"
+                                        Clip="{TemplateBinding ContentClip}">
+                                <ContentPresenter x:Name="ContentPresenter"
+                                          Margin="{TemplateBinding Padding}"
+                                          Content="{TemplateBinding ContentControl.Content}"
+                                          ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
+                                          ContentTemplateSelector="{TemplateBinding ContentControl.ContentTemplateSelector}"
+                                          ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" />
+                            </Border>
+                        </Border>
+                    </Grid>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="ClipContent" Value="True">
+                            <Setter Property="Clip" TargetName="ContentPresenter" Value="{Binding ContentClip, RelativeSource={RelativeSource TemplatedParent}}" />
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>        
+
 </ResourceDictionary>

From 6cc900d24cb5ff5190a32699ee6f92c5a1fd2982 Mon Sep 17 00:00:00 2001
From: Nicolai Henriksen <nicolai.h80@gmail.com>
Date: Sat, 2 Jul 2022 01:26:04 +0200
Subject: [PATCH 2/3] First unit test for OutlinedCard added

---
 .../WPF/Cards/OutlinedCardTests.cs            | 30 +++++++++++++++++++
 .../XamlTestMixins.cs                         |  1 +
 2 files changed, 31 insertions(+)
 create mode 100644 MaterialDesignThemes.UITests/WPF/Cards/OutlinedCardTests.cs

diff --git a/MaterialDesignThemes.UITests/WPF/Cards/OutlinedCardTests.cs b/MaterialDesignThemes.UITests/WPF/Cards/OutlinedCardTests.cs
new file mode 100644
index 0000000000..102df763f9
--- /dev/null
+++ b/MaterialDesignThemes.UITests/WPF/Cards/OutlinedCardTests.cs
@@ -0,0 +1,30 @@
+using System.Windows.Media;
+
+namespace MaterialDesignThemes.UITests.WPF.Cards;
+
+public class OutlinedCardTests : TestBase
+{
+    public OutlinedCardTests(ITestOutputHelper output)
+        : base(output)
+    { }
+
+    [Fact]
+    public async Task OutlinedCard_UsesThemeColorForBorder()
+    {
+        await using var recorder = new TestRecorder(App);
+
+        //Arrange
+        IVisualElement<Card> card = await LoadXaml<Card>(
+            @"<materialDesign:Card Content=""Hello World"" Style=""{StaticResource MaterialDesignOutlinedCard}""/>");
+        Color dividerColor = await GetThemeColor("MaterialDesignDivider");
+        IVisualElement<Border> internalBorder = await card.GetElement<Border>();
+
+        //Act
+        Color? internalBorderColor = await internalBorder.GetBorderBrushColor();
+
+        //Assert
+        Assert.Equal(dividerColor, internalBorderColor);
+
+        recorder.Success();
+    }
+}
diff --git a/MaterialDesignThemes.UITests/XamlTestMixins.cs b/MaterialDesignThemes.UITests/XamlTestMixins.cs
index 4f20533093..aa9c95e723 100644
--- a/MaterialDesignThemes.UITests/XamlTestMixins.cs
+++ b/MaterialDesignThemes.UITests/XamlTestMixins.cs
@@ -29,6 +29,7 @@ public static async Task InitialzeWithMaterialDesign(this IApp app,
     <ResourceDictionary.MergedDictionaries>
         <materialDesign:BundledTheme BaseTheme=""{baseTheme}"" PrimaryColor=""{primary}"" SecondaryColor=""{secondary}"" {colorAdjustString}/>
 
+        <ResourceDictionary Source = ""pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/Generic.xaml"" />
         <ResourceDictionary Source = ""pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>";

From ea971426c4a3eca9ffb5a9e56a287211d38d412a Mon Sep 17 00:00:00 2001
From: Nicolai Henriksen <nicolai.h80@gmail.com>
Date: Sat, 2 Jul 2022 10:21:17 +0200
Subject: [PATCH 3/3] More unit tests

Also ensured the DoubleToCornerRadiusConverter returns a CornerRadius of 0 for negative values.
---
 .../WPF/Cards/OutlinedCardTests.cs            | 24 ++++++++++++++++-
 .../DoubleToCornerRadiusConverterTests.cs     | 26 +++++++++++++++++++
 .../DoubleToCornerRadiusConverter.cs          |  2 +-
 3 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 MaterialDesignThemes.Wpf.Tests/Converters/DoubleToCornerRadiusConverterTests.cs

diff --git a/MaterialDesignThemes.UITests/WPF/Cards/OutlinedCardTests.cs b/MaterialDesignThemes.UITests/WPF/Cards/OutlinedCardTests.cs
index 102df763f9..0ac83bba09 100644
--- a/MaterialDesignThemes.UITests/WPF/Cards/OutlinedCardTests.cs
+++ b/MaterialDesignThemes.UITests/WPF/Cards/OutlinedCardTests.cs
@@ -27,4 +27,26 @@ public async Task OutlinedCard_UsesThemeColorForBorder()
 
         recorder.Success();
     }
-}
+
+    [Fact]
+    public async Task OutlinedCard_UniformCornerRadiusApplied_AppliesCornerRadiusOnBorder()
+    {
+        await using var recorder = new TestRecorder(App);
+
+        //Arrange
+        IVisualElement<Card> card = await LoadXaml<Card>(
+            @"<materialDesign:Card Content=""Hello World"" Style=""{StaticResource MaterialDesignOutlinedCard}"" UniformCornerRadius=""5"" />");
+        IVisualElement<Border> internalBorder = await card.GetElement<Border>();
+
+        //Act
+        CornerRadius? internalBorderCornerRadius = await internalBorder.GetCornerRadius();
+
+        //Assert
+        Assert.Equal(5, internalBorderCornerRadius.Value.TopLeft);
+        Assert.Equal(5, internalBorderCornerRadius.Value.TopRight);
+        Assert.Equal(5, internalBorderCornerRadius.Value.BottomRight);
+        Assert.Equal(5, internalBorderCornerRadius.Value.BottomLeft);
+
+        recorder.Success();
+    }
+}
\ No newline at end of file
diff --git a/MaterialDesignThemes.Wpf.Tests/Converters/DoubleToCornerRadiusConverterTests.cs b/MaterialDesignThemes.Wpf.Tests/Converters/DoubleToCornerRadiusConverterTests.cs
new file mode 100644
index 0000000000..f6ffbe47fb
--- /dev/null
+++ b/MaterialDesignThemes.Wpf.Tests/Converters/DoubleToCornerRadiusConverterTests.cs
@@ -0,0 +1,26 @@
+using System.Globalization;
+using MaterialDesignThemes.Wpf.Converters;
+using Xunit;
+
+namespace MaterialDesignThemes.Wpf.Tests.Converters;
+
+public class DoubleToCornerRadiusConverterTests
+{
+    [Theory]
+    [InlineData(-0.16, 0.0)]
+    [InlineData(0.16, 0.16)]
+    [InlineData(5.0, 5.0)]
+    public void AllCultureParseParameterCorrectly(object parameter, double expectedCornerRadius)
+    {
+        var converter = new DoubleToCornerRadiusConverter();
+        foreach (var culture in CultureInfo.GetCultures(CultureTypes.AllCultures))
+        {
+            var cornerRadius = (CornerRadius?)converter.Convert(parameter, typeof(CornerRadius), parameter, culture);
+
+            Assert.Equal(expectedCornerRadius, cornerRadius.Value.TopLeft);
+            Assert.Equal(expectedCornerRadius, cornerRadius.Value.TopRight);
+            Assert.Equal(expectedCornerRadius, cornerRadius.Value.BottomRight);
+            Assert.Equal(expectedCornerRadius, cornerRadius.Value.BottomLeft);
+        }
+    }
+}
diff --git a/MaterialDesignThemes.Wpf/Converters/DoubleToCornerRadiusConverter.cs b/MaterialDesignThemes.Wpf/Converters/DoubleToCornerRadiusConverter.cs
index c7b582b338..b283680874 100644
--- a/MaterialDesignThemes.Wpf/Converters/DoubleToCornerRadiusConverter.cs
+++ b/MaterialDesignThemes.Wpf/Converters/DoubleToCornerRadiusConverter.cs
@@ -7,7 +7,7 @@ internal class DoubleToCornerRadiusConverter : IValueConverter
 {
     public static readonly DoubleToCornerRadiusConverter Instance = new();
 
-    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) => new CornerRadius((double)value);
+    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) => new CornerRadius(Math.Max(0, (double)value));
 
     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) => throw new NotImplementedException();
 }