How to add a non-blurring dropshadow on a Textblock

751 Views Asked by At

The question says it all. I cannot figure this out. I have tried to add a mirror text element, but I have a trigger that changes the fontsize when the mouse is over the element, which is not triggered due to the main element sitting on top. The usual workarounds for blurring do not work when it is the text itself that you want to dropshadow.

I am thinking of hacking this and adding two shadow textblocks that toggle visibility. But, I am not sure how to toggle that visibility as I can't use TargetName or a DataTrigger since it bases off the other element so, it will never trigger.

Per Request (Shadow is exaggerated so it can be seen)enter image description here:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:models="clr-namespace:DesktopDictation.Spelling.Models">
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="../FontStyles/TextBlock.DefaultFont.xaml"/>
  </ResourceDictionary.MergedDictionaries>
  <DropShadowEffect x:Key="BlackShadow" ShadowDepth="10" Direction="270" Color="Black" Opacity="75" BlurRadius="2"/>
  <Style x:Key="Spelling.TextGlyph" TargetType="TextBlock" BasedOn="{StaticResource TextBlock.DefaultFontFamilyStyle}">
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="Foreground" Value="#FFFFFF"/>
    <!--<Setter Property="Effect" Value="{StaticResource BlackShadow}"/>-->
    <Style.Triggers>
      <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Foreground" Value="#75BAFF"/>
        <Setter Property="FontWeight" Value="SemiBold"/>
        <Setter Property="FontSize" Value="22"/>
      </Trigger>
    </Style.Triggers>
  </Style>
  <Style x:Key="GlyphList" TargetType="ItemsControl">
    <Setter Property="ItemsPanel">
      <Setter.Value>
        <ItemsPanelTemplate>
          <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
        </ItemsPanelTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate">
      <Setter.Value>
        <DataTemplate DataType="models:SpellingGlyph">
          <Grid Name="MainGrid">
            <TextBlock Text="{Binding Text}" VerticalAlignment="Bottom" Effect="{StaticResource BlackShadow}"  Margin="0,0,5,0"/>
            <TextBlock Text="{Binding Text}" ToolTip="{Binding Pronunciations}" Style="{StaticResource Spelling.TextGlyph}" VerticalAlignment="Bottom" Margin="0,0,5,0"/>             
          </Grid>
        </DataTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>
1

There are 1 best solutions below

0
On

I figured it out! I had to use a Label so that I could use a ControlTemplate, which then allows me to use DataTrigger and TargetName

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:models="clr-namespace:DesktopDictation.Spelling.Models">
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="../FontStyles/TextBlock.DefaultFont.xaml"/>
  </ResourceDictionary.MergedDictionaries>
  <DropShadowEffect x:Key="BlackShadow" ShadowDepth="2" Direction="270" Color="Black" Opacity="75" BlurRadius="2"/>
  <Style x:Key="Spelling.TextGlyph" TargetType="TextBlock" BasedOn="{StaticResource TextBlock.DefaultFontFamilyStyle}">
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="Foreground" Value="#FFFFFF"/>
  </Style>
  <Style x:Key="GlyphList" TargetType="ItemsControl">
    <Setter Property="ItemsPanel">
      <Setter.Value>
        <ItemsPanelTemplate>
          <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
        </ItemsPanelTemplate>
      </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate">
      <Setter.Value>
        <DataTemplate DataType="models:SpellingGlyph">
          <Label x:Name="MainSmall" VerticalAlignment="Bottom">
            <Label.Template>
              <ControlTemplate>
                <Grid>
                  <TextBlock Name="Shadow" Text="{Binding Text}" VerticalAlignment="Bottom" Style="{StaticResource Spelling.TextGlyph}" Effect="{StaticResource BlackShadow}" Margin="0,0,5,0"/>
                  <TextBlock Name="MainText" Text="{Binding Text}" ToolTip="{Binding Pronunciations}" Style="{StaticResource Spelling.TextGlyph}" VerticalAlignment="Bottom" Margin="0,0,5,0"/>
                </Grid>
                <ControlTemplate.Triggers>
                  <DataTrigger Binding="{Binding ElementName=MainText, Path=IsMouseOver}" Value="True">
                    <Setter TargetName="MainText" Property="Foreground" Value="#75BAFF"/>
                    <Setter TargetName="MainText" Property="FontWeight" Value="SemiBold"/>
                    <Setter TargetName="MainText" Property="FontSize" Value="22"/>
                    <Setter TargetName="Shadow" Property="Foreground" Value="#75BAFF"/>
                    <Setter TargetName="Shadow" Property="FontWeight" Value="SemiBold"/>
                    <Setter TargetName="Shadow" Property="FontSize" Value="22"/>
                  </DataTrigger>
                </ControlTemplate.Triggers>
              </ControlTemplate>
            </Label.Template>
          </Label>
        </DataTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>