CODEWITHSUNDEEP
c#xamlwindows-phone-8styling
Bohrend
Bohrend

Reputation: 1497

Windows Phone textoutlining

is it possible to outline text in windows phone 8, for example I have red text, but I want the outline to be black?

Should I do this in xaml of C#, and also if possible how? any examples will be much appreciated

thanx

Upvotes: 2

Views: 778

Answers (2)

Alexander Goldabin
Alexander Goldabin

Reputation: 1933

Since two TextBlocks with different FontWieghts won't help you with large text (just longer than simple "Hello") because bolder text will be ahead of thin one, I recommend you to use 4 TextBlocks shifted by 1 upper-left, upper-right etc. and set Opacity = 0.5 to smoothen the outline. Here an example: 

        <TextBlock Grid.Row="0" Text="Outlined text" Style="{StaticResource OutlineTb}">
        <TextBlock.RenderTransform>
            <TranslateTransform X="-1" Y="1" />
        </TextBlock.RenderTransform>
    </TextBlock>
    <TextBlock Grid.Row="0" Text="Outlined text" Style="{StaticResource OutlineTb}">
        <TextBlock.RenderTransform>
            <TranslateTransform X="-1" Y="-1" />
        </TextBlock.RenderTransform>
    </TextBlock>
    <TextBlock Grid.Row="0" Text="Outlined text" Style="{StaticResource OutlineTb}">
        <TextBlock.RenderTransform>
            <TranslateTransform X="1" Y="-1" />
        </TextBlock.RenderTransform>
    </TextBlock>
    <TextBlock Grid.Row="0" Text="Outlined text" Style="{StaticResource OutlineTb}">
        <TextBlock.RenderTransform>
            <TranslateTransform X="1" Y="1" />
        </TextBlock.RenderTransform>
    </TextBlock>

    <TextBlock Grid.Row="0"
               Text="Outlined text"
               FontSize="25"
               Foreground="White"
               FontWeight="Normal">
    </TextBlock>

And style:

    <Style TargetType="TextBlock" x:Key="OutlineTb">
        <Setter Property="FontSize" Value="25" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="FontWeight" Value="Normal" />
        <Setter Property="Opacity" Value="0.5" />
    </Style>

But keep in mind that it's quite "heavy" solution and still not as good as genuine outline.

Upvotes: 1

Rudi
Rudi

Reputation: 936

Here you can see how it WAS DONE: http://blog.mrlacey.co.uk/2010/06/silverlight-effects-and-windows-phone-7.html

It's not working anymore. Microsoft removed it, due to performance issues.

The performance hit that applications took from using these effects put too much of a strain on the system and it was decided that if we couldn’t deliver a perfomant feature we would disable until such a time as we could.

The only possibility would be to create 2 TextBlocks and change the FontSize, RenderTransfor, FontWeight,...

<TextBlock Text="{Binding ElementName=BackgroundText,Path=Text}" FontSize="25" Foreground="Red" FontWeight="ExtraBold">
</TextBlock>
<TextBlock Text="Hello" Name="BackgroundText" FontSize="25" Foreground="White" FontWeight="Bold">
<TextBlock.RenderTransform>
    <TranslateTransform X="0.5" Y="0" />
</TextBlock.RenderTransform>
</TextBlock>
</TextBlock>

Upvotes: 2

Related Questions