更新整理

WPFluent.Gallery/Views/Pages/DesignGuidance/TypographyPage.xaml

@@ -0,0 +1,111 @@
+<Page
+    x:Class="WPFluent.Gallery.Views.Pages.DesignGuidance.TypographyPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:WPFluent.Gallery.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="clr-namespace:WPFluent.Gallery.Views.Pages.DesignGuidance"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:ui="https://github.com/ShrlAlgo/WPFluent"
+    Title="TypographyPage"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    ui:Design.Background="{DynamicResource ApplicationBackgroundBrush}"
+    ui:Design.Foreground="{DynamicResource TextFillColorPrimaryBrush}"
+    Foreground="{DynamicResource TextFillColorPrimaryBrush}"
+    mc:Ignorable="d">
+
+    <StackPanel Margin="0,0,0,24">
+        <StackPanel>
+            <StackPanel Margin="0,0,0,4" Orientation="Horizontal">
+                <TextBlock Text="Type helps provide structure and hierarchy to UI. The default font for Windows is " />
+                <ui:HyperlinkButton
+                    Padding="0"
+                    Content="Segoe UI Variable."
+                    NavigateUri="https://learn.microsoft.com/windows/apps/design/downloads/#fonts" />
+            </StackPanel>
+            <TextBlock Text="Best practice is to use Regular weight for most text, use Semibold for titles. The minimum values should be 12px Regular, 14px Semibold." TextWrapping="WrapWithOverflow" />
+        </StackPanel>
+
+        <GroupBox Margin="0,25,0,0" >
+            <StackPanel>
+                <Grid>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="286" />
+                        <ColumnDefinition Width="156" />
+                        <ColumnDefinition Width="140" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+
+                    <ui:TextBlock
+                        Margin="24,0,0,0"
+                        Appearance="Secondary"
+                        FontTypography="Caption"
+                        Text="Example" />
+                    <ui:TextBlock
+                        Grid.Column="1"
+                        Appearance="Secondary"
+                        FontTypography="Caption"
+                        Text="Variable Font" />
+                    <ui:TextBlock
+                        Grid.Column="2"
+                        Appearance="Secondary"
+                        FontTypography="Caption"
+                        Text="Size / Line height" />
+                    <ui:TextBlock
+                        Grid.Column="3"
+                        Appearance="Secondary"
+                        FontTypography="Caption"
+                        Text="Style" />
+                </Grid>
+
+                <controls:TypographyControl
+                    Background="{ui:ThemeResource CardBackgroundFillColorDefaultBrush}"
+                    Example="Caption"
+                    ExampleFontTypography="Caption"
+                    SizeLinHeight="12/16"
+                    VariableFont="Regular" />
+
+                <controls:TypographyControl
+                    Example="Body"
+                    ExampleFontTypography="Body"
+                    SizeLinHeight="14/20"
+                    VariableFont="Regular" />
+
+                <controls:TypographyControl
+                    Background="{ui:ThemeResource CardBackgroundFillColorDefaultBrush}"
+                    Example="Body strong"
+                    ExampleFontTypography="BodyStrong"
+                    SizeLinHeight="14/20"
+                    VariableFont="SemiBold" />
+
+                <controls:TypographyControl
+                    Example="Subtitle"
+                    ExampleFontTypography="Subtitle"
+                    SizeLinHeight="20/28"
+                    VariableFont="SemiBold" />
+
+                <controls:TypographyControl
+                    Background="{ui:ThemeResource CardBackgroundFillColorDefaultBrush}"
+                    Example="Title"
+                    ExampleFontTypography="Title"
+                    SizeLinHeight="28/36"
+                    VariableFont="SemiBold" />
+
+                <controls:TypographyControl
+                    Example="Title Large"
+                    ExampleFontTypography="TitleLarge"
+                    SizeLinHeight="40/52"
+                    VariableFont="SemiBold" />
+
+                <controls:TypographyControl
+                    Background="{ui:ThemeResource CardBackgroundFillColorDefaultBrush}"
+                    Example="Display"
+                    ExampleFontTypography="Display"
+                    SizeLinHeight="68/92"
+                    VariableFont="SemiBold" />
+            </StackPanel>
+        </GroupBox>
+    </StackPanel>
+
+</Page>