Gradient capabilities in Silverlight fonts

In the following tutorial I will show how extensive the font capabilities in Silverlight are. Being able to display beautiful fonts within xaml allows the ability to programmatically alter a designed font with gradients and drop shadows applied.

1- place text on artboard
2- select the gradient tab on the properties panel and apply any style gradient



Silverlight



XAML code

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	x:Class="TextGradient.MainPage"
	Width="640" Height="480" mc:Ignorable="d">
	<Grid x:Name="LayoutRoot" Margin="0,0,0,147" Background="White">
		<Rectangle Margin="10">
			<Rectangle.Fill>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="Black" Offset="0"/>
					<GradientStop Color="#FF555555" Offset="1"/>
				</LinearGradientBrush>
			</Rectangle.Fill>
		</Rectangle>
		<TextBlock Margin="233,105,11,0" FontSize="40" TextWrapping="Wrap" Text="Silverlight 4 is Here!" Height="53" VerticalAlignment="Top" FontFamily="Fonts/Fonts.zip#Myriad Pro"><TextBlock.Foreground>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="#FFE0E0E0" Offset="0"/>
					<GradientStop Color="#FF585858" Offset="1"/>
				</LinearGradientBrush>
			</TextBlock.Foreground>
			<TextBlock.Effect>
				<DropShadowEffect BlurRadius="2" Color="#FF161616" Opacity="0.78" ShadowDepth="3"/>
			</TextBlock.Effect>
		</TextBlock>
		<TextBlock Margin="233,162,34,92" FontSize="21.333" Foreground="White" TextWrapping="Wrap" FontFamily="Fonts/Fonts.zip#Myriad Pro" Text="Get started designing and developing with  Silverlight 4 today"/>
		<Image HorizontalAlignment="Left" Margin="31,77,0,85" Width="157" Source="silverlight.png"/>
	</Grid>
</UserControl>



Related links

Reversing Gradient stops in Silverlight
Embedding fonts in Silverlight

One Response to "Gradient capabilities in Silverlight fonts"

Leave a comment