[Colors] Replace ComboBox with SelectorBar (#1496)

Replacing the ComboBox with the SelectorBar so it's easier to see all the different categories of colors and immediately jump to those. ![image](https://github.com/microsoft/WinUI-Gallery/assets/9866362/191678d5-2b3e-4f3f-95cd-2c0fdbb05f13)
microsoft · Apr 18, 2024 · c8f0413 · c8f0413
1 parent c3cf8db
commit c8f0413
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 55 deletions.
diff --git a/WinUIGallery/ControlPages/DesignGuidance/ColorsPage.xaml b/WinUIGallery/ControlPages/DesignGuidance/ColorsPage.xaml
@@ -5,9 +5,9 @@
     x:Class="WinUIGallery.ControlPages.ColorsPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls1="using:WinUIGallery.DesktopWap.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:controls1="using:WinUIGallery.DesktopWap.Controls"
     mc:Ignorable="d">
 
     <Page.Resources>
@@ -20,31 +20,26 @@
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
-
-        <StackPanel Grid.Row="0">
-            <RichTextBlock>
-                <Paragraph>
-                    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.<LineBreak />
-                </Paragraph>
-            </RichTextBlock>
-            <TextBlock
-                Margin="0,0,0,6"
-                Style="{ThemeResource BodyStrongTextBlockStyle}"
-                Text="Using colors" />
-            <RichTextBlock Margin="0,0,0,24">
-                <Paragraph>The colors below are provided as part of WinUI 3. You can reference them in your app using ThemeResource bindings. For example: Color="{ThemeResource CardBackgroundFillColorDefault}"</Paragraph>
-            </RichTextBlock>
-        </StackPanel>
-
-        <ComboBox x:Name="PageSelector" AutomationProperties.Name="PageSelector" SelectionChanged="OnSelectionChanged" Loaded="OnLoaded" Width="200" Margin="0,18,0,-18" Grid.Row="1" >
-            <x:String>Text</x:String>
-            <x:String>Fill</x:String>
-            <x:String>Stroke</x:String>
-            <x:String>Background</x:String>
-            <x:String>Signal</x:String>
-            <x:String>High Contrast</x:String>
-        </ComboBox>
-
+        <RichTextBlock>
+            <Paragraph>
+                <Run>The brushes below are part of WinUI 3. You can reference them in your app using:</Run>
+                <Run FontStyle="Italic">Foreground="{ThemeResource TextFillColorPrimaryBrush}".</Run>
+            </Paragraph>
+        </RichTextBlock>
+        <SelectorBar
+            x:Name="PageSelector"
+            Grid.Row="1"
+            Margin="-12,32,0,0"
+            AutomationProperties.Name="PageSelector"
+            Loaded="PageSelector_Loaded"
+            SelectionChanged="PageSelector_SelectionChanged">
+            <SelectorBarItem Text="Text" />
+            <SelectorBarItem Text="Fill" />
+            <SelectorBarItem Text="Stroke" />
+            <SelectorBarItem Text="Background" />
+            <SelectorBarItem Text="Signal" />
+            <SelectorBarItem Text="High Contrast" />
+        </SelectorBar>
         <controls1:SampleThemeListener Grid.Row="2">
             <Frame x:Name="NavigationFrame" />
         </controls1:SampleThemeListener>

diff --git a/WinUIGallery/ControlPages/DesignGuidance/ColorsPage.xaml.cs b/WinUIGallery/ControlPages/DesignGuidance/ColorsPage.xaml.cs
@@ -1,43 +1,45 @@
 // Copyright (c) Microsoft Corporation and Contributors.
 // Licensed under the MIT License.
 
+using System;
 using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Media.Animation;
 using WinUIGallery.DesktopWap.Controls.DesignGuidance.ColorSections;
+using WinUIGallery.SamplePages;
 
 namespace WinUIGallery.ControlPages
 {
     public sealed partial class ColorsPage : Page
     {
+        int previousSelectedIndex = 0;
+
         public ColorsPage()
         {
             this.InitializeComponent();
         }
-        private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
+
+        private void PageSelector_SelectionChanged(SelectorBar sender, SelectorBarSelectionChangedEventArgs args)
         {
-            switch (PageSelector.SelectedIndex)
+            SelectorBarItem selectedItem = sender.SelectedItem;
+            int currentSelectedIndex = sender.Items.IndexOf(selectedItem);
+            Type pageType = currentSelectedIndex switch
             {
-                case 0:
-                    NavigationFrame.Navigate(typeof(TextSection));
-                    break;
-                case 1:
-                    NavigationFrame.Navigate(typeof(FillSection));
-                    break;
-                case 2:
-                    NavigationFrame.Navigate(typeof(StrokeSection));
-                    break;
-                case 3:
-                    NavigationFrame.Navigate(typeof(BackgroundSection));
-                    break;
-                case 4:
-                    NavigationFrame.Navigate(typeof(SignalSection));
-                    break;
-                case 5:
-                    NavigationFrame.Navigate(typeof(HighContrastSection));
-                    break;
-            }
+                0 => typeof(TextSection),
+                1 => typeof(FillSection),
+                2 => typeof(StrokeSection),
+                3 => typeof(BackgroundSection),
+                4 => typeof(SignalSection),
+                5 => typeof(HighContrastSection),
+                _ => typeof(TextSection),
+            };
+            var slideNavigationTransitionEffect = currentSelectedIndex - previousSelectedIndex > 0 ? SlideNavigationTransitionEffect.FromRight : SlideNavigationTransitionEffect.FromLeft;
+
+            NavigationFrame.Navigate(pageType, null, new SlideNavigationTransitionInfo() { Effect = slideNavigationTransitionEffect });
+
+            previousSelectedIndex = currentSelectedIndex;
         }
 
-        private void OnLoaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
+        private void PageSelector_Loaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
         {
             PageSelector.SelectedItem = PageSelector.Items[0];
         }

diff --git a/WinUIGallery/Controls/DesignGuidance/ColorPageExample.xaml b/WinUIGallery/Controls/DesignGuidance/ColorPageExample.xaml
@@ -15,10 +15,10 @@
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
-        
+
         <Grid
             Grid.Row="1"
-            Margin="0,36,0,0"
+            Margin="0,12,0,0"
             Padding="12"
             Background="{x:Bind Background, Mode=OneWay}"
             BorderBrush="{ThemeResource GalleryBorderBrush}"
@@ -36,7 +36,10 @@
                 Style="{ThemeResource SubtitleTextBlockStyle}"
                 Text="{x:Bind Title, Mode=OneWay}" />
 
-            <TextBlock Style="{ThemeResource CaptionTextBlockStyle}" Text="{x:Bind Description, Mode=OneWay}" Grid.Row="1"/>
+            <TextBlock
+                Grid.Row="1"
+                Style="{ThemeResource CaptionTextBlockStyle}"
+                Text="{x:Bind Description, Mode=OneWay}" />
             <ContentPresenter
                 Grid.Row="2"
                 Margin="0,12,0,12"

diff --git a/WinUIGallery/Controls/DesignGuidance/ColorSections/HighContrastSection.xaml b/WinUIGallery/Controls/DesignGuidance/ColorSections/HighContrastSection.xaml
@@ -11,11 +11,11 @@
     mc:Ignorable="d">
 
     <!--  Colors section  -->
-    <StackPanel Margin="0,32,0,0" Spacing="{StaticResource ColorSectionSpacing}">
+    <StackPanel Margin="0,12,0,0" Spacing="{StaticResource ColorSectionSpacing}">
         <TextBlock Text="Below are the default highcontrast themes shown. The brush names are the same, and the OS will chose the right colors based on the selected theme." />
         <!--  Aquatic  -->
         <TextBlock
-            Margin="0,24,0,0"
+            Margin="0,12,0,0"
             Style="{StaticResource SubtitleTextBlockStyle}"
             Text="Aquatic" />
         <Grid Style="{StaticResource GalleryTileGridStyle}">

diff --git a/WinUIGallery/Controls/DesignGuidance/ColorSections/TextSection.xaml b/WinUIGallery/Controls/DesignGuidance/ColorSections/TextSection.xaml
@@ -13,7 +13,10 @@
     <!--  Colors section  -->
     <StackPanel Spacing="{StaticResource ColorSectionSpacing}">
         <!--  Text  -->
-        <designguidance:ColorPageExample Title="Text" Description="For UI labels and static text">
+        <designguidance:ColorPageExample
+            Title="Text"
+            Background="{ThemeResource SolidBackgroundFillColorQuarternaryBrush}"
+            Description="For UI labels and static text">
             <TextBlock
                 FontSize="42"
                 FontWeight="SemiBold"
@@ -65,7 +68,10 @@
 
 
         <!--  Accent text  -->
-        <designguidance:ColorPageExample Title="Accent Text" Description="Recommended for links">
+        <designguidance:ColorPageExample
+            Title="Accent Text"
+            Background="{ThemeResource SolidBackgroundFillColorQuarternaryBrush}"
+            Description="Recommended for links">
             <TextBlock
                 FontSize="42"
                 FontWeight="SemiBold"