WPF DropShadow Disappears

Question

Wpf dropshadow disappears. Here is how to reproduce.

Type the following in xaml pad.

<Page.Resources>
    <DropShadowEffect x:Key="shadow"
        Opacity="1"
        ShadowDepth="1"
        Color="Blue"
        BlurRadius="30"/>
</Page.Resources>
<Grid>
    <Button  HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,0">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border x:Name="Bd"
                                    BorderBrush="Black" BorderThickness="1"
                                    Background="Yellow"
                                    CornerRadius="8"
                                    Effect="{StaticResource shadow}">
                                <TextBlock Text="Hello out there"  HorizontalAlignment="Center" VerticalAlignment="Center"  />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Button.Style>
    </Button>
</Grid>

You should see some text with a border abound it, and a drop shadow around the border.

Now change the Margin="0,0,0,0" to Margin="0,300,0,0", and size your xaml pad window so you can see the border. On my machine, the drop shadow is now gone.

Anyone else see this? Please help.

Answer 1

I wish I had a good explanation for you, but there were some weird things in your XAML that I played with and I think I have a solution for you.

1. If you use a Grid, most likely you want to lay out a specific number of rows and columns. You should specify those. This doesn't affect your problem, however.
2. Likewise, you should specify the Row and Column for your element because you'll eventually need to put this information in your XAML anyway. It's a good habit to start with IMO.
3. The problem that I can't explain is with the combination of HorizontalAlignment and VerticalAlignment. When you put the Button in the Grid, I would expect the Button to take up the entire space, but it doesn't. The only way you can make this work as far as I could figure out was to specify Height and Width. If you do this, the Effect will work. I found that the threshold in your original XML was a total Y margin of 239. For example, if you used 0,239,0,0, it would fail. If you used 0,139,0,100, it would also fail because the sum is 239. Weird stuff.

Here's my XAML that works:

<Page.Resources>
    <DropShadowEffect x:Key="shadow"
        Opacity="1"
        ShadowDepth="2"
        Color="Blue"
        BlurRadius="30"/>
</Page.Resources>
<Grid Width="Auto" Height="Auto">
  <Grid.RowDefinitions>
    <RowDefinition></RowDefinition>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition></ColumnDefinition>
  </Grid.ColumnDefinitions>
    <Button Width="90" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,300,0,0" Grid.Row="0" Grid.Column="0">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border x:Name="Bd"
                                    BorderBrush="Black" BorderThickness="1"
                                    Background="Yellow"
                                    CornerRadius="8"
                                    Effect="{StaticResource shadow}">
                                <TextBlock Text="Hello out there"  HorizontalAlignment="Center" VerticalAlignment="Center"  />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Button.Style>
    </Button>

EDIT The OP does not want to specify a size for the Button because the Content of the Button can change dynamically. It turns out that if you set the MinHeight to something like 18 (I think this is reasonable for most content), the dropshadow effect will work again.

<Border x:Name="Bd" BorderBrush="Black" BorderThickness="1" Background="Yellow" CornerRadius="8" Effect="{StaticResource shadow}" MinHeight="18">
  <StackPanel Orientation="Vertical">
    <TextBlock>hi</TextBlock>
    <TextBlock>there</TextBlock>
  </StackPanel>
</Border>