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 的组合。当您将 Button 放入 Grid 时，我希望 Button 占据整个空间，但事实并非如此。据我所知，唯一能让这项工作发挥作用的方法是指定 Height 和 Width。如果你这样做，效果将起作用。我发现原始 XML 中的阈值是 239 的总 Y 边距。例如，如果您使用 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>

EDIT OP 不想为 Button 指定大小，因为 Button 的内容可以动态更改。事实证明，如果您将 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>