WPF DropShadow消失 [英] WPF DropShadow Disappears

问题描述

WPF阴影消失. 复制方法如下.

Wpf dropshadow disappears. Here is how to reproduce.

在xaml键盘中输入以下内容.

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.

现在将 Margin ="0,0,0,0" 更改为 Margin ="0,300,0,0" ，并调整您的xaml填充窗口的大小可以看到边界.在我的机器上，阴影消失了.

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.

推荐答案

我希望我对您有一个很好的解释，但是您在XAML中玩过一些奇怪的事情，并且我想我为您提供了解决方案.

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. 如果使用网格，则很可能希望布置特定数量的行和列.您应该指定这些.但是，这不会影响您的问题.
2. 同样，您应该为元素指定行和列，因为无论如何最终您最终都需要将此信息放入XAML中.从IMO开始是一个好习惯.
3. 我无法解释的问题是Horizo​​ntalAlignment和VerticalAlignment的组合.当您将Button放入网格中时，我希望Button会占据整个空间，但事实并非如此.据我所知，使这项工作可行的唯一方法是指定高度和宽度.如果执行此操作，效果将起作用.我发现原始XML中的阈值总计Y裕度为239.例如，如果使用0,239,0,0，它将失败.如果您使用0,139,0,100，它也将失败，因为总和为239.奇怪的东西.

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.

这是我的XAML起作用的

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>

编辑，OP不想为Button指定大小，因为Button的内容可以动态更改.事实证明，如果将MinHeight设置为18(我认为这对于大多数内容来说都是合理的)，则阴影效果将再次起作用.

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>

这篇关于WPF DropShadow消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！