Outer bevel effect on text in WPF

问题

Is it possible to apply an outer bevel effect to the label text in WPF?

as for me, the Glow effect should be sufficient:

回答1:

Here's a way to get Glow-effect on Text. Using the OutlinedText control from this link which offers Stroke.

<local:OutlinedText FontSize="100"
                    Fill="Black"
                    Bold="True"
                    Stroke="White"
                    StrokeThickness="3"
                    Text="Glow">
    <local:OutlinedText.Effect>
        <DropShadowEffect ShadowDepth="0"
                          Color="White"
                          Opacity="1"
                          BlurRadius="12"/>
    </local:OutlinedText.Effect>
</local:OutlinedText>

Update
This is the closest I've come to a Bevel effect but it doesn't work very well. Used the approach from this link.

<Style x:Key="ContentControlStyle1" TargetType="{x:Type ContentControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ContentControl}">
                <Grid>
                    <TextBlock Name="Highlight" Foreground="#66FFFFFF" Text="{TemplateBinding Content}" />
                    <TextBlock Name="Shadow" Margin="0,4,0,0" Foreground="#CC000000" Text="{TemplateBinding Content}"/>
                    <ContentPresenter Margin="0,2,0,0"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<ContentControl Style="{DynamicResource ContentControlStyle1}" FontSize="101" Foreground="DarkGray" Content="Bevel"/>

回答2:

I'm not particularly happy with this 'solution':

<TextBlock Text="Hello World!" Foreground="Red">
   <TextBlock.Effect>
      <BlurEffect Radius="1" KernelType="Box" />
   </TextBlock.Effect>
</TextBlock>
<TextBlock Text="Hello World!" />

Other option is to make your own pixel shader, I'm not very good at that so I'm afraid that I cant help you :/

edit: Better solution, still not bevel though.

<TextBlock Text="Hello World!">
   <TextBlock.Effect>
      <DropShadowEffect BlurRadius="2" Color="Red" Direction="0" ShadowDepth="0" />
   </TextBlock.Effect>
</TextBlock>

回答3:

As far as i know this could of work:

<Label Content="Hi there!">
<Label.BitmapEffect>
<OuterGlowBitmapEffect/>
</Label.BitmapEffect>
</Label>

I have NOT tested this in a label, but i has worked for me in other controls and shapes, also, check out all the effect list IntelliSense gives you :)

回答4:

Ah, okay I understand your problem better.

Try something like this:

<Grid>
   <Grid.Resources>
       <OuterGlowBitmapEffect GlowColor="Blue" GlowSize="5" x:key="Glow" />
   </Grid.Resources>
   <Label Content="Blah!" BitmapEffect="{StaticResource Glow}" />
</Grid>

I get "Blah!" with a blue glow. Seems like a decent work around since Label's content can't be set twice.

Hope that helps!

EDIT: This won't work unless you're using Framework 3.5 as BitmapEffect has been deprecated. :(

回答5:

Followintg Oggy's suggestion:

<Label.Effect>
    <DropShadowEffect BlurRadius="5" 
                      Color="Red" 
                      Opacity="1" 
                      ShadowDepth="0" />
</Label.Effect>

来源：https://stackoverflow.com/questions/4334704/outer-bevel-effect-on-text-in-wpf

标签

.net

wpf

wpf-controls