Dropshadow出现在textblock本身周围而不是单个文本字符(Dropshadow appearing around textblock itself instead of the indi

Dropshadow出现在textblock本身周围而不是单个文本字符(Dropshadow appearing around textblock itself instead of the individual text characters)

在我的代码中，我在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>

In my code, I made a DataTemplate in a SurfaceListBox. I added a drop shadow to the stack panel as well as to the textblock within the stack panel. When I run it, the drop shadow on the textblock appears on the textblock UI element itself instead of the individual characters of text. I am wondering why this is happening and if there is a way to fix it, so the drop shadow does appear on the text.

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

最满意答案

您需要摆脱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>

You need to get rid of the Background color of the TextBlock. You can put a Rectangle behind the TextBlock to achieve the same effect.

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