Make Label / TextBlock readable on glass using the blur effect

Question

I am using WPF 3.5 with Service Pack 1 (SP1) and want to achieve something similar (the glass part is ready):

_{(source: ggpht.com )}

( Source )

( Source )

You can see a good blur around the text, which makes it very readable. I also found that the right approach is to use the DrawThemeTextEx API, which renders the blur using the recommended system parameters. However, how can I achieve the same effect using WPF?

I managed to find these links that contain useful resources:
How to make WPF text on Aero glass background readable?
Glass Marker Controls

They do this by duplicating the TextBlock and setting the Blur effect on it. However, this is not a real solution. Here's what it looks like:

Compare the effect with the images above, and you will see that the solution is still far away. So how do you get the desired effect with WPF? I am fine with emulation (without using DrawThemeTextEx API) as the result is pretty similar.

Thanks.

Answer 1

  <TextBlock ...> <TextBlock.Effect> <DropShadowEffect BlurRadius="10" Color="White" ShadowDepth="0" /> </TextBlock.Effect> </TextBlock> 

Answer 2

At Luke's request, I turn on 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 Label with the previously mentioned XAML and used it wherever I need text to make it glow.

Answer 3

What about something in these lines where you have a rectangle behind your text that is a bit blurry, I have used this several times. I find this makes it more readable because the blur covers a large 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> 

Answer 4

I had a problem with the implementation of the decorator, because it stood in the answer of Paya, so I will show how it can be wrapped in a full-fledged ready-to-use style resource that can be applied to any label in which the glass effect will be displayed, as well as disable the shortcut when disconnect and save alignment, border, etc .:

 <Style x:Key="GlassLabelStyle" TargetType="{x:Type Label}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Label}"> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True"> <Grid> <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" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> </ContentPresenter> </Decorator> </Decorator> </Decorator> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> <Setter Property="Opacity" Value="0.5"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> 

If the style is in your window or application resources, you can apply it like this:

 <Label Style="{StaticResource GlassLabelStyle}" 

And while I am in this, I ran into a problem with TextBox too, where you simply cannot change the background color when the control is disabled (it just keeps returning to white), so someone realized that you need to redefine the whole template! See ( https://stackoverflow.com/a/166778/ ). So, here is a ready-to-use style that will make the text field translucent when turned off (looks great on glass) and make its background translucent white with a more visible border if it is turned on:

 <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#01000000" /> <SolidColorBrush x:Key="DisabledBorderBrush" Color="#40000000" /> <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#88ffffff" /> <Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}"> <Setter Property="Background" Value="#88ffffff"/> <Setter Property="BorderBrush" Value="Black"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="TextBox"> <Border Name="Bd" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"> <ScrollViewer Name="PART_ContentHost" Background="{TemplateBinding Background}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter Value="{StaticResource DisabledBackgroundBrush}" Property="Background" /> <Setter Value="{StaticResource DisabledBorderBrush}" Property="BorderBrush"/> <Setter Value="{StaticResource DisabledForegroundBrush}" Property="Foreground" /> <Setter TargetName="PART_ContentHost" Property="Background" Value="{StaticResource DisabledBackgroundBrush}"/> <Setter TargetName="PART_ContentHost" Property="BorderBrush" Value="{StaticResource DisabledBackgroundBrush}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>