ColorZone doesn't drop shadow in WPF MaterialDesign

1.3k views Asked by At

I try to make ColorZone in WPF using the MaterialDesign library. But when I set

materialDesign:ShadowAssist.ShadowDepth="Depth5"

it doesn't show any shadow. Below is a full code of the sample app where it doesn't work. Can anyone tell me what I am doing wrong?

  1. I added MaterialDesignThemes to the project.

  2. In app.xaml paste this:

<Application
    x:Class="TestShadow.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestShadow"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    StartupUri="MainWindow.xaml">

    <Application.Resources>
        <ResourceDictionary>
            
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:BundledTheme
                    BaseTheme="Light"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime" />
                <ResourceDictionary
                    Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
            
        </ResourceDictionary>
    </Application.Resources>
</Application>
  1. And to MainWindow.xaml I added:
<Window
    x:Class="TestShadow.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:TestShadow"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    mc:Ignorable="d"
    Title="MainWindow"
    Height="450"
    Width="800">

    <Grid>

        <materialDesign:ColorZone
            Mode="PrimaryDark"
            Padding="16"
            materialDesign:ShadowAssist.ShadowDepth="Depth5">

            <TextBlock
                Text="Material Design In XAML Toolkit"
                VerticalAlignment="Center" />

        </materialDesign:ColorZone>

    </Grid>
    
</Window>

Result, no shadow:

result

1

There are 1 answers

0
Alexander Shapovalov On

Apparently there is some problem for the MaterialDesign current version. The only way I have found is to place the Card element under the ColorZone. In this case, the shadow becomes visible.