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}" />