A light and dark separator style for colored backgrounds

Author: mgnslndh

MainDemo.Wpf/Cards.xaml

@@ -10,6 +10,7 @@
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
+                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.CheckBox.xaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
@@ -44,19 +45,47 @@
                 </StackPanel>
             </Grid>
         </materialDesign:Card>
+        <materialDesign:Card Margin="4 4 0 0" Background="#03a9f4"
+                  Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
+                  Padding="0"
+                  Width="200">
+            <Grid>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                </Grid.RowDefinitions>
+                <TextBlock Grid.Row="0" Margin="16 16 16 4" Style="{StaticResource MaterialDesignHeadlineTextBlock}">Call Jennifer</TextBlock>
+                <Separator Grid.Row="1" Style="{StaticResource MaterialDesignDarkSeparator}"/>
+                <TextBlock Grid.Row="2" Margin="16 0 16 8" VerticalAlignment="Center" HorizontalAlignment="Left" Style="{StaticResource MaterialDesignBody1TextBlock}">March 19, 2016</TextBlock>
+                <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="16 0 16 8" HorizontalAlignment="Right">
+                    <Button HorizontalAlignment="Right" Style="{StaticResource MaterialDesignToolForegroundButton}" Width="30" Padding="2 0 2 0"
+                            materialDesign:RippleAssist.IsCentered="True">
+                        <materialDesign:PackIcon Kind="Phone" />
+                    </Button>
+                </StackPanel>
+            </Grid>
+        </materialDesign:Card>
         <materialDesign:Card Margin="4 4 0 0" Background="{DynamicResource PrimaryHueLightBrush}"
                   Foreground="{DynamicResource PrimaryHueLightForegroundBrush}"
                   Padding="8">
             <TextBlock FontSize="16">Boring Text</TextBlock>
         </materialDesign:Card>
         <materialDesign:Card Margin="4 4 0 0" Background="{DynamicResource PrimaryHueDarkBrush}"
                   Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
-                  Padding="8">
+                  >
             <StackPanel>
-                <TextBlock FontSize="16">Notes</TextBlock>
-                <CheckBox Margin="0 4 0 0" Style="{StaticResource MaterialDesignUserForegroundCheckBox}">Do something good</CheckBox>
-                <CheckBox Style="{StaticResource MaterialDesignUserForegroundCheckBox}">Take a breather</CheckBox>
-                <CheckBox Style="{StaticResource MaterialDesignUserForegroundCheckBox}">And go create</CheckBox>
+                <TextBlock Margin="16 16 12 8" FontSize="16">Notes</TextBlock>
+                <CheckBox Margin="16 4 16 0" Style="{StaticResource MaterialDesignUserForegroundCheckBox}">Do something good</CheckBox>
+                <CheckBox Margin="16 4 16 0" Style="{StaticResource MaterialDesignUserForegroundCheckBox}">Take a breather</CheckBox>
+                <CheckBox Margin="16 4 16 0" Style="{StaticResource MaterialDesignUserForegroundCheckBox}">And go create</CheckBox>
+                <Separator Style="{StaticResource MaterialDesignLightSeparator}"/>
+                <StackPanel Margin="8 0 8 8" Orientation="Horizontal" HorizontalAlignment="Right">
+                    <Button HorizontalAlignment="Right" Style="{StaticResource MaterialDesignToolForegroundButton}" Width="30" Padding="2 0 0 0"
+                            materialDesign:RippleAssist.IsCentered="True">
+                        <materialDesign:PackIcon Kind="CheckAll" />
+                    </Button>
+                </StackPanel>
             </StackPanel>
         </materialDesign:Card>
         <materialDesign:Card Margin="4 4 0 0" Background="{DynamicResource PrimaryHueDarkBrush}"

MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Card.xaml

@@ -40,4 +40,14 @@
         <Setter Property="wpf:ShadowAssist.ShadowDepth" Value="Depth2" />
     </Style>
 
+    <Style x:Key="MaterialDesignDarkSeparator" TargetType="{x:Type Separator}" BasedOn="{StaticResource MaterialDesignSeparator}">
+        <Setter Property="Background" Value="{DynamicResource MaterialDesignDarkSeparatorBackground}"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignDarkSeparatorBackground}"/>
+    </Style>
+
+    <Style x:Key="MaterialDesignLightSeparator" TargetType="{x:Type Separator}" BasedOn="{StaticResource MaterialDesignSeparator}">
+        <Setter Property="Background" Value="{DynamicResource MaterialDesignLightSeparatorBackground}"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignLightSeparatorBackground}"/>
+    </Style>
+
 </ResourceDictionary>

MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Defaults.xaml

@@ -40,6 +40,8 @@
     <SolidColorBrush x:Key="MaterialDesignLightForeground" Color="#DD000000"/>
     <SolidColorBrush x:Key="MaterialDesignDarkBackground" Color="#FF37474f"/>
     <SolidColorBrush x:Key="MaterialDesignDarkForeground" Color="#FFFAFAFA"/>
+    <SolidColorBrush x:Key="MaterialDesignDarkSeparatorBackground" Color="#1F000000" />
+    <SolidColorBrush x:Key="MaterialDesignLightSeparatorBackground" Color="#1FFFFFFF" />
     <Style TargetType="{x:Type Button}" BasedOn="{StaticResource MaterialDesignRaisedButton}" />
 	<Style TargetType="{x:Type Calendar}" BasedOn="{StaticResource MaterialDesignCalendarPortrait}" />
     <Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource MaterialDesignCheckBox}" />