Introducing Dynamic Fonts with Office2013 and VisualStudio2013 Themes in Telerik UI for WPF and Silverlight

You might have wondered how to change the FontSize of your application dynamically runtime. There are several approaches that you may choose from and the easiest is to add an Implicit style in your global resource dictionary targeting Control. There, the FontSize Setter value should be bound to an ItemsControl keeping the desired FontSize-s (let’s take a ComboBox for example): 

<Style TargetType="Control">
     <Setter Property="Foreground" Value="Red" /> 
     <Setter Property="FontSize" Value="{Binding ElementName=FontSizesComboBoxList, Path=SelectedValue}" /> 
 </Style>

This is quite an easy way to accomplish uniform FontSize across all controls in your application. However, most of the controls depend on more complex visual appearance. For example RadGridView has Headers and Footers with bigger FontSize and Cells with smaller one-s by design. So how we will proceed if we want to increase the FontSize of our application but keep to maintain a consistent silhouette i.e. (we would like to keep having Headers visually bigger than Cells)? I can’t think of a simple way to achieve this without having to add too many implicit styles and bindings. That is why we searched the best technique to provide a convenient way to change FontSize and FontFamily globally for all controls in your application.

Our Syntactic Sugar that Makes Fonts Dynamic

Almost two years ago, we introduced dynamic FontSize and FontFamily for our Windows8 and Windows8Touch themes, in which we used custom markup extensions technique. Based on the success of this approach, we are happy to announce that with Q1 2015 our latest themes, Office2013 and VisualStudio2013, now support dynamic FontSize and FontFamily.

As described in our documentation, all our controls have theme specific resources exposed through one major singleton object that contains the FontSize and FontFamily properties used for both themes. Those properties are public so you can easily modify those theme resources at one single point. We have special keys for them:  the FontSize property is the most commonly used in the VisualStudio2013 theme, and its default value is 12, while in Office2013 it is the FontSizeL property with default value of 15. The default FontFamily for VisualStudio2013 theme is Segoe UI, while for Office2013 theme it is Calibri.

More details regarding the usage of the rarely used font sizes inside the different controls can be found in the corresponding help article (Office2013 Theme and VisualStudio2013 Theme). All properties are public, so you can easily modify them at one single point. Behind the scenes, we have custom markup extension created for each theme:

• For brushes it will return shared static Brushes with their Color bound to the palette (replaced with DynamicResources in WPF)
• For FontSize and FontFamily it will create binding to the static palette’s property

Let’s say we have an application thatlooks like MS Excel, and is made with our RadRibbonView and RadSpreadsheet controls.



We will bind our RibbonComboBoxes to collection of integers that will represent our FontSizes and FontFamilies (system font family collection returned by System.Windows.Media.Fonts.SystemFontFamilies (The namespace System.Windows.Media is implied here). Now we want to change the FontFamily and the FontSize that is responsible for Titles and Headers in our application to something bigger (from 13 to 20 for example) and the FontFamily to Monotype Corsiva runtime. For the purpose we should wire to SelectionChanged event of the RibbonComboboxes and modify the FontSizeS and FontFamily properties that the Palette singleton instance exposes as desired:

private void FontSizeComboBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
     var selectedFontSize = sender as RadRibbonComboBox;
     if (selectedFontSize != null && selectedFontSize.SelectedValue != null)
   {
     double selectedValue = (double)(selectedFontSize.SelectedValue);
     Office2013Palette.Palette.FontSizeS = selectedValue;
    }
}

private void FontFamilyComboBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
   {
var selectedFont = sender as RadRibbonComboBox;
if (selectedFont != null && selectedFont.SelectedValue != null)
    {
      FontFamily selectedFontFamily = new FontFamily     (selectedFont.SelectedValue.ToString());
    Office2013Palette.Palette.FontFamily = selectedFontFamily;
    }
}

Voilà:

  

Note: For the test purpose we loaded sample .xslx document and used Office2013 theme with DarkGray variation.
Please note that for complex scenarios we strongly recommend setting font size only initially before the application is initialized. We recommend font sizes between 11px and 19px for the FontSize property. 

We plan to have such dynamic properties for our future themes. Have your sayings, please share it with us.