Configurable shadows

MaterialDesignInXAML · Oct 2, 2015 · 58a260f · 58a260f
1 parent fca1e92
commit 58a260f
Show file tree

Hide file tree

Showing 9 changed files with 184 additions and 4 deletions.
diff --git a/MainDemo.Wpf/MainDemo.Wpf.csproj b/MainDemo.Wpf/MainDemo.Wpf.csproj
@@ -109,6 +109,9 @@
     <Compile Include="ProvingGround.xaml.cs">
       <DependentUpon>ProvingGround.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Shadows.xaml.cs">
+      <DependentUpon>Shadows.xaml</DependentUpon>
+    </Compile>
     <Compile Include="TextFields.xaml.cs">
       <DependentUpon>TextFields.xaml</DependentUpon>
     </Compile>
@@ -175,6 +178,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Shadows.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="TextFields.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

diff --git a/MainDemo.Wpf/MainWindow.xaml b/MainDemo.Wpf/MainWindow.xaml
@@ -110,6 +110,11 @@
                     <wpfExample:Dialogs />
                 </domain:DemoItem.Content>
             </domain:DemoItem>
+            <domain:DemoItem Name="Shadows">
+                <domain:DemoItem.Content>
+                    <wpfExample:Shadows />
+                </domain:DemoItem.Content>
+            </domain:DemoItem>
         </ListBox>
         <ContentControl Margin="16" Content="{Binding ElementName=DemoItemsListBox, Path=SelectedItem.Content}" />
     </DockPanel>

diff --git a/MainDemo.Wpf/Shadows.xaml b/MainDemo.Wpf/Shadows.xaml
@@ -0,0 +1,61 @@
+<UserControl x:Class="MaterialDesignColors.WpfExample.Shadows"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:local="clr-namespace:MaterialDesignColors.WpfExample"
+             xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf;assembly=MaterialDesignThemes.Wpf"
+             mc:Ignorable="d" 
+             d:DesignHeight="300" d:DesignWidth="300">
+    <StackPanel Margin="0 8 0 0">
+        <TextBlock>Raised controls have default shadows set, but the shadows can be overriden.</TextBlock>
+        <StackPanel Orientation="Horizontal" Margin="0 32 0 0">
+            <Button Style="{DynamicResource MaterialDesignRaisedButton}"                    
+                    >DEPTH 1</Button>
+            <Button Style="{DynamicResource MaterialDesignRaisedButton}"
+                    Margin="16 0 0 0"
+                    wpf:ShadowAssist.ShadowDepth="Depth2"
+                    >DEPTH 2</Button>
+            <Button Style="{DynamicResource MaterialDesignRaisedButton}"
+                    Margin="16 0 0 0"
+                    wpf:ShadowAssist.ShadowDepth="Depth3"
+                    >DEPTH 3</Button>
+            <Button Style="{DynamicResource MaterialDesignRaisedButton}"
+                    Margin="16 0 0 0"
+                    wpf:ShadowAssist.ShadowDepth="Depth4"
+                    >DEPTH 4</Button>
+            <Button Style="{DynamicResource MaterialDesignRaisedButton}"
+                    Margin="16 0 0 0"
+                    wpf:ShadowAssist.ShadowDepth="Depth5"
+                    >DEPTH 5</Button>
+        </StackPanel>
+        <StackPanel Orientation="Horizontal" Margin="0 32 0 0">
+            <Button Style="{DynamicResource MaterialDesignFloatingActionButton}"                   
+                    wpf:ShadowAssist.ShadowDepth="Depth1"
+                    >1</Button>
+            <Button Style="{DynamicResource MaterialDesignFloatingActionButton}"
+                    Margin="16 0 0 0"
+                    wpf:ShadowAssist.ShadowDepth="Depth2"
+                    >2</Button>
+            <Button Style="{DynamicResource MaterialDesignFloatingActionButton}"
+                    Margin="16 0 0 0"                    
+                    >3</Button>
+            <Button Style="{DynamicResource MaterialDesignFloatingActionButton}"
+                    Margin="16 0 0 0"
+                    wpf:ShadowAssist.ShadowDepth="Depth4"
+                    >4</Button>
+            <Button Style="{DynamicResource MaterialDesignFloatingActionButton}"
+                    Margin="16 0 0 0"
+                    wpf:ShadowAssist.ShadowDepth="Depth5"
+                    >5</Button>
+        </StackPanel>
+        <StackPanel Orientation="Horizontal" Margin="0 32 0 0">
+            <wpf:Card wpf:ShadowAssist.ShadowDepth="Depth1" Padding="32">DEPTH 1</wpf:Card>
+            <wpf:Card wpf:ShadowAssist.ShadowDepth="Depth2" Margin="16 0 0 0" Padding="32">DEPTH 2</wpf:Card>
+            <wpf:Card wpf:ShadowAssist.ShadowDepth="Depth3" Margin="16 0 0 0" Padding="32">DEPTH 3</wpf:Card>
+            <wpf:Card wpf:ShadowAssist.ShadowDepth="Depth4" Margin="16 0 0 0" Padding="32">DEPTH 4</wpf:Card>
+            <wpf:Card wpf:ShadowAssist.ShadowDepth="Depth5" Margin="16 0 0 0" Padding="32">DEPTH 5</wpf:Card>
+        </StackPanel>
+
+    </StackPanel>
+</UserControl>
diff --git a/MainDemo.Wpf/Shadows.xaml.cs b/MainDemo.Wpf/Shadows.xaml.cs
@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace MaterialDesignColors.WpfExample
+{
+    /// <summary>
+    /// Interaction logic for Shadows.xaml
+    /// </summary>
+    public partial class Shadows : UserControl
+    {
+        public Shadows()
+        {
+            InitializeComponent();
+        }
+    }
+}
diff --git a/MaterialDesignThemes.Wpf/Converters/ShadowConverter.cs b/MaterialDesignThemes.Wpf/Converters/ShadowConverter.cs
@@ -0,0 +1,41 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Data;
+
+namespace MaterialDesignThemes.Wpf.Converters
+{
+    public class ShadowConverter : IValueConverter
+    {
+        private static readonly IDictionary<ShadowDepth, object> ShadowsDictionary;
+        public static readonly ShadowConverter Instance = new ShadowConverter();
+
+        static ShadowConverter()
+        {
+            var resourceDictionary = new ResourceDictionary {  Source = new Uri("pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Shadows.xaml", UriKind.Absolute) };
+
+            ShadowsDictionary = new Dictionary<ShadowDepth, object>
+            {
+                { ShadowDepth.Depth1, resourceDictionary["MaterialDesignShadowDepth1"] },
+                { ShadowDepth.Depth2, resourceDictionary["MaterialDesignShadowDepth2"] },
+                { ShadowDepth.Depth3, resourceDictionary["MaterialDesignShadowDepth3"] },
+                { ShadowDepth.Depth4, resourceDictionary["MaterialDesignShadowDepth4"] },
+                { ShadowDepth.Depth5, resourceDictionary["MaterialDesignShadowDepth5"] },
+            };
+        }
+
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return ShadowsDictionary[(ShadowDepth) value];
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}
diff --git a/MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj b/MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj
@@ -213,6 +213,7 @@
     <Compile Include="Converters\NotConverter.cs" />
     <Compile Include="Converters\NotNullToVisibilityConverter.cs" />
     <Compile Include="Converters\NotZeroToVisibilityConverter.cs" />
+    <Compile Include="Converters\ShadowConverter.cs" />
     <Compile Include="Converters\SizeToRectConverter.cs" />
     <Compile Include="CustomPopupPlacementCallbackHelper.cs" />
     <Compile Include="CustomValidationPopup.cs" />
@@ -242,6 +243,7 @@
     </Compile>
     <Compile Include="RatingBar.cs" />
     <Compile Include="RatingBarButton.cs" />
+    <Compile Include="ShadowAssist.cs" />
     <Compile Include="TextFieldAssist.cs" />
     <Compile Include="Converters\TextFieldHintVisibilityConverter.cs" />
     <Compile Include="TimePicker.cs" />

diff --git a/MaterialDesignThemes.Wpf/ShadowAssist.cs b/MaterialDesignThemes.Wpf/ShadowAssist.cs
@@ -0,0 +1,30 @@
+using System.Windows;
+
+namespace MaterialDesignThemes.Wpf
+{
+    public enum ShadowDepth
+    {
+        Depth1,
+        Depth2,
+        Depth3,
+        Depth4,
+        Depth5
+    }
+
+    public static class ShadowAssist
+    {
+        public static readonly DependencyProperty ShadowDepthProperty = DependencyProperty.RegisterAttached(
+            "ShadowDepth", typeof (ShadowDepth), typeof (ShadowAssist), new PropertyMetadata(default(ShadowDepth)));
+
+        public static void SetShadowDepth(DependencyObject element, ShadowDepth value)
+        {
+            element.SetValue(ShadowDepthProperty, value);
+        }
+
+        public static ShadowDepth GetShadowDepth(DependencyObject element)
+        {
+            return (ShadowDepth) element.GetValue(ShadowDepthProperty);
+        }
+
+    }
+}
diff --git a/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Button.xaml b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Button.xaml
@@ -1,7 +1,8 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf"
-                    xmlns:po="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options">
+                    xmlns:po="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
+                    xmlns:converters="clr-namespace:MaterialDesignThemes.Wpf.Converters">
 
     <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Shadows.xaml" />
@@ -24,6 +25,7 @@
         <Setter Property="Background" Value="{DynamicResource PrimaryHueMidBrush}"/>
         <Setter Property="BorderBrush" Value="{DynamicResource PrimaryHueMidBrush}"/>
         <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidForegroundBrush}"/>
+        <Setter Property="wpf:ShadowAssist.ShadowDepth" Value="Depth1" />
         <Setter Property="TextBlock.FontWeight" Value="DemiBold"/>
         <Setter Property="TextBlock.FontSize" Value="15"/>
         <Setter Property="BorderThickness" Value="1"/>
@@ -58,7 +60,8 @@
                         </Storyboard>
                     </ControlTemplate.Resources>
                     <Grid>
-                        <Border Background="{TemplateBinding Background}" Effect="{StaticResource MaterialDesignShadowDepth1}" />
+                        <Border Background="{TemplateBinding Background}" 
+                                Effect="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ShadowAssist.ShadowDepth), Converter={x:Static converters:ShadowConverter.Instance}}" />
                         <Border Background="{TemplateBinding Background}" x:Name="border" CornerRadius="2" />
                         <Border Background="White" CornerRadius="2" x:Name="ClickBorder" Opacity="0" RenderTransformOrigin="0.5,0.5" >
                             <Border.RenderTransform>
@@ -222,14 +225,16 @@
         <Setter Property="BorderThickness" Value="1"/>
         <Setter Property="HorizontalContentAlignment" Value="Center"/>
         <Setter Property="VerticalContentAlignment" Value="Center"/>
+        <Setter Property="wpf:ShadowAssist.ShadowDepth" Value="Depth3" />
         <Setter Property="Padding" Value="1"/>
         <Setter Property="Width" Value="40" />
         <Setter Property="Height" Value="40" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type Button}">
                     <Grid>
-                        <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" Effect="{DynamicResource MaterialDesignShadowDepth1}"
+                        <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" 
+                                 Effect="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ShadowAssist.ShadowDepth), Converter={x:Static converters:ShadowConverter.Instance}}"
                                  x:Name="border" />
                         <wpf:Ripple Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Focusable="False"  
                                     Feedback="White"

diff --git a/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Card.xaml b/MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Card.xaml
@@ -11,7 +11,7 @@
 
     <ControlTemplate TargetType="{x:Type wpf:Card}" x:Key="CardTemplate">
         <Border Margin="{TemplateBinding Margin}"
-                Effect="{StaticResource MaterialDesignShadowDepth2}"
+                Effect="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ShadowAssist.ShadowDepth), Converter={x:Static converters:ShadowConverter.Instance}}"
                 CornerRadius="{TemplateBinding UniformCornerRadius}" Background="Transparent">
             <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" 
                     x:Name="PART_ClipBorder"
@@ -28,6 +28,7 @@
         <Setter Property="Template" Value="{StaticResource CardTemplate}" />
         <Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}" />
         <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="wpf:ShadowAssist.ShadowDepth" Value="Depth2" />
     </Style>
 
 </ResourceDictionary>