Skip to content

Gallery Revamp: Design Sections Spacing Page #339

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Gallery Revamp: Design Sections Spacing Page #339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7c3f0b2
Upload Design Dialog and Card for Spacing page
GID0317 Aug 27, 2025
182c7aa
Add spacing page from winui3 gallery
GID0317 Aug 27, 2025
77f486c
add SpacingPage.cs for xaml side
GID0317 Aug 27, 2025
6868562
Implement navigation for 'Spacing' item
GID0317 Aug 27, 2025
160965f
Add Spacing item to NavigationRootPage
GID0317 Aug 27, 2025
085c217
Add 'Spacing' control details to Controls.Foundation.json
GID0317 Aug 27, 2025
760988b
Adjust margins and spacing in SpacingPage.xaml
GID0317 Aug 27, 2025
9b1242c
Use own container instead of placed under control example
GID0317 Aug 28, 2025
a856621
Revert wrong change to include right one
GID0317 Aug 28, 2025
ced6f51
Add temporary image theme aware support
GID0317 Aug 28, 2025
bc64b65
Merge branch 'iNKORE-NET:main' into Gallery-Revamp-Design-Spacing
GID0317 Sep 3, 2025
948c338
Merge branch 'iNKORE-NET:main' into Gallery-Revamp-Design-Spacing
GID0317 Sep 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added source/iNKORE.UI.WPF.Modern.Gallery/Assets/Design/Cards.dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/iNKORE.UI.WPF.Modern.Gallery/Assets/Design/Cards.light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/iNKORE.UI.WPF.Modern.Gallery/Assets/Design/Dialog.dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/iNKORE.UI.WPF.Modern.Gallery/Assets/Design/Dialog.light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 22 additions & 1 deletion source/iNKORE.UI.WPF.Modern.Gallery/DataModel/Data/Controls.Foundation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,27 @@
"Description": "Design guidance and resources",
"Items":
[
{
"UniqueId": "Spacing",
"Title": "Spacing",
"Subtitle": "Spacing values and layout examples",
"ImagePath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png",
"ImageIconPath": "ms-appx:///Assets/ControlIcons/DefaultIcon.png",
"Description": "",
"Content": "",
"IncludedInBuild": true,
"IsNew": false,
"IsUpdated": false,
"Docs": [
{
"Title": "Content design basics",
"Uri": "https://learn.microsoft.com/windows/apps/design/basics/content-basics"
}
],
"RelatedControls":
[
]
},
{
"UniqueId": "Typography",
"Title": "Typography",
Expand Down Expand Up @@ -68,4 +89,4 @@
]
}
]
}
}
8 changes: 8 additions & 0 deletions source/iNKORE.UI.WPF.Modern.Gallery/Navigation/NavigationRootPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,14 @@
<ui:FontIcon Glyph="&#xEB3C;" />
</ui:NavigationViewItem.Icon>
<ui:NavigationViewItem.MenuItems>
<ui:NavigationViewItem
x:Name="SpacingItem"
Content="Spacing"
Tag="Spacing">
<ui:NavigationViewItem.Icon>
<ui:FontIcon Glyph="&#xF0E2;" />
</ui:NavigationViewItem.Icon>
</ui:NavigationViewItem>
<ui:NavigationViewItem
x:Name="TypographyItem"
Content="Typography"
Expand Down
18 changes: 14 additions & 4 deletions source/iNKORE.UI.WPF.Modern.Gallery/Navigation/NavigationRootPage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,19 +293,29 @@ private void OnNavigationViewSelectionChanged(NavigationView sender, NavigationV
_lastItem = item;
rootFrame.Navigate(item);
}
else if (selectedItem?.Tag?.ToString() == "Spacing")
{
var spacingId = "Spacing";
if (_lastItem?.ToString() == spacingId) return;
_lastItem = spacingId;
var spacingItem = ControlInfoDataSource.Instance.Realms
.SelectMany(r => r.Groups)
.SelectMany(g => g.Items)
.FirstOrDefault(i => i.UniqueId == "Spacing");
if (spacingItem != null)
{
rootFrame.Navigate(ItemPage.Create(spacingItem));
}
}
else if (selectedItem?.Tag?.ToString() == "Typography")
{
// Handle Typography navigation
var typographyId = "Typography";
if (_lastItem?.ToString() == typographyId) return;
_lastItem = typographyId;

// Find Typography item from the data source
var typographyItem = ControlInfoDataSource.Instance.Realms
.SelectMany(r => r.Groups)
.SelectMany(g => g.Items)
.FirstOrDefault(i => i.UniqueId == "Typography");

if (typographyItem != null)
{
rootFrame.Navigate(ItemPage.Create(typographyItem));
Expand Down
168 changes: 168 additions & 0 deletions source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Foundation/Design/SpacingPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
<!-- Copyright (c) Microsoft Corporation and Contributors. -->
<!-- Licensed under the MIT License. -->

<ui:Page
x:Class="iNKORE.UI.WPF.Modern.Gallery.Pages.Controls.Foundation.SpacingPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:iNKORE.UI.WPF.Modern.Gallery"
xmlns:uc="clr-namespace:iNKORE.UI.WPF.Modern.Gallery.Controls.UserControls"
xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Name="spacingPage"
mc:Ignorable="d">

<ui:ScrollViewerEx>
<StackPanel>
<TextBlock Margin="0,0,0,0" TextWrapping="Wrap" FontSize="{DynamicResource {x:Static ui:ThemeKeys.BodyTextBlockFontSizeKey}}">
The use of consistently sized spacing and gutters semantically groups an experience into separate components. These values map to our rounded corner logic and together help create a cohesive and usable layout.
A best practice in design is to use a 4px grid. This means that any spacing or sizing should be a multiple of 4. This helps to create a consistent and harmonious layout and these values are easy to scale.
</TextBlock>
<TextBlock TextWrapping="Wrap" FontSize="{DynamicResource {x:Static ui:ThemeKeys.BodyTextBlockFontSizeKey}}">
Below, you can find a few examples of common layout types with highlighted spacing values (in epx).
</TextBlock>

<ui:ScrollViewerEx HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Margin="0,24,0,26">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" >
<StackPanel Margin="0,0,36,0">
<TextBlock HorizontalAlignment="Center" Style="{DynamicResource SubtitleTextBlockStyle}" Text="Page with cards layout" />
<Image x:Name="CardsImage" Margin="0,12,0,0" Height="505" Source="pack://application:,,,/iNKORE.UI.WPF.Modern.Gallery;component/Assets/Design/Cards.dark.png" />
</StackPanel>
<StackPanel>
<TextBlock HorizontalAlignment="Center" Style="{DynamicResource SubtitleTextBlockStyle}" Text="Form layout" />
<Image x:Name="DialogImage" Margin="0,12,0,18" Height="505" Source="pack://application:,,,/iNKORE.UI.WPF.Modern.Gallery;component/Assets/Design/Dialog.dark.png" />
</StackPanel>
</StackPanel>
</ui:ScrollViewerEx>

<Border
Background="{DynamicResource ControlExampleDisplayBrush}"
BorderBrush="{DynamicResource CardStrokeColorDefaultBrush}"
BorderThickness="1,1,1,0"
CornerRadius="8"
Padding="12"
Margin="0,10,0,0">
<ui:ScrollViewerEx HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden" Margin="0,0,0,0">
<StackPanel>
<Grid Margin="0,12,0,24" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="86" />
<ColumnDefinition Width="136" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock
Margin="16,0,0,0"
Style="{DynamicResource CaptionTextBlockStyle}"
Foreground="{DynamicResource TextFillColorSecondaryBrush}"
Text="Value" />
<TextBlock
Grid.Column="2"
Style="{DynamicResource CaptionTextBlockStyle}"
Foreground="{DynamicResource TextFillColorSecondaryBrush}"
Text="Usage" />
</Grid>
<Grid HorizontalAlignment="Stretch" Height="56">
<Border HorizontalAlignment="Stretch" Background="{DynamicResource CardBackgroundFillColorDefaultBrush}" CornerRadius="{DynamicResource ControlCornerRadius}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="86" />
<ColumnDefinition Width="136" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Margin="16,12,0,12" VerticalAlignment="Center" Style="{DynamicResource BodyTextBlockStyle}" Foreground="{DynamicResource TextFillColorPrimaryBrush}" Text="4epx" />
<Border Grid.Column="1" Height="20" Width="4" CornerRadius="4" Background="{DynamicResource AccentFillColorDefaultBrush}" HorizontalAlignment="Left" />
<TextBlock Grid.Column="2" Margin="0,12,0,12" VerticalAlignment="Center" Style="{DynamicResource CaptionTextBlockStyle}" Foreground="{DynamicResource TextFillColorSecondaryBrush}" TextWrapping="Wrap" Text="Spacing used for compact sizing." />
</Grid>
</Border>
</Grid>
<Grid HorizontalAlignment="Stretch" Height="56">
<Border HorizontalAlignment="Stretch" CornerRadius="{DynamicResource ControlCornerRadius}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="86" />
<ColumnDefinition Width="136" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Margin="16,12,0,12" VerticalAlignment="Center" Style="{DynamicResource BodyTextBlockStyle}" Foreground="{DynamicResource TextFillColorPrimaryBrush}" Text="8epx" />
<Border Grid.Column="1" Height="20" Width="8" CornerRadius="4" Background="{DynamicResource AccentFillColorDefaultBrush}" HorizontalAlignment="Left" />
<TextBlock Grid.Column="2" Margin="0,12,0,12" VerticalAlignment="Center" Style="{DynamicResource CaptionTextBlockStyle}" Foreground="{DynamicResource TextFillColorSecondaryBrush}" TextWrapping="Wrap" Text="Spacing between UI controls, control + label." />
</Grid>
</Border>
</Grid>
<Grid HorizontalAlignment="Stretch" Height="56">
<Border HorizontalAlignment="Stretch" Background="{DynamicResource CardBackgroundFillColorDefaultBrush}" CornerRadius="{DynamicResource ControlCornerRadius}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="86" />
<ColumnDefinition Width="136" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Margin="16,12,0,12" VerticalAlignment="Center" Style="{DynamicResource BodyTextBlockStyle}" Foreground="{DynamicResource TextFillColorPrimaryBrush}" Text="12epx" />
<Border Grid.Column="1" Height="20" Width="12" CornerRadius="4" Background="{DynamicResource AccentFillColorDefaultBrush}" HorizontalAlignment="Left" />
<TextBlock Grid.Column="2" Margin="0,12,0,12" VerticalAlignment="Center" Style="{DynamicResource CaptionTextBlockStyle}" Foreground="{DynamicResource TextFillColorSecondaryBrush}" TextWrapping="Wrap" Text="Spacing between control + header, surface and edge text, text sections." />
</Grid>
</Border>
</Grid>
<Grid HorizontalAlignment="Stretch" Height="56">
<Border HorizontalAlignment="Stretch" CornerRadius="{DynamicResource ControlCornerRadius}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="86" />
<ColumnDefinition Width="136" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Margin="16,12,0,12" VerticalAlignment="Center" Style="{DynamicResource BodyTextBlockStyle}" Foreground="{DynamicResource TextFillColorPrimaryBrush}" Text="16epx" />
<Border Grid.Column="1" Height="20" Width="16" CornerRadius="4" Background="{DynamicResource AccentFillColorDefaultBrush}" HorizontalAlignment="Left" />
<TextBlock Grid.Column="2" Margin="0,12,0,12" VerticalAlignment="Center" Style="{DynamicResource CaptionTextBlockStyle}" Foreground="{DynamicResource TextFillColorSecondaryBrush}" TextWrapping="Wrap" Text="Padding used in list styles, cards." />
</Grid>
</Border>
</Grid>
<Grid HorizontalAlignment="Stretch" Height="56">
<Border HorizontalAlignment="Stretch" Background="{DynamicResource CardBackgroundFillColorDefaultBrush}" CornerRadius="{DynamicResource ControlCornerRadius}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="86" />
<ColumnDefinition Width="136" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Margin="16,12,0,12" VerticalAlignment="Center" Style="{DynamicResource BodyTextBlockStyle}" Foreground="{DynamicResource TextFillColorPrimaryBrush}" Text="24epx" />
<Border Grid.Column="1" Height="20" Width="24" CornerRadius="4" Background="{DynamicResource AccentFillColorDefaultBrush}" HorizontalAlignment="Left" />
<TextBlock Grid.Column="2" Margin="0,12,0,12" VerticalAlignment="Center" Style="{DynamicResource CaptionTextBlockStyle}" Foreground="{DynamicResource TextFillColorSecondaryBrush}" TextWrapping="Wrap" Text="Spacing between content sections." />
</Grid>
</Border>
</Grid>
<Grid HorizontalAlignment="Stretch" Height="56">
<Border HorizontalAlignment="Stretch" CornerRadius="{DynamicResource ControlCornerRadius}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="86" />
<ColumnDefinition Width="136" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Margin="16,12,0,12" VerticalAlignment="Center" Style="{DynamicResource BodyTextBlockStyle}" Foreground="{DynamicResource TextFillColorPrimaryBrush}" Text="36epx" />
<Border Grid.Column="1" Height="20" Width="36" CornerRadius="4" Background="{DynamicResource AccentFillColorDefaultBrush}" HorizontalAlignment="Left" />
<TextBlock Grid.Column="2" Margin="0,12,0,12" VerticalAlignment="Center" Style="{DynamicResource CaptionTextBlockStyle}" Foreground="{DynamicResource TextFillColorSecondaryBrush}" TextWrapping="Wrap" Text="Padding on pages." />
</Grid>
</Border>
</Grid>
<Grid HorizontalAlignment="Stretch" Height="56">
<Border HorizontalAlignment="Stretch" Background="{DynamicResource CardBackgroundFillColorDefaultBrush}" CornerRadius="{DynamicResource ControlCornerRadius}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="86" />
<ColumnDefinition Width="136" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Margin="16,12,0,12" VerticalAlignment="Center" Style="{DynamicResource BodyTextBlockStyle}" Foreground="{DynamicResource TextFillColorPrimaryBrush}" Text="48epx" />
<Border Grid.Column="1" Height="20" Width="48" CornerRadius="4" Background="{DynamicResource AccentFillColorDefaultBrush}" HorizontalAlignment="Left" />
<TextBlock Grid.Column="2" Margin="0,12,0,12" VerticalAlignment="Center" Style="{DynamicResource CaptionTextBlockStyle}" Foreground="{DynamicResource TextFillColorSecondaryBrush}" TextWrapping="Wrap" Text="Spacing between page sections with title." />
</Grid>
</Border>
</Grid>
</StackPanel>
</ui:ScrollViewerEx>
</Border>
</StackPanel>
</ui:ScrollViewerEx>
</ui:Page>
Loading
Loading