How to re-style WPF application when using lower resolution screen - wpf

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 800x600.
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:
Create a style sheet for each type of theme I want.
Set all style references throughout my project to DynamicResource instead of "StaticResource".
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.