WPF DropShadow 消失

Question

Wpf 阴影消失。 以下是如何重现。

在 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>

您应该看到一些带有边框的文本，并且边框周围有阴影。

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

还有其他人看到这个吗？请帮忙。

Answer 1

我希望我能为您提供一个很好的解释，但是我在您的 XAML 中遇到了一些奇怪的事情，我想我可以为您提供解决方案。

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

这是我的有效 XAML：

<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 不想指定按钮的大小，因为按钮的内容可以动态更改。事实证明，如果将 MinHeight 设置为 18 之类的值（我认为这对于大多数内容来说是合理的），阴影效果将再次起作用。

<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>