更新整理
This commit is contained in:
GG Z
240
WPFluent.Gallery/Views/Pages/DesignGuidance/ColorsPage.xaml
Normal file
240
WPFluent.Gallery/Views/Pages/DesignGuidance/ColorsPage.xaml
Normal file
@@ -0,0 +1,240 @@
|
||||
<Page
|
||||
x:Class="WPFluent.Gallery.Views.Pages.DesignGuidance.ColorsPage"
|
||||
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"
|
||||
mc:Ignorable="d"
|
||||
d:DesignHeight="950"
|
||||
d:DesignWidth="800"
|
||||
Foreground="{DynamicResource TextFillColorPrimaryBrush}"
|
||||
Title="ColorsPage"
|
||||
ui:Design.Background="{DynamicResource ApplicationBackgroundBrush}"
|
||||
ui:Design.Foreground="{DynamicResource TextFillColorPrimaryBrush}">
|
||||
|
||||
<StackPanel Margin="0,0,0,24">
|
||||
<ui:TextBlock Text="Color provides an intuitive way of communicating information to users in your app: it can be used to indicate interactivity, give feedback to user actions, and give your interface a sense of visual continuity." TextWrapping="WrapWithOverflow" />
|
||||
<ui:TextBlock
|
||||
Margin="0,12,0,0"
|
||||
FontTypography="BodyStrong"
|
||||
Text="Using colors"
|
||||
TextWrapping="WrapWithOverflow" />
|
||||
<ui:TextBlock Text="The colors below are provided as part of WPF UI. You can reference them in your app using DynamicResource bindings." TextWrapping="WrapWithOverflow" />
|
||||
|
||||
<ui:TextBlock
|
||||
Margin="0,48,0,0"
|
||||
FontTypography="Subtitle"
|
||||
Text="Text"
|
||||
TextWrapping="WrapWithOverflow" />
|
||||
<Border
|
||||
Margin="0,12,0,0"
|
||||
Background="{ui:ThemeResource ControlFillColorDefaultBrush}"
|
||||
CornerRadius="8"
|
||||
Padding="12">
|
||||
<StackPanel>
|
||||
<ui:TextBlock Text="For UI labels and static text" />
|
||||
<ui:TextBlock
|
||||
Margin="0,12,0,24"
|
||||
HorizontalAlignment="Center"
|
||||
FontSize="42"
|
||||
FontWeight="SemiBold"
|
||||
Text="Aa" />
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<Grid MinHeight="120" Margin="0,12,0,0">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<Border
|
||||
Grid.Column="0"
|
||||
Background="{ui:ThemeResource TextFillColorPrimaryBrush}"
|
||||
CornerRadius="8,0,0,8"
|
||||
TextElement.Foreground="{ui:ThemeResource TextFillColorInverseBrush}">
|
||||
<Grid Margin="12">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
<ui:TextBlock
|
||||
Grid.Row="0"
|
||||
FontTypography="BodyStrong"
|
||||
Text="Text / Primary" />
|
||||
<ui:TextBlock Grid.Row="1" Text="Rest or hover" />
|
||||
<ui:TextBlock Grid.Row="2" Text="TextFillColorPrimaryBrush" />
|
||||
</Grid>
|
||||
</Border>
|
||||
<Border
|
||||
Grid.Column="1"
|
||||
Background="{ui:ThemeResource TextFillColorSecondaryBrush}"
|
||||
CornerRadius="0"
|
||||
TextElement.Foreground="{ui:ThemeResource TextFillColorInverseBrush}">
|
||||
<Grid Margin="12">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
<ui:TextBlock
|
||||
Grid.Row="0"
|
||||
FontTypography="BodyStrong"
|
||||
Text="Text / Secondary" />
|
||||
<ui:TextBlock Grid.Row="1" Text="Rest or hover" />
|
||||
<ui:TextBlock Grid.Row="2" Text="TextFillColorSecondaryBrush" />
|
||||
</Grid>
|
||||
</Border>
|
||||
<Border
|
||||
Grid.Column="2"
|
||||
Background="{ui:ThemeResource TextFillColorTertiaryBrush}"
|
||||
CornerRadius="0"
|
||||
TextElement.Foreground="{ui:ThemeResource TextFillColorInverseBrush}">
|
||||
<Grid Margin="12">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
<ui:TextBlock
|
||||
Grid.Row="0"
|
||||
FontTypography="BodyStrong"
|
||||
Text="Text / Tertiary" />
|
||||
<ui:TextBlock Grid.Row="1" Text="Pressed only (not accessible)" />
|
||||
<ui:TextBlock Grid.Row="2" Text="TextFillColorTertiaryBrush" />
|
||||
</Grid>
|
||||
</Border>
|
||||
<Border
|
||||
Grid.Column="3"
|
||||
Background="{ui:ThemeResource TextFillColorDisabledBrush}"
|
||||
CornerRadius="0,8,8,0"
|
||||
TextElement.Foreground="{ui:ThemeResource TextFillColorInverseBrush}">
|
||||
<Grid Margin="12">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
<ui:TextBlock
|
||||
Grid.Row="0"
|
||||
FontTypography="BodyStrong"
|
||||
Text="Text / Disabled" />
|
||||
<ui:TextBlock Grid.Row="1" Text="Disabled only (not accessible)" />
|
||||
<ui:TextBlock Grid.Row="2" Text="TextFillColorDisabledBrush" />
|
||||
</Grid>
|
||||
</Border>
|
||||
</Grid>
|
||||
|
||||
<ui:TextBlock
|
||||
Margin="0,48,0,0"
|
||||
FontTypography="Subtitle"
|
||||
Text="Accent Text"
|
||||
TextWrapping="WrapWithOverflow" />
|
||||
<Border
|
||||
Margin="0,12,0,0"
|
||||
Background="{ui:ThemeResource ControlFillColorDefaultBrush}"
|
||||
CornerRadius="8"
|
||||
Padding="12">
|
||||
<StackPanel>
|
||||
<ui:TextBlock Text="Recommended for links" />
|
||||
<ui:TextBlock
|
||||
Margin="0,12,0,24"
|
||||
HorizontalAlignment="Center"
|
||||
FontSize="42"
|
||||
FontWeight="SemiBold"
|
||||
Foreground="{ui:ThemeResource AccentTextFillColorPrimaryBrush}"
|
||||
Text="Aa" />
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<Grid MinHeight="120" Margin="0,12,0,0">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="*" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<Border
|
||||
Grid.Column="0"
|
||||
Background="{ui:ThemeResource AccentTextFillColorPrimaryBrush}"
|
||||
CornerRadius="8,0,0,8"
|
||||
TextElement.Foreground="{ui:ThemeResource TextFillColorInverseBrush}">
|
||||
<Grid Margin="12">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
<ui:TextBlock
|
||||
Grid.Row="0"
|
||||
FontTypography="BodyStrong"
|
||||
Text="Accent Text / Primary" />
|
||||
<ui:TextBlock Grid.Row="1" Text="Rest or hover" />
|
||||
<ui:TextBlock Grid.Row="2" Text="AccentTextFillColorPrimaryBrush" />
|
||||
</Grid>
|
||||
</Border>
|
||||
<Border
|
||||
Grid.Column="1"
|
||||
Background="{ui:ThemeResource AccentTextFillColorSecondaryBrush}"
|
||||
CornerRadius="0"
|
||||
TextElement.Foreground="{ui:ThemeResource TextFillColorInverseBrush}">
|
||||
<Grid Margin="12">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
<ui:TextBlock
|
||||
Grid.Row="0"
|
||||
FontTypography="BodyStrong"
|
||||
Text="Accent Text / Secondary" />
|
||||
<ui:TextBlock Grid.Row="1" Text="Rest or hover" />
|
||||
<ui:TextBlock Grid.Row="2" Text="AccentTextFillColorSecondaryBrush" />
|
||||
</Grid>
|
||||
</Border>
|
||||
<Border
|
||||
Grid.Column="2"
|
||||
Background="{ui:ThemeResource AccentTextFillColorTertiaryBrush}"
|
||||
CornerRadius="0"
|
||||
TextElement.Foreground="{ui:ThemeResource TextFillColorInverseBrush}">
|
||||
<Grid Margin="12">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
<ui:TextBlock
|
||||
Grid.Row="0"
|
||||
FontTypography="BodyStrong"
|
||||
Text="Accent Text / Tertiary" />
|
||||
<ui:TextBlock Grid.Row="1" Text="Pressed only (not accessible)" />
|
||||
<ui:TextBlock Grid.Row="2" Text="AccentTextFillColorTertiaryBrush" />
|
||||
</Grid>
|
||||
</Border>
|
||||
<Border
|
||||
Grid.Column="3"
|
||||
Background="{ui:ThemeResource AccentTextFillColorDisabledBrush}"
|
||||
CornerRadius="0,8,8,0"
|
||||
TextElement.Foreground="{ui:ThemeResource TextFillColorInverseBrush}">
|
||||
<Grid Margin="12">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
<ui:TextBlock
|
||||
Grid.Row="0"
|
||||
FontTypography="BodyStrong"
|
||||
Text="Accent Text / Disabled" />
|
||||
<ui:TextBlock Grid.Row="1" Text="Disabled only (not accessible)" />
|
||||
<ui:TextBlock Grid.Row="2" Text="AccentTextFillColorDisabledBrush" />
|
||||
</Grid>
|
||||
</Border>
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</Page>
|
||||
@@ -0,0 +1,12 @@
|
||||
namespace WPFluent.Gallery.Views.Pages.DesignGuidance;
|
||||
|
||||
/// <summary>
|
||||
/// Interaction logic for ColorsPage.xaml
|
||||
/// </summary>
|
||||
public partial class ColorsPage
|
||||
{
|
||||
public ColorsPage()
|
||||
{
|
||||
InitializeComponent();
|
||||
}
|
||||
}
|
||||
179
WPFluent.Gallery/Views/Pages/DesignGuidance/IconsPage.xaml
Normal file
179
WPFluent.Gallery/Views/Pages/DesignGuidance/IconsPage.xaml
Normal file
@@ -0,0 +1,179 @@
|
||||
<Page
|
||||
x:Class="WPFluent.Gallery.Views.Pages.DesignGuidance.IconsPage"
|
||||
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:models="clr-namespace:WPFluent.Gallery.Models"
|
||||
xmlns:ui="https://github.com/ShrlAlgo/WPFluent"
|
||||
Title="IconsPage"
|
||||
controls:PageControlDocumentation.DocumentationType="{x:Type ui:SymbolIcon}"
|
||||
d:DataContext="{d:DesignInstance local:IconsPage,
|
||||
IsDesignTimeCreatable=False}"
|
||||
d:DesignHeight="450"
|
||||
d:DesignWidth="800"
|
||||
ui:Design.Background="{DynamicResource ApplicationBackgroundBrush}"
|
||||
ui:Design.Foreground="{DynamicResource TextFillColorPrimaryBrush}"
|
||||
Foreground="{DynamicResource TextFillColorPrimaryBrush}"
|
||||
ScrollViewer.CanContentScroll="False"
|
||||
mc:Ignorable="d">
|
||||
|
||||
<Grid>
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="*" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<ui:TextBlock
|
||||
Grid.Row="0"
|
||||
Text="WPF UI uses Fluent System Icons. Although this font was also created by Microsoft, it does not contain all the icons for Windows 11. If you need the missing icons, add Segoe Fluent Icons to your application."
|
||||
TextWrapping="WrapWithOverflow" />
|
||||
<ui:HyperlinkButton
|
||||
Grid.Row="1"
|
||||
Margin="0,4,0,0"
|
||||
Padding="0"
|
||||
Content="Find out more about Fluent System Icons"
|
||||
NavigateUri="https://github.com/microsoft/fluentui-system-icons" />
|
||||
<ui:TextBlock
|
||||
Grid.Row="2"
|
||||
Margin="0,24,0,0"
|
||||
FontTypography="BodyStrong"
|
||||
Text="Fluent System Icons Library" />
|
||||
<Grid Grid.Row="3">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
<ui:AutoSuggestBox
|
||||
Grid.Column="0"
|
||||
MinWidth="320"
|
||||
Margin="0,4,0,0"
|
||||
HorizontalAlignment="Left"
|
||||
PlaceholderText="Search icons"
|
||||
Text="{Binding ViewModel.AutoSuggestBoxText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
|
||||
<CheckBox
|
||||
Grid.Column="1"
|
||||
MinWidth="0"
|
||||
Margin="12,0,0,0"
|
||||
Command="{Binding ViewModel.CheckboxCheckedCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:IconsPage}, Mode=OneWay}"
|
||||
CommandParameter="{Binding RelativeSource={RelativeSource Self}, Mode=OneWay}"
|
||||
Content="Is filled" />
|
||||
</Grid>
|
||||
|
||||
<Grid Grid.Row="4" Margin="0,12,0,0">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*" />
|
||||
<ColumnDefinition Width="Auto" />
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<Border
|
||||
Grid.Column="0"
|
||||
BorderBrush="{ui:ThemeResource CardBackgroundFillColorDefaultBrush}"
|
||||
BorderThickness="1,1,0,0"
|
||||
CornerRadius="8,0,0,0">
|
||||
<ui:VirtualizingItemsControl
|
||||
Margin="0,24,4,0"
|
||||
Padding="0"
|
||||
ItemsSource="{Binding ViewModel.FilteredIconsCollection, Mode=OneWay}"
|
||||
VirtualizingPanel.CacheLengthUnit="Pixel">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate DataType="{x:Type models:DisplayableIcon}">
|
||||
<Button
|
||||
Width="80"
|
||||
Height="80"
|
||||
Margin="2"
|
||||
Padding="0"
|
||||
HorizontalAlignment="Stretch"
|
||||
VerticalAlignment="Stretch"
|
||||
Command="{Binding ViewModel.IconSelectedCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:IconsPage}}"
|
||||
CommandParameter="{Binding Path=Id, Mode=OneTime}"
|
||||
ToolTip="{Binding Name, Mode=OneTime}"
|
||||
ToolTipService.InitialShowDelay="240">
|
||||
<ui:SymbolIcon
|
||||
Grid.Row="0"
|
||||
FontSize="28"
|
||||
Symbol="{Binding Icon, Mode=OneTime}" />
|
||||
</Button>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ui:VirtualizingItemsControl>
|
||||
</Border>
|
||||
<Border
|
||||
Grid.Column="1"
|
||||
MinWidth="300"
|
||||
Background="{ui:ThemeResource CardBackgroundFillColorSecondaryBrush}"
|
||||
BorderBrush="{ui:ThemeResource CardBackgroundFillColorDefaultBrush}"
|
||||
BorderThickness="0,1,1,0"
|
||||
CornerRadius="0,8,0,0">
|
||||
<Grid Margin="24">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
<RowDefinition Height="Auto" />
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<ui:TextBlock
|
||||
Grid.Row="0"
|
||||
FontTypography="BodyStrong"
|
||||
Text="{Binding ViewModel.SelectedSymbolName, Mode=OneWay}" />
|
||||
<ui:SymbolIcon
|
||||
Grid.Row="1"
|
||||
Margin="0,30,0,24"
|
||||
HorizontalAlignment="Left"
|
||||
Filled="{Binding ViewModel.IsIconFilled, Mode=OneWay}"
|
||||
FontSize="62"
|
||||
Symbol="{Binding ViewModel.SelectedSymbol, Mode=OneWay}" />
|
||||
<ui:TextBlock
|
||||
Grid.Row="2"
|
||||
FontTypography="BodyStrong"
|
||||
Text="Icon name" />
|
||||
<ui:TextBlock
|
||||
Grid.Row="3"
|
||||
Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
|
||||
Text="{Binding ViewModel.SelectedSymbolName, Mode=OneWay}" />
|
||||
<ui:TextBlock
|
||||
Grid.Row="4"
|
||||
Margin="0,8,0,0"
|
||||
FontTypography="BodyStrong"
|
||||
Text="Unicode point" />
|
||||
<ui:TextBlock
|
||||
Grid.Row="5"
|
||||
Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
|
||||
Text="{Binding ViewModel.SelectedSymbolUnicodePoint, Mode=OneWay}" />
|
||||
<ui:TextBlock
|
||||
Grid.Row="6"
|
||||
Margin="0,8,0,0"
|
||||
FontTypography="BodyStrong"
|
||||
Text="Text glyph" />
|
||||
<ui:TextBlock
|
||||
Grid.Row="7"
|
||||
Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
|
||||
Text="{Binding ViewModel.SelectedSymbolTextGlyph, Mode=OneWay}" />
|
||||
<ui:TextBlock
|
||||
Grid.Row="8"
|
||||
Margin="0,8,0,0"
|
||||
FontTypography="BodyStrong"
|
||||
Text="XAML" />
|
||||
<ui:TextBlock
|
||||
Grid.Row="9"
|
||||
MaxWidth="250"
|
||||
Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
|
||||
Text="{Binding ViewModel.SelectedSymbolXaml, Mode=OneWay}"
|
||||
TextWrapping="WrapWithOverflow" />
|
||||
</Grid>
|
||||
</Border>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Page>
|
||||
@@ -0,0 +1,19 @@
|
||||
using IconsViewModel = WPFluent.Gallery.ViewModels.Pages.IconsViewModel;
|
||||
|
||||
namespace WPFluent.Gallery.Views.Pages.DesignGuidance;
|
||||
|
||||
/// <summary>
|
||||
/// Interaction logic for IconsPage.xaml
|
||||
/// </summary>
|
||||
public partial class IconsPage : INavigableView<IconsViewModel>
|
||||
{
|
||||
public IconsViewModel ViewModel { get; }
|
||||
|
||||
public IconsPage(IconsViewModel viewModel)
|
||||
{
|
||||
ViewModel = viewModel;
|
||||
DataContext = this;
|
||||
|
||||
InitializeComponent();
|
||||
}
|
||||
}
|
||||
111
WPFluent.Gallery/Views/Pages/DesignGuidance/TypographyPage.xaml
Normal file
111
WPFluent.Gallery/Views/Pages/DesignGuidance/TypographyPage.xaml
Normal file
@@ -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>
|
||||
@@ -0,0 +1,9 @@
|
||||
namespace WPFluent.Gallery.Views.Pages.DesignGuidance;
|
||||
|
||||
public partial class TypographyPage
|
||||
{
|
||||
public TypographyPage()
|
||||
{
|
||||
InitializeComponent();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user