diff --git a/WinUIGallery/Assets/ControlImages/Accessibility.png b/WinUIGallery/Assets/ControlImages/Accessibility.png
new file mode 100644
index 000000000..a1a8056d8
Binary files /dev/null and b/WinUIGallery/Assets/ControlImages/Accessibility.png differ
diff --git a/WinUIGallery/DataModel/ControlInfoData.json b/WinUIGallery/DataModel/ControlInfoData.json
index f4cd42cd9..0e347fcd3 100644
--- a/WinUIGallery/DataModel/ControlInfoData.json
+++ b/WinUIGallery/DataModel/ControlInfoData.json
@@ -11,14 +11,16 @@
{
"UniqueId": "Color",
"Title": "Color",
+ "Subtitle": "Balanced color design creates clarity and aesthetic harmony.",
+ "ImagePath": "ms-appx:///Assets/ControlImages/ColorPaletteResources.png",
"Docs": [
{
"Title": "Colors in Windows 11",
"Uri": "https://learn.microsoft.com/windows/apps/design/signature-experiences/color"
},
{
- "Title": "Windows UI Toolkit (Figma)",
- "Uri": "https://www.figma.com/community/file/1159947337437047524"
+ "Title": "Windows UI Kit (Figma)",
+ "Uri": "https://aka.ms/WinUI/3.0-figma-toolkit"
},
{
"Title": "WinUI Theme Resources (GitHub)",
@@ -29,6 +31,8 @@
{
"UniqueId": "Geometry",
"Title": "Geometry",
+ "Subtitle": "Clear geometric design ensures visual coherence and structure.",
+ "ImagePath": "ms-appx:///Assets/ControlImages/Shape.png",
"Docs": [
{
"Title": "Geometry in Windows 11",
@@ -43,6 +47,8 @@
{
"UniqueId": "Iconography",
"Title": "Iconography",
+ "Subtitle": "Icons are a visual design language that can be used to communicate information quickly and effectively.",
+ "ImagePath": "ms-appx:///Assets/ControlImages/IconElement.png",
"Docs": [
{
"Title": "Iconography in Windows 11",
@@ -57,6 +63,8 @@
{
"UniqueId": "Spacing",
"Title": "Spacing",
+ "Subtitle": "Thoughtful spacing design enhances readability and flow.",
+ "ImagePath": "ms-appx:///Assets/ControlImages/CompactSizing.png",
"Docs": [
{
"Title": "Content design basics",
@@ -67,7 +75,9 @@
{
"UniqueId": "Typography",
"Title": "Typography",
+ "Subtitle": "Typography design guides attention with intuitive fonts and hierarchy.",
"SourcePath": "/CommonStyles/TextBlock_themeresources.xaml",
+ "ImagePath": "ms-appx:///Assets/ControlImages/TextBlock.png",
"Docs": [
{
"Title": "Typography in Windows Apps",
@@ -94,7 +104,8 @@
{
"UniqueId": "AccessibilityColorContrast",
"Title": "Color Contrast",
- "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png",
+ "Subtitle": "High contrast design ensures accessibility for all users.",
+ "ImagePath": "ms-appx:///Assets/ControlImages/Accessibility.png",
"Docs": [
{
"Title": "Accessibility",
@@ -108,8 +119,9 @@
},
{
"UniqueId": "AccessibilityKeyboard",
- "Title": "Keyboard Support",
- "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png",
+ "Title": "Keyboard Navigation",
+ "Subtitle": "Keyboard-friendly design enables seamless interactions.",
+ "ImagePath": "ms-appx:///Assets/ControlImages/Accessibility.png",
"Docs": [
{
"Title": "Accessibility",
@@ -147,8 +159,9 @@
},
{
"UniqueId": "AccessibilityScreenReader",
- "Title": "Screen Reader Support",
- "ImagePath": "ms-appx:///Assets/ControlImages/AppBarSeparator.png",
+ "Title": "Screen Reader",
+ "Subtitle": "Inclusive design ensures meaningful content for assistive technologies.",
+ "ImagePath": "ms-appx:///Assets/ControlImages/Accessibility.png",
"Docs": [
{
"Title": "Accessibility",
diff --git a/WinUIGallery/WinUIGallery.csproj b/WinUIGallery/WinUIGallery.csproj
index 9ed8bb5d6..80e793fd4 100644
--- a/WinUIGallery/WinUIGallery.csproj
+++ b/WinUIGallery/WinUIGallery.csproj
@@ -145,6 +145,7 @@
+
@@ -309,6 +310,7 @@
+