Dropshadow出现在textblock本身周围而不是单个文本字符

Question

在我的代码中,我在SurfaceListBox中创建了一个DataTemplate.我在堆栈面板和堆栈面板中的文本块中添加了一个投影.当我运行它时,文本块上的阴影会出现在文本块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>