Winui3 typography guidance and Wpf.Ui.Gallery improvements

src/Wpf.Ui.Gallery/App.xaml

@@ -15,6 +15,8 @@
                 <ResourceDictionary Source="Controls/ControlDocumentationSummary.xaml" />
                 <ResourceDictionary Source="Controls/GalleryControlPresenter.xaml" />
                 <ResourceDictionary Source="Controls/GalleryNavigationPresenter.xaml" />
+                <ResourceDictionary Source="Controls/ControlExample.xaml" />
+                <ResourceDictionary Source="Controls/TypographyControl.xaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Application.Resources>

src/Wpf.Ui.Gallery/App.xaml.cs

@@ -24,6 +24,7 @@
 using Wpf.Ui.Gallery.Views.Pages.BasicInput;
 using Wpf.Ui.Gallery.Views.Pages.Collections;
 using Wpf.Ui.Gallery.Views.Pages.DateAndTime;
+using Wpf.Ui.Gallery.Views.Pages.DesignGuidance;
 using Wpf.Ui.Gallery.Views.Pages.DialogsAndFlyouts;
 using Wpf.Ui.Gallery.Views.Pages.Icons;
 using Wpf.Ui.Gallery.Views.Pages.Layout;
@@ -72,6 +73,9 @@ public partial class App : Application
             services.AddTransient<SettingsPage>();
             services.AddTransient<SettingsViewModel>();
 
+            //Design guidance
+            services.AddTransient<TypographyPage>();
+
             // Basic Input
             services.AddTransient<BasicInputPage>();
             services.AddTransient<BasicInputViewModel>();

src/Wpf.Ui.Gallery/CodeSamples/Typography/TypographySample_xaml.txt

@@ -0,0 +1,7 @@
+<ui:TextBlock FontTypography="Caption" Text="Caption" />
+<ui:TextBlock FontTypography="Body" Text="Body" />
+<ui:TextBlock FontTypography="BodyStrong" Text="Body Strong" />
+<ui:TextBlock FontTypography="Subtitle" Text="Subtitle" />
+<ui:TextBlock FontTypography="Title" Text="Title" />
+<ui:TextBlock FontTypography="TitleLarge" Text="Title Large" />
+<ui:TextBlock FontTypography="Display" Text="Display" />

src/Wpf.Ui.Gallery/Controls/ControlExample.cs

@@ -0,0 +1,94 @@
+using System.Diagnostics;
+using System.IO;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Markup;
+
+namespace Wpf.Ui.Gallery.Controls;
+
+[ContentProperty(nameof(ExampleContent))]
+public class ControlExample : Control
+{
+    public static readonly DependencyProperty ExampleContentProperty =
+        DependencyProperty.Register(nameof(ExampleContent),
+            typeof(object), typeof(ControlExample), new PropertyMetadata(null));
+
+    public static readonly DependencyProperty XamlCodeProperty =
+        DependencyProperty.Register(nameof(XamlCode),
+            typeof(string), typeof(ControlExample), new PropertyMetadata(null));
+
+    public static readonly DependencyProperty XamlCodeSourceProperty =
+        DependencyProperty.Register(nameof(XamlCodeSource),
+            typeof(Uri), typeof(ControlExample),
+            new PropertyMetadata(null,
+                static (o, args) => ((ControlExample)o).OnXamlCodeSourceChanged((Uri)args.NewValue)));
+
+    public static readonly DependencyProperty CsharpCodeProperty =
+        DependencyProperty.Register(nameof(CsharpCode),
+            typeof(string), typeof(ControlExample), new PropertyMetadata(null));
+
+    public static readonly DependencyProperty CsharpCodeSourceProperty =
+        DependencyProperty.Register(nameof(CsharpCodeSource),
+            typeof(Uri), typeof(ControlExample),
+            new PropertyMetadata(null,
+                static (o, args) => ((ControlExample)o).OnCsharpCodeSourceChanged((Uri)args.NewValue)));
+
+    public object? ExampleContent
+    {
+        get => GetValue(ExampleContentProperty);
+        set => SetValue(ExampleContentProperty, value);
+    }
+
+    public string? XamlCode
+    {
+        get => (string)GetValue(XamlCodeProperty);
+        set => SetValue(XamlCodeProperty, value);
+    }
+
+    public Uri? XamlCodeSource
+    {
+        get => (Uri)GetValue(XamlCodeSourceProperty);
+        set => SetValue(XamlCodeSourceProperty, value);
+    }
+
+    public string? CsharpCode
+    {
+        get => (string)GetValue(CsharpCodeProperty);
+        set => SetValue(CsharpCodeProperty, value);
+    }
+
+    public Uri? CsharpCodeSource
+    {
+        get => (Uri)GetValue(CsharpCodeSourceProperty);
+        set => SetValue(CsharpCodeSourceProperty, value);
+    }
+
+    private void OnXamlCodeSourceChanged(Uri uri)
+    {
+        XamlCode = LoadResource(uri);
+    }
+
+    private void OnCsharpCodeSourceChanged(Uri uri)
+    {
+        CsharpCode = LoadResource(uri);
+    }
+
+    private static string LoadResource(Uri uri)
+    {
+        try
+        {
+            if (Application.GetResourceStream(uri) is not { } steamInfo)
+                return string.Empty;
+
+            using StreamReader streamReader = new(steamInfo.Stream, Encoding.UTF8);
+            return streamReader.ReadToEnd();
+
+        }
+        catch (Exception e)
+        {
+            Debug.WriteLine(e);
+            return e.ToString();
+        }
+    }
+}

src/Wpf.Ui.Gallery/Controls/ControlExample.xaml

@@ -0,0 +1,89 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Wpf.Ui.Gallery.Controls"
+    xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml">
+
+    <Style TargetType="{x:Type controls:ControlExample}">
+        <Setter Property="Focusable" Value="False" />
+        <Setter Property="SnapsToDevicePixels" Value="True" />
+        <Setter Property="OverridesDefaultStyle" Value="True" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type controls:ControlExample}">
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
+                        </Grid.RowDefinitions>
+
+                        <Border
+                            Grid.Row="0"
+                            Padding="10"
+                            Background="{ui:ThemeResource CardStrokeColorDefaultBrush}"
+                            BorderBrush="{ui:ThemeResource CardStrokeColorDefaultBrush}"
+                            BorderThickness="1"
+                            CornerRadius="8,8,0,0">
+                            <ContentPresenter Content="{TemplateBinding ExampleContent}" />
+                        </Border>
+
+                        <ui:CardExpander
+                            Grid.Row="1"
+                            Background="{ui:ThemeResource CardBackgroundFillColorSecondaryBrush}"
+                            Header="Source code">
+                            <StackPanel>
+                                <StackPanel x:Name="XamlCodeBlock">
+                                    <ui:TextBlock
+                                        Margin="0,0,0,5"
+                                        FontTypography="BodyStrong"
+                                        Text="XAML" />
+
+                                    <ui:CodeBlock
+                                        Padding="0"
+                                        Background="Transparent"
+                                        BorderBrush="Transparent"
+                                        BorderThickness="0"
+                                        Content="{TemplateBinding XamlCode}" />
+                                </StackPanel>
+
+                                <Border
+                                    x:Name="Border"
+                                    Margin="0,20"
+                                    BorderBrush="{ui:ThemeResource CardBackgroundFillColorDefaultBrush}"
+                                    BorderThickness="1"
+                                    Visibility="Visible" />
+
+                                <StackPanel x:Name="CsharpCodeBlock">
+                                    <ui:TextBlock
+                                        Margin="0,0,0,5"
+                                        FontTypography="BodyStrong"
+                                        Text="CSharp" />
+
+                                    <ui:CodeBlock
+                                        Padding="0"
+                                        Background="Transparent"
+                                        BorderBrush="Transparent"
+                                        BorderThickness="0"
+                                        Content="{TemplateBinding CsharpCode}" />
+                                </StackPanel>
+                            </StackPanel>
+                        </ui:CardExpander>
+                    </Grid>
+
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="XamlCode" Value="{x:Null}">
+                            <Setter TargetName="XamlCodeBlock" Property="Visibility" Value="Collapsed" />
+                            <Setter TargetName="Border" Property="Visibility" Value="Collapsed" />
+                        </Trigger>
+
+                        <Trigger Property="CsharpCode" Value="{x:Null}">
+                            <Setter TargetName="CsharpCodeBlock" Property="Visibility" Value="Collapsed" />
+                            <Setter TargetName="Border" Property="Visibility" Value="Collapsed" />
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+</ResourceDictionary>

src/Wpf.Ui.Gallery/Controls/GalleryNavigationPresenter.xaml

@@ -25,15 +25,13 @@
                                     Icon="{Binding Icon, Mode=OneTime}"
                                     IsChevronVisible="True">
                                     <StackPanel>
-                                        <TextBlock
+                                        <ui:TextBlock
                                             Margin="0"
-                                            FontSize="13"
-                                            FontWeight="Medium"
+                                            FontTypography="BodyStrong"
                                             Text="{Binding Name, Mode=OneTime}"
                                             TextWrapping="WrapWithOverflow" />
-                                        <TextBlock
-                                            FontSize="10"
-                                            Foreground="{DynamicResource TextFillColorTertiaryBrush}"
+                                        <ui:TextBlock
+                                            Appearance="Tertiary"
                                             Text="{Binding Description, Mode=OneTime}"
                                             TextWrapping="WrapWithOverflow" />
                                     </StackPanel>
@@ -56,4 +54,4 @@
         </Setter>
     </Style>
 
-</ResourceDictionary>
+</ResourceDictionary>

src/Wpf.Ui.Gallery/Controls/TypographyControl.cs

@@ -0,0 +1,65 @@
+using System.Windows;
+using System.Windows.Controls;
+
+namespace Wpf.Ui.Gallery.Controls;
+
+public class TypographyControl : Control
+{
+    public static readonly DependencyProperty ExampleProperty =
+        DependencyProperty.Register(nameof(Example),
+            typeof(string), typeof(TypographyControl), new PropertyMetadata(string.Empty));
+
+    public static readonly DependencyProperty ExampleFontTypographyProperty =
+        DependencyProperty.Register(nameof(ExampleFontTypography),
+            typeof(FontTypography), typeof(TypographyControl),
+            new PropertyMetadata(FontTypography.Body,
+                static (o, args) =>
+                    ((TypographyControl)o).OnExampleFontTypographyChanged((FontTypography)args.NewValue)));
+
+    public static readonly DependencyProperty VariableFontProperty =
+        DependencyProperty.Register(nameof(VariableFont),
+            typeof(string), typeof(TypographyControl), new PropertyMetadata(string.Empty));
+
+    public static readonly DependencyProperty SizeLinHeightProperty =
+        DependencyProperty.Register(nameof(SizeLinHeight),
+            typeof(string), typeof(TypographyControl), new PropertyMetadata(string.Empty));
+
+    public static readonly DependencyProperty FontTypographyStyleProperty =
+        DependencyProperty.Register(nameof(FontTypographyStyle),
+            typeof(string), typeof(TypographyControl), new PropertyMetadata(FontTypography.Body.ToString()));
+
+    public string Example
+    {
+        get => (string)GetValue(ExampleProperty);
+        set => SetValue(ExampleProperty, value);
+    }
+
+    public FontTypography ExampleFontTypography
+    {
+        get => (FontTypography)GetValue(ExampleFontTypographyProperty);
+        set => SetValue(ExampleFontTypographyProperty, value);
+    }
+
+    public string VariableFont
+    {
+        get => (string)GetValue(VariableFontProperty);
+        set => SetValue(VariableFontProperty, value);
+    }
+
+    public string SizeLinHeight
+    {
+        get => (string)GetValue(VariableFontProperty);
+        set => SetValue(SizeLinHeightProperty, value);
+    }
+
+    public string FontTypographyStyle
+    {
+        get => (string)GetValue(FontTypographyStyleProperty);
+        set => SetValue(FontTypographyStyleProperty, value);
+    }
+
+    private void OnExampleFontTypographyChanged(FontTypography fontTypography)
+    {
+        FontTypographyStyle = fontTypography.ToString();
+    }
+}

src/Wpf.Ui.Gallery/Controls/TypographyControl.xaml

@@ -0,0 +1,57 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Wpf.Ui.Gallery.Controls"
+    xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml">
+
+    <Style TargetType="{x:Type controls:TypographyControl}">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Focusable" Value="False" />
+        <Setter Property="Padding" Value="0,15,10,15" />
+        <Setter Property="Margin" Value="0,10,0,0" />
+        <Setter Property="SnapsToDevicePixels" Value="True" />
+        <Setter Property="OverridesDefaultStyle" Value="True" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type controls:TypographyControl}">
+                    <Border
+                        Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        CornerRadius="4">
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="286" />
+                                <ColumnDefinition Width="156" />
+                                <ColumnDefinition Width="140" />
+                                <ColumnDefinition Width="*" />
+                            </Grid.ColumnDefinitions>
+
+                            <ui:TextBlock
+                                Grid.Column="0"
+                                Margin="24,0,0,0"
+                                VerticalAlignment="Center"
+                                FontTypography="{TemplateBinding ExampleFontTypography}"
+                                Text="{TemplateBinding Example}" />
+
+                            <TextBlock
+                                Grid.Column="1"
+                                VerticalAlignment="Center"
+                                Text="{TemplateBinding VariableFont}" />
+
+                            <TextBlock
+                                Grid.Column="2"
+                                VerticalAlignment="Center"
+                                Text="{TemplateBinding SizeLinHeight}" />
+
+                            <TextBlock
+                                Grid.Column="3"
+                                VerticalAlignment="Center"
+                                Text="{TemplateBinding FontTypographyStyle}" />
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+</ResourceDictionary>