wpf - 阴影出现在文本 block 本身而不是单个文本字符周围

Question

在我的代码中，我在 SurfaceListBox 中创建了一个 DataTemplate。我向堆栈面板以及堆栈面板中的文本 block 添加了阴影。当我运行它时，文本 block 上的阴影出现在文本 block UI 元素本身上，而不是文本的单个字符上。我想知道为什么会发生这种情况以及是否有办法解决它，所以文本上确实会出现阴影。

<DataTemplate>
    <StackPanel Background="WhiteSmoke" Height="190" Width="190">      
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="140"/>
                <RowDefinition Height="50"/>
            </Grid.RowDefinitions>
            <Image VerticalAlignment="Top" HorizontalAlignment="Center" Height="140" Width="140" Stretch="Fill" Source="{Binding ImagePath}" />
            <TextBlock Grid.Row="1" Text="{Binding Name}" Background="#9FCC19" Width="190" Height="50" TextAlignment="Center" VerticalAlignment="Center" Foreground="WhiteSmoke" 
                                               FontFamily="Segoe" FontSize="20" >
                 <TextBlock.Effect>
                     <DropShadowEffect ShadowDepth="2" RenderingBias="Performance"/>
                 </TextBlock.Effect>
             </TextBlock>
         </Grid>
         <StackPanel.Effect>
             <DropShadowEffect ShadowDepth="2"/>
         </StackPanel.Effect>
    </StackPanel>
</DataTemplate>

Answer 1

你需要去掉 TextBlock 的背景颜色。你可以在 TextBlock 后面放一个 Rectangle 来达到同样的效果。

<DataTemplate>
    <StackPanel Background="WhiteSmoke" Height="190" Width="190">      
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="140"/>
                <RowDefinition Height="50"/>
            </Grid.RowDefinitions>
            <Image VerticalAlignment="Top" HorizontalAlignment="Center" Height="140" Width="140" Stretch="Fill" Source="{Binding ImagePath}" />
            <Rectangle Fill="#9FCC19" Grid.Row="1" Width="190" Height="50"/>
            <TextBlock Grid.Row="1" Text="{Binding Name}" Width="190" Height="50" TextAlignment="Center" VerticalAlignment="Center" Foreground="WhiteSmoke" 
                                           FontFamily="Segoe" FontSize="20" >
                 <TextBlock.Effect>
                     <DropShadowEffect ShadowDepth="2" RenderingBias="Performance"/>
                 </TextBlock.Effect>
             </TextBlock>
         </Grid>
         <StackPanel.Effect>
             <DropShadowEffect ShadowDepth="2"/>
         </StackPanel.Effect>
    </StackPanel>
</DataTemplate>