112 lines
4.6 KiB
XML
112 lines
4.6 KiB
XML
<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"
|
|
|
|
|
|
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="{DynamicResource CardBackgroundFillColorDefaultBrush}"
|
|
Example="Caption"
|
|
ExampleFontTypography="Caption"
|
|
SizeLinHeight="12/16"
|
|
VariableFont="Regular" />
|
|
|
|
<controls:TypographyControl
|
|
Example="Body"
|
|
ExampleFontTypography="Body"
|
|
SizeLinHeight="14/20"
|
|
VariableFont="Regular" />
|
|
|
|
<controls:TypographyControl
|
|
Background="{DynamicResource 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="{DynamicResource 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="{DynamicResource CardBackgroundFillColorDefaultBrush}"
|
|
Example="Display"
|
|
ExampleFontTypography="Display"
|
|
SizeLinHeight="68/92"
|
|
VariableFont="SemiBold" />
|
|
</StackPanel>
|
|
</GroupBox>
|
|
</StackPanel>
|
|
|
|
</Page>
|