locked
text outline color? RRS feed

  • Question

  •  is there anyway to outline text? i want a textblock with white foreground and the outline color to be black is this possible?

    Sunday, October 12, 2008 10:13 PM

Answers

  • Nothing built in, but I've started a CodePlex project for a control that can do this:

    http://www.codeplex.com/sltext

    Sunday, October 12, 2008 10:22 PM
  • You can do it with Expression Design. You type whatever font you want.  Set the stroke to black and set the fill to white.  The downside is that you have to export the text to paths.  Here is the resulting XAML I just tried:

    <?xml version="1.0" encoding="utf-8"?>
    <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Untitled2" Width="1680" Height="1050" Clip="F1 M 0,0L 1680,0L 1680,1050L 0,1050L 0,0" Background="#FFECE6E6">
     <Canvas x:Name="Layer_1" Width="1680" Height="1050" Canvas.Left="0" Canvas.Top="0">
      <Canvas x:Name="Group" Width="108.52" Height="35.5599" Canvas.Left="710.716" Canvas.Top="376.426">
       <Path x:Name="Path" Width="27.88" Height="34.6" Canvas.Left="0" Canvas.Top="0.47998" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 27.38,7.21997L 17.78,7.21997L 17.78,34.58L 10.1,34.58L 10.1,7.21997L 0.5,7.21997L 0.5,0.97998L 27.38,0.97998L 27.38,7.21997 Z "/>
       <Path x:Name="Path_0" Width="21.16" Height="34.6" Canvas.Left="31.2" Canvas.Top="0.47998" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 51.86,34.58L 31.7,34.58L 31.7,0.97998L 50.9,0.97998L 50.9,7.21997L 39.38,7.21997L 39.38,14.42L 50.42,14.42L 50.42,20.66L 39.38,20.66L 39.38,28.34L 51.86,28.34L 51.86,34.58 Z "/>
       <Path x:Name="Path_1" Width="24.04" Height="35.5599" Canvas.Left="55.2" Canvas.Top="0" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 55.7,33.2375L 55.7,25.9399C 57.055,27.0599 58.525,27.9 60.11,28.46C 61.6951,29.02 63.295,29.3 64.91,29.3C 65.86,29.3 66.6888,29.21 67.3963,29.03C 68.1038,28.85 68.6951,28.6012 69.17,28.2837C 69.645,27.9662 69.9988,27.5925 70.2313,27.1625C 70.4637,26.7325 70.5801,26.265 70.5801,25.76C 70.5801,25.11 70.395,24.5287 70.025,24.0162C 69.655,23.5037 69.15,23.03 68.5101,22.595C 67.87,22.16 67.1113,21.74 66.2338,21.335C 65.3563,20.93 64.41,20.5175 63.395,20.0975C 60.805,19.0125 58.8751,17.6849 57.605,16.115C 56.335,14.545 55.7,12.65 55.7,10.43C 55.7,8.68994 56.0513,7.19495 56.7538,5.94495C 57.4563,4.69495 58.4138,3.66498 59.6263,2.85498C 60.8387,2.04498 62.2425,1.44995 63.8375,1.06995C 65.4325,0.689941 67.1226,0.5 68.9075,0.5C 70.6575,0.5 72.2088,0.60376 73.5613,0.811218C 74.9138,1.01874 76.16,1.33746 77.3,1.76746L 77.3,8.65997C 76.745,8.26001 76.14,7.90747 75.485,7.60248C 74.8301,7.29749 74.155,7.04498 73.46,6.84497C 72.765,6.64496 72.075,6.49744 71.39,6.40247C 70.7051,6.3075 70.0526,6.26001 69.4325,6.26001C 68.5875,6.26001 67.8175,6.34497 67.1226,6.51495C 66.4276,6.68494 65.8413,6.92499 65.3638,7.23499C 64.8863,7.54498 64.5162,7.91626 64.2538,8.34875C 63.9913,8.78125 63.86,9.26495 63.86,9.79999C 63.86,10.36 64.0062,10.8612 64.2988,11.3037C 64.5913,11.7462 65.0076,12.165 65.5475,12.5599C 66.0875,12.955 66.7425,13.3438 67.5125,13.7262C 68.2825,14.1088 69.1526,14.5 70.1226,14.9C 71.4476,15.46 72.6375,16.055 73.6925,16.6849C 74.7476,17.3149 75.6526,18.0262 76.4075,18.8187C 77.1625,19.6112 77.7401,20.5162 78.14,21.5337C 78.54,22.5512 78.7401,23.735 78.7401,25.085C 78.7401,26.95 78.3826,28.515 77.6675,29.78C 76.9525,31.045 75.9825,32.0699 74.7576,32.855C 73.5325,33.64 72.1075,34.2037 70.4825,34.5463C 68.8575,34.8887 67.1426,35.0599 65.3375,35.0599C 63.4825,35.0599 61.7188,34.9075 60.0463,34.6025C 58.3738,34.2975 56.925,33.8425 55.7,33.2375 Z "/>
       <Path x:Name="Path_2" Width="27.8801" Height="34.6" Canvas.Left="80.64" Canvas.Top="0.47998" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 108.02,7.21997L 98.42,7.21997L 98.42,34.58L 90.7401,34.58L 90.7401,7.21997L 81.14,7.21997L 81.14,0.97998L 108.02,0.97998L 108.02,7.21997 Z "/>
      </Canvas>
     </Canvas>
    </Canvas>

    Bart Czernicki

    www.silverlighthack.com

    Sunday, October 12, 2008 10:28 PM
  • From my understanding,

    you can use a border

    <Border Background ="Red" Width = "100" Height =-"20" Borderbrush="Green">

    <TextBlock Text="Text" Foreground="White"/>

    </Border>

     

    HTH

    Neal Gabriel

    Monday, October 13, 2008 3:21 PM

All replies

  • Nothing built in, but I've started a CodePlex project for a control that can do this:

    http://www.codeplex.com/sltext

    Sunday, October 12, 2008 10:22 PM
  • You can do it with Expression Design. You type whatever font you want.  Set the stroke to black and set the fill to white.  The downside is that you have to export the text to paths.  Here is the resulting XAML I just tried:

    <?xml version="1.0" encoding="utf-8"?>
    <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Untitled2" Width="1680" Height="1050" Clip="F1 M 0,0L 1680,0L 1680,1050L 0,1050L 0,0" Background="#FFECE6E6">
     <Canvas x:Name="Layer_1" Width="1680" Height="1050" Canvas.Left="0" Canvas.Top="0">
      <Canvas x:Name="Group" Width="108.52" Height="35.5599" Canvas.Left="710.716" Canvas.Top="376.426">
       <Path x:Name="Path" Width="27.88" Height="34.6" Canvas.Left="0" Canvas.Top="0.47998" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 27.38,7.21997L 17.78,7.21997L 17.78,34.58L 10.1,34.58L 10.1,7.21997L 0.5,7.21997L 0.5,0.97998L 27.38,0.97998L 27.38,7.21997 Z "/>
       <Path x:Name="Path_0" Width="21.16" Height="34.6" Canvas.Left="31.2" Canvas.Top="0.47998" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 51.86,34.58L 31.7,34.58L 31.7,0.97998L 50.9,0.97998L 50.9,7.21997L 39.38,7.21997L 39.38,14.42L 50.42,14.42L 50.42,20.66L 39.38,20.66L 39.38,28.34L 51.86,28.34L 51.86,34.58 Z "/>
       <Path x:Name="Path_1" Width="24.04" Height="35.5599" Canvas.Left="55.2" Canvas.Top="0" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 55.7,33.2375L 55.7,25.9399C 57.055,27.0599 58.525,27.9 60.11,28.46C 61.6951,29.02 63.295,29.3 64.91,29.3C 65.86,29.3 66.6888,29.21 67.3963,29.03C 68.1038,28.85 68.6951,28.6012 69.17,28.2837C 69.645,27.9662 69.9988,27.5925 70.2313,27.1625C 70.4637,26.7325 70.5801,26.265 70.5801,25.76C 70.5801,25.11 70.395,24.5287 70.025,24.0162C 69.655,23.5037 69.15,23.03 68.5101,22.595C 67.87,22.16 67.1113,21.74 66.2338,21.335C 65.3563,20.93 64.41,20.5175 63.395,20.0975C 60.805,19.0125 58.8751,17.6849 57.605,16.115C 56.335,14.545 55.7,12.65 55.7,10.43C 55.7,8.68994 56.0513,7.19495 56.7538,5.94495C 57.4563,4.69495 58.4138,3.66498 59.6263,2.85498C 60.8387,2.04498 62.2425,1.44995 63.8375,1.06995C 65.4325,0.689941 67.1226,0.5 68.9075,0.5C 70.6575,0.5 72.2088,0.60376 73.5613,0.811218C 74.9138,1.01874 76.16,1.33746 77.3,1.76746L 77.3,8.65997C 76.745,8.26001 76.14,7.90747 75.485,7.60248C 74.8301,7.29749 74.155,7.04498 73.46,6.84497C 72.765,6.64496 72.075,6.49744 71.39,6.40247C 70.7051,6.3075 70.0526,6.26001 69.4325,6.26001C 68.5875,6.26001 67.8175,6.34497 67.1226,6.51495C 66.4276,6.68494 65.8413,6.92499 65.3638,7.23499C 64.8863,7.54498 64.5162,7.91626 64.2538,8.34875C 63.9913,8.78125 63.86,9.26495 63.86,9.79999C 63.86,10.36 64.0062,10.8612 64.2988,11.3037C 64.5913,11.7462 65.0076,12.165 65.5475,12.5599C 66.0875,12.955 66.7425,13.3438 67.5125,13.7262C 68.2825,14.1088 69.1526,14.5 70.1226,14.9C 71.4476,15.46 72.6375,16.055 73.6925,16.6849C 74.7476,17.3149 75.6526,18.0262 76.4075,18.8187C 77.1625,19.6112 77.7401,20.5162 78.14,21.5337C 78.54,22.5512 78.7401,23.735 78.7401,25.085C 78.7401,26.95 78.3826,28.515 77.6675,29.78C 76.9525,31.045 75.9825,32.0699 74.7576,32.855C 73.5325,33.64 72.1075,34.2037 70.4825,34.5463C 68.8575,34.8887 67.1426,35.0599 65.3375,35.0599C 63.4825,35.0599 61.7188,34.9075 60.0463,34.6025C 58.3738,34.2975 56.925,33.8425 55.7,33.2375 Z "/>
       <Path x:Name="Path_2" Width="27.8801" Height="34.6" Canvas.Left="80.64" Canvas.Top="0.47998" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 108.02,7.21997L 98.42,7.21997L 98.42,34.58L 90.7401,34.58L 90.7401,7.21997L 81.14,7.21997L 81.14,0.97998L 108.02,0.97998L 108.02,7.21997 Z "/>
      </Canvas>
     </Canvas>
    </Canvas>

    Bart Czernicki

    www.silverlighthack.com

    Sunday, October 12, 2008 10:28 PM
  • From my understanding,

    you can use a border

    <Border Background ="Red" Width = "100" Height =-"20" Borderbrush="Green">

    <TextBlock Text="Text" Foreground="White"/>

    </Border>

     

    HTH

    Neal Gabriel

    Monday, October 13, 2008 3:21 PM
  • Hi Ferdna,

    is there anyway to outline text? i want a textblock with white foreground and the outline color to be black is this possible?

    Neal Gabriel has provided a more simple sample here.  

    <Border Background ="Red" Width = "100" Height ="20" BorderBrush="DarkGray" BorderThickness="1">
                <TextBlock Text="Text" Foreground="White"/>
            </Border>

    Best regards,

    Jonathan

    Monday, October 13, 2008 10:09 PM
  • Bill Reiss, bartczernicki:

    that is what i was looking for thank you guys.

    Tuesday, October 14, 2008 11:09 AM
  • This doesn't seem to be anywhere near "stroke."  I just see a rect around the text.

    Monday, January 23, 2012 3:12 PM