WPF Glow Effect without BitmapEffects

Question

I've already tried looking for solutions to this problem, but haven't found anything.

I have a WPF Window with a custom C++/CLI hook to extend the frame (DWMAPI) and to extend the client area into the frame (Win32/NCCALCSIZE). I added a custom icon and caption with WPF. The markup for the window is as follows (keep in mind that the client area is resized to the edges of the glass frame):

<Window x:Class="ClrDwmHelper.WpfHost.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ns="clr-namespace:ClrDwmHelper.WpfHost"
        Title="My Window Title" Height="350" Width="300"
        Background="{x:Null}"
        SourceInitialized="Window_SourceInitialized"
        Loaded="Window_Loaded">
  <Window.Icon>
    <DrawingImage>
      <DrawingImage.Drawing>
        <GeometryDrawing Brush="White">
          <GeometryDrawing.Geometry>
            <RectangleGeometry Rect="0,0 16,16"/>
          </GeometryDrawing.Geometry>
        </GeometryDrawing>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Window.Icon>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="6"/>
      <RowDefinition Height="22"/>
      <RowDefinition Height="1*"/>
      <RowDefinition Height="6"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="6"/>
      <ColumnDefinition Width="1*"/>
      <ColumnDefinition Width="6"/>
    </Grid.ColumnDefinitions>
    <Grid Grid.RowSpan="2" Grid.ColumnSpan="3">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="1*"/>
      </Grid.ColumnDefinitions>
      <Image Name="SysMenu" Height="16" Width="16" Margin="6,7,6,5" Source="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=Icon}"/>
      <Grid Grid.Column="1" Margin="1,6,5,5">
        <TextBlock Name="Caption" IsHitTestVisible="False" Foreground="Black" Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=Title}"
                   FontFamily="{x:Static SystemFonts.CaptionFontFamily}"
                   FontSize="{x:Static SystemFonts.CaptionFontSize}"
                   FontStretch="Normal"
                   FontStyle="{x:Static SystemFonts.CaptionFontStyle}"
                   TextDecorations="{x:Static SystemFonts.CaptionFontTextDecorations}"
                   FontWeight="{x:Static SystemFonts.CaptionFontWeight}"
                   TextTrimming="WordEllipsis">
          <TextBlock.Effect>
            <DropShadowEffect ShadowDepth="0" Color="#FFFFFF" BlurRadius="15"/>
          </TextBlock.Effect>
        </TextBlock>
      </Grid>
    </Grid>

    <Border Grid.Row="2" Grid.Column="1" BorderBrush="#7FFFFFFF" BorderThickness="1" CornerRadius="1" IsHitTestVisible="False">
      <Border Background="White" BorderBrush="#9F000000" BorderThickness="1" CornerRadius="1" IsHitTestVisible="False">

      </Border>
    </Border>
  </Grid>
</Window>

The window looks like this:

I want a more opaque glow around the text (NOT the text block) than what there currently is (a DropShadowEffect with a radius of 15 is hardly visible, but the WINAPI glow with a radius of 15 is much more opaque). What would be the best way to do it? (Custom Effects included preferred)

Answer 1

As a temporary solution, I put a blurred white semitransparent Rectangle underneath the TextBlock. Works OK, although this is NOT what I want - I would like the text blurred without having to add a Rectangle.

Answer 2

As far as I understand your requirements, I guess you should use the BlurEffect class to achieve your goal.

I created a simple XAML file, which you can find at the end of this post, in which I played with various parameters of the DropShadowEffect (first column) and the BlurEffect (second column).

In case of the BlurEffect the trick is to include another TextBlock without this effect, so the text remains readable:

<Grid>
    <!-- Blurred text -->
    <TextBlock Foreground="#FFCCCCCC" Text="My Window Title">
    <TextBlock.Effect>
        <BlurEffect KernelType="Box" Radius="3.5"/>
    </TextBlock.Effect>
    </TextBlock>
    <!-- Crisp text -->
    <TextBlock Text="My Window Title"/>
</Grid>

Here is the full markup:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="Tan">
    <Grid Margin="20">
        <StackPanel Orientation="Horizontal">
            <StackPanel Width="200">
                <TextBlock Text="My Window Title"/>
                <TextBlock Text="My Window Title">
                    <TextBlock.Effect>
                        <DropShadowEffect
                            BlurRadius="5"
                            Color="#FFFFFF"
                            Direction="0"
                            ShadowDepth="0"/>
                    </TextBlock.Effect>
                </TextBlock>
                <TextBlock Text="My Window Title">
                    <TextBlock.Effect>
                        <DropShadowEffect
                            BlurRadius="5"
                            Color="#EEEEEE"
                            Direction="0"
                            ShadowDepth="0"/>
                    </TextBlock.Effect>
                </TextBlock>
                <TextBlock Text="My Window Title">
                    <TextBlock.Effect>
                        <DropShadowEffect
                            BlurRadius="2"
                            Color="#777777"
                            Direction="0"
                            ShadowDepth="0"/>
                    </TextBlock.Effect>
                </TextBlock>
                <TextBlock Text="My Window Title">
                    <TextBlock.Effect>
                        <DropShadowEffect
                            BlurRadius="3"
                            Color="#AAAAAA"
                            Direction="0"
                            ShadowDepth="0"/>
                    </TextBlock.Effect>
                </TextBlock>
            </StackPanel>
            <StackPanel>
                <TextBlock Text="My Window Title"/>
                <Grid>
                    <TextBlock Foreground="#FFFFFFFF" Text="My Window Title">
                        <TextBlock.Effect>
                            <BlurEffect KernelType="Box" Radius="2.0"/>
                        </TextBlock.Effect>
                    </TextBlock>
                    <TextBlock Text="My Window Title"/>
                </Grid>
                <Grid>
                    <TextBlock Foreground="#99FFFFFF" Text="My Window Title">
                        <TextBlock.Effect>
                            <BlurEffect KernelType="Box" Radius="3.0"/>
                        </TextBlock.Effect>
                    </TextBlock>
                    <TextBlock Text="My Window Title"/>
                </Grid>
                <Grid>
                    <TextBlock Foreground="#BB999999" Text="My Window Title">
                        <TextBlock.Effect>
                            <BlurEffect KernelType="Box" Radius="5.0"/>
                        </TextBlock.Effect>
                    </TextBlock>
                    <TextBlock Text="My Window Title"/>
                </Grid>
                <Grid>
                    <TextBlock Foreground="#FFCCCCCC" Text="My Window Title">
                        <TextBlock.Effect>
                            <BlurEffect KernelType="Box" Radius="3.5"/>
                        </TextBlock.Effect>
                    </TextBlock>
                    <TextBlock Text="My Window Title"/>
                </Grid>
            </StackPanel>
        </StackPanel>
    </Grid>
</Page>