Technique SL23:Using A Style Switcher to Increase Font Size of Silverlight Text Elements

Example 1: Style applied to all text elements within a RichTextBox container

Variations of this example could be employed to offer more choices. For example, multiple style switchers could be provided that gave three or more fontsize choices.

<UserControl x:Class="StyleSwitcherFontSize.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
   <UserControl.Resources>
       <Style x:Key="BiggerRTBFonts" TargetType="RichTextBox">
           <Setter Property="FontSize" Value="24"/>
       </Style>
   </UserControl.Resources>

   <StackPanel x:Name="LayoutRoot" Background="White">
       <Button Click="Button_Click">Super size fonts!</Button>
       <Button Name="Undo" Click="Undo_Click">Make those big fonts stop!</Button>
       <RichTextBox IsReadOnly="True" Name="rtb1">
           <RichTextBox.Blocks>
               <Paragraph>Various test text</Paragraph>
               <Paragraph>
                   <Bold>Some bold test text</Bold></Paragraph>
               <Paragraph>
                   <Italic>Some italic</Italic>
               </Paragraph>
               <Paragraph FontFamily="Times New Roman">A different font, why not?</Paragraph>
           </RichTextBox.Blocks>
       </RichTextBox>
   </StackPanel>
</UserControl>

The second listing is the C# code for the event handler . Note that all it does is change a style property, using a value that keys into the .Resources collection from XAML where the Style is defined. Another event handler nulls out the style and returns values to defaults.

private void Button_Click(object sender, RoutedEventArgs e)
{
  rtb1.Style = this.Resources["BiggerRTBFonts"] as Style;
}
private void Undo_Click(object sender, RoutedEventArgs e)
{
   rtb1.Style = null;
}

The following images show the original, and the applied style.

This example is shown in operation in the working example of Style Switcher Font Size.

Example 2: Font size increase applied to all text content by applying at UserControl level, and by percent increase logic

This example uses the inheritance characteristics of the FontSize property that is available to all Silverlight controls. Rather than using a style, this example uses a HoldEnd animation, to take advantage of the "By" behavior of the animation system that can increment an existing value by 2 (pixels) rather than replacing the value with a fixed pixel value.

The following is the XAML UI:

<UserControl x:Class="StyleSwitcherFontSize.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Name="rootcontrol">
   <UserControl.Resources>
       <Storyboard x:Key="BySize">
           <DoubleAnimation Storyboard.TargetName="rootcontrol" Storyboard.TargetProperty="FontSize" By="2" FillBehavior="HoldEnd" Duration="0"/>
       </Storyboard>
   </UserControl.Resources>
   <StackPanel x:Name="LayoutRoot" Background="White">
       <Button Click="Button_Click">Super size fonts!</Button>
       <Button Name="Undo" Click="Undo_Click">Make those big fonts stop!</Button>
       <TextBox Text="Various test text"/>
       <TextBox FontWeight="Bold" Text="Some bold test text"/>
       <TextBox FontStyle="Italic" Text="Some italic"/>
       <TextBox FontFamily="Times New Roman" Text="A different font, why not?"/>
   </StackPanel>
</UserControl>

The following are the C# event handlers.

private void Button_Click(object sender, RoutedEventArgs e)
{
   (this.Resources["BySize"] as Storyboard).Begin();
}
private void Undo_Click(object sender, RoutedEventArgs e)
{
   (this.Resources["BySize"] as Storyboard).Stop();
}

This example is shown in operation in the working example of By Animation Font Size.