Make Label/TextBlock readable on glass using blur effect
<TextBlock ...>
<TextBlock.Effect>
<DropShadowEffect BlurRadius="10" Color="White" ShadowDepth="0" />
</TextBlock.Effect>
</TextBlock>
As per Luke's request, I include the XAML
for Decorator
s:
<Decorator>
<Decorator.Effect>
<DropShadowEffect BlurRadius="7" Color="White" ShadowDepth="0" />
</Decorator.Effect>
<Decorator>
<Decorator.Effect>
<DropShadowEffect BlurRadius="7" Color="White" ShadowDepth="0" />
</Decorator.Effect>
<Decorator>
<Decorator.Effect>
<DropShadowEffect BlurRadius="7" Color="White" ShadowDepth="0" />
</Decorator.Effect>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Decorator>
</Decorator>
</Decorator>
I created a ControlTemplate
for a Label
with the before-mentioned XAML, and used it everywhere I needed the text to glow.
How about something along these lines where you have a rectangle behind your text that blurs slightly, I have used this a few times. I find it makes it more readable because the blur covers a bigger area.
<Grid>
<Rectangle Fill="#8FFFFFFF"
Stroke="{x:Null}"
StrokeThickness="0"
VerticalAlignment="Center"
Width="{Binding ActualWidth, ElementName=PART_Title, Mode=Default}"
Height="{Binding ActualHeight, ElementName=PART_Title, Mode=Default}"
RadiusX="2"
RadiusY="2">
<Rectangle.Effect>
<BlurEffect Radius="10" />
</Rectangle.Effect>
</Rectangle>
<TextBlock x:Name="PART_Title"
Text="{Binding Title}"
Foreground="Black"
TextWrapping="NoWrap"
TextTrimming="CharacterEllipsis" />
</Grid>