Question

I am developng a WPF application which will be used on a couple of different PC types. The first type is more of a development machine with dual hi-res monitors; the second is a hand-held touch screen about 800×600.

Using the MVVM pattern, I have developed some different Views which display more or less information depending on the chosen mode. In general, the layout scales well enough.

I also have some dialog boxes but at the moment these are optimised for the hi-res mode. Unfortunately the buttons appear very small on the touch screen and are difficult to hit reliably.

I was wondering how to restyle the dialogs dynamically. I would like to have one application setting which sets the screen type and thereby control styles. So for example, if the screen is a touch screen then all buttons and menus will have a larger default size.

Are Themes the way to go? If so, can someone point me at a good tutorial? (not just using existing themes but also creating them)

Answer 1

In the interest of changing styles, I do the following:

1. Create a style sheet for each type of theme I want.
2. Set all style references throughout my project to DynamicResource instead of “StaticResource”.
3. Use manipulation of ResourceDictionaries.

In this example, I have themes for High, Medium, and Low quality. My style sheets paths are:

• /Assets/Styles/GlobalStylesLow.xaml
• /Assets/Styles/GlobalStylesMed.xaml
• /Assets/Styles/GlobalStylesHigh.xaml

The code for the manipulation works like this:

/// <summary>
/// Level of graphics quality enum.
/// </summary>
public enum GraphicsQuality
{
    /// <summary>
    /// Low
    /// </summary>
    Low = 0,

    /// <summary>
    /// Medium
    /// </summary>
    Medium = 1,

    /// <summary>
    /// High
    /// </summary>
    High = 2
}


/// <summary>
/// Sets the Application Resource Dictionaries based on selection.
/// </summary>
/// <param name="quality">The quality.</param>
/// <param name="onRedraw">The on redraw.</param>
public static void UpdateStyles(
    Enums.GraphicsQuality quality = Enums.GraphicsQuality.High, Action onRedraw = null)
{
    // Reset resource dictionaries
    Application.Current.Resources.MergedDictionaries.Clear();

    // Base style path
    const string basePath = "/<project_base>;component/Assets/Styles";

    // Evaluate global quality
    switch (quality)
    {
        case Enums.GraphicsQuality.High:
            LoadStyle(basePath + "/GlobalStylesHigh.xaml");
            break;

        case Enums.GraphicsQuality.Medium:
            LoadStyle(basePath + "/GlobalStylesMed.xaml");
            break;

        case Enums.GraphicsQuality.Low:
            LoadStyle(basePath + "/GlobalStylesLow.xaml");
            break;
    }

    // Redraw
    if (onRedraw != null)
    {
        onRedraw();
    }
}


/// <summary>
/// Loads a specific style by Uri.
/// </summary>
/// <param name="stylePath">The style path.</param>
private static void LoadStyle(string stylePath)
{
    var dic = new ResourceDictionary
    {
        Source = new Uri(stylePath, UriKind.Relative)
    };
    Application.Current.Resources.MergedDictionaries.Add(dic);
}

When the condition exists to change your StyleSheet, call UpdateStyles.

Note:
The onRedraw parameter is simply a final action to perform after updating the style. In some cases, you may want to pass

this.InvalidateVisual

from the UI if you are having issues with the UI properly updating.