The keys and styles on this page are on develop and ship with the next release. 2.4.11 has only the Metro keys of Styles/Fonts.xaml, and its Windows 10 styles write most controls at 12.
Each of the three looks writes in its own font. Metro has the keys of Styles/Fonts.xaml it has always had. The Windows 10 and the WinUI look take Microsoft's values: Segoe UI for Windows 10, as the UWP generic.xaml has it, and Segoe UI Variable for WinUI, as TextBlock_themeresources.xaml of WinUI has it. Controls of both are written at 14, the ControlContentThemeFontSize of both.
The keys
| Key | Value |
|---|---|
MahApps.Fonts.Family.Control.Win10 |
Segoe UI |
MahApps.Fonts.Family.Control.WinUI |
Segoe UI Variable Text, Segoe UI |
MahApps.Fonts.Family.Caption.WinUI |
Segoe UI Variable Small, Segoe UI |
MahApps.Fonts.Family.Display.WinUI |
Segoe UI Variable Display, Segoe UI |
MahApps.Font.Size.Control.Win10 and MahApps.Font.Size.Control.WinUI are both 14, and every step of a ramp below has a size key of its own, such as MahApps.Font.Size.Title.WinUI. Every style of a set reads them as dynamic resources, so overriding a key in a window or in App.xaml changes what reads it and nothing else:
<system:Double x:Key="MahApps.Font.Size.Title.WinUI">32</system:Double>
Segoe UI Variable is a variable font, and WPF does not drive its optical size axis. What it does know are the three named cuts of it, Small, Text and Display, each with all its weights, so the WinUI keys pick the cut Microsoft assigns to the size: Small for the caption, Text up to the large body text, Display from the subtitle up. Windows 10 does not have Segoe UI Variable, and there every one of these keys falls back to Segoe UI.
The ramps
A ramp is a set of TextBlock styles, one per step. They are keyed, never implicit, which is what Microsoft does too; the Text page has the reason a TextBlock style must never be implicit. A text picks its step by key:
<TextBlock Style="{DynamicResource MahApps.Styles.TextBlock.Title.WinUI}" Text="Deep Thought" />
WinUI:
| Style | Size | Weight |
|---|---|---|
MahApps.Styles.TextBlock.Caption.WinUI |
12 | Normal, Small cut |
MahApps.Styles.TextBlock.Body.WinUI |
14 | Normal |
MahApps.Styles.TextBlock.BodyStrong.WinUI |
14 | SemiBold |
MahApps.Styles.TextBlock.BodyLarge.WinUI |
18 | Normal |
MahApps.Styles.TextBlock.BodyLargeStrong.WinUI |
18 | SemiBold |
MahApps.Styles.TextBlock.Subtitle.WinUI |
20 | SemiBold, Display cut |
MahApps.Styles.TextBlock.Title.WinUI |
28 | SemiBold, Display cut |
MahApps.Styles.TextBlock.TitleLarge.WinUI |
40 | SemiBold, Display cut |
MahApps.Styles.TextBlock.Display.WinUI |
68 | SemiBold, Display cut |
Windows 10:
| Style | Size | Weight |
|---|---|---|
MahApps.Styles.TextBlock.Caption.Win10 |
12 | Normal |
MahApps.Styles.TextBlock.Body.Win10 |
14 | Normal |
MahApps.Styles.TextBlock.Base.Win10 |
14 | SemiBold |
MahApps.Styles.TextBlock.Subtitle.Win10 |
20 | Normal |
MahApps.Styles.TextBlock.Title.Win10 |
24 | SemiLight |
MahApps.Styles.TextBlock.Subheader.Win10 |
34 | Light |
MahApps.Styles.TextBlock.Header.Win10 |
46 | Light |
WPF has no name for SemiLight, so the Windows 10 title sets the weight as the number 350, which is what SemiLight is.
Metro, made of the keys Styles/Fonts.xaml already had:
| Style | Size | Font |
|---|---|---|
MahApps.Styles.TextBlock.Caption |
12, MahApps.Font.Size.Content |
MahApps.Fonts.Family.Control |
MahApps.Styles.TextBlock.Body |
14, MahApps.Font.Size.Default |
MahApps.Fonts.Family.Control |
MahApps.Styles.TextBlock.Subtitle |
20, MahApps.Font.Size.Flyout.Header |
MahApps.Fonts.Family.Control |
MahApps.Styles.TextBlock.Subheader |
29.333, MahApps.Font.Size.SubHeader |
MahApps.Fonts.Family.Header (Segoe UI Light) |
MahApps.Styles.TextBlock.Header |
40, MahApps.Font.Size.Header |
MahApps.Fonts.Family.Header (Segoe UI Light) |
None of the ramps sets a line height. WinUI does not either; the line heights in Microsoft's type ramp come from the font.
The window
A plain TextBlock takes its font from the window it is in. The Windows 10 and the WinUI set therefore bring a window style each, MahApps.Styles.MetroWindow.Win10 and MahApps.Styles.MetroWindow.WinUI. The content of the window gets the font of the set at 14, and the title the font Windows writes its title bars in, at 12. The title has keys of its own, MahApps.Font.Size.Window.Title.Win10 and .WinUI and the families MahApps.Fonts.Family.Window.Title.Win10 and .WinUI, which the title bar of the ContentDialog reads as well.
A set hands these out by type, and WPF gives a style handed out that way only to that exact type. A window of your own that derives from MetroWindow, which is nearly every window, does not get it and has to name the style itself:
<mah:MetroWindow x:Class="MyApp.MainWindow"
Style="{DynamicResource MahApps.Styles.MetroWindow.WinUI}">
Related
Text covers the TextBlock and Label styles and why there is no implicit TextBlock style. The dialogs of both looks, the ContentDialog and the old dialogs, take their title and their message from these ramps. Since every key is read as a dynamic resource, a single dialog can be given another title font by putting the key into its CustomResourceDictionary.