Using segmented control for colors page (#1214)

* Using segmented control * Feedback
microsoft · Mar 12, 2023 · cc66e14 · cc66e14
1 parent 672ddb9
commit cc66e14
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 79 deletions.
diff --git a/WinUIGallery/ControlPages/DesignGuidance/ColorsPage.xaml b/WinUIGallery/ControlPages/DesignGuidance/ColorsPage.xaml
@@ -7,6 +7,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:labs="using:CommunityToolkit.Labs.WinUI"
     mc:Ignorable="d">
 
     <Page.Resources>
@@ -33,55 +34,15 @@
             <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>
-        <Grid
-            x:Name="SelectionElement"
-            Grid.Row="1"
-            HorizontalAlignment="Stretch">
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="*" />
-                <ColumnDefinition Width="*" />
-                <ColumnDefinition Width="*" />
-                <ColumnDefinition Width="*" />
-                <ColumnDefinition Width="*" />
-            </Grid.ColumnDefinitions>
-
-            <ToggleButton
-                HorizontalAlignment="Stretch"
-                Checked="ToggleButton_Checked"
-                CornerRadius="4,0,0,4"
-                IsChecked="True">
-                Text
-            </ToggleButton>
-            <ToggleButton
-                Grid.Column="1"
-                HorizontalAlignment="Stretch"
-                Checked="ToggleButton_Checked"
-                CornerRadius="0">
-                Fill
-            </ToggleButton>
-            <ToggleButton
-                Grid.Column="2"
-                HorizontalAlignment="Stretch"
-                Checked="ToggleButton_Checked"
-                CornerRadius="0">
-                Stroke
-            </ToggleButton>
-            <ToggleButton
-                Grid.Column="3"
-                HorizontalAlignment="Stretch"
-                Checked="ToggleButton_Checked"
-                CornerRadius="0">
-                Background
-            </ToggleButton>
-            <ToggleButton
-                Grid.Column="4"
-                HorizontalAlignment="Stretch"
-                Checked="ToggleButton_Checked"
-                CornerRadius="0,4,4,0">
-                Signal
-            </ToggleButton>
-        </Grid>
+        <labs:Segmented x:Name="PageSelector" SelectionChanged="OnSelectionChanged" Loaded="OnLoaded" HorizontalAlignment="Stretch" Grid.Row="1">
+            <labs:SegmentedItem Content="Text"/>
+            <labs:SegmentedItem Content="Fill"/>
+            <labs:SegmentedItem Content="Stroke"/>
+            <labs:SegmentedItem Content="Background"/>
+            <labs:SegmentedItem Content="Signal"/>
+        </labs:Segmented>
 
         <Frame x:Name="NavigationFrame"   Grid.Row="2" />
     </Grid>

diff --git a/WinUIGallery/ControlPages/DesignGuidance/ColorsPage.xaml.cs b/WinUIGallery/ControlPages/DesignGuidance/ColorsPage.xaml.cs
@@ -2,7 +2,6 @@
 // Licensed under the MIT License.
 
 using Microsoft.UI.Xaml.Controls;
-using Microsoft.UI.Xaml.Controls.Primitives;
 using WinUIGallery.DesktopWap.Controls.DesignGuidance.ColorSections;
 
 namespace AppUIBasics.ControlPages
@@ -12,41 +11,32 @@ public sealed partial class ColorsPage : Page
         public ColorsPage()
         {
             this.InitializeComponent();
-            NavigationFrame.Navigate(typeof(TextSection));
         }
-
-        private void ToggleButton_Checked(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
+        private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
         {
-            if(sender is ToggleButton item)
+            switch (PageSelector.SelectedIndex)
             {
-                switch (item.Content)
-                {
-                    case "Text":
-                        NavigationFrame.Navigate(typeof(TextSection));
-                        break;
-                    case "Fill":
-                        NavigationFrame.Navigate(typeof(FillSection));
-                        break;
-                    case "Stroke":
-                        NavigationFrame.Navigate(typeof(StrokeSection));
-                        break;
-                    case "Background":
-                        NavigationFrame.Navigate(typeof(BackgroundSection));
-                        break;
-                    case "Signal":
-                        NavigationFrame.Navigate(typeof(SignalSection));
-                        break;
-                }
+                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;
             }
-            foreach(var child in SelectionElement.Children)
-            {
-                if (child != sender)
-                {
-                    if (child is ToggleButton button)
+        }
 
-                        button.IsChecked = false;
-                }
-            }
+        private void OnLoaded(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
+        {
+            PageSelector.SelectedItem = PageSelector.Items[0];
         }
     }
 }
diff --git a/WinUIGallery/WinUIGallery.DesktopWap.csproj b/WinUIGallery/WinUIGallery.DesktopWap.csproj
@@ -28,6 +28,7 @@
        in the WinUI repo, or the next ItemGroup below when standalone. -->
   <ItemGroup>
     <PackageReference Include="ColorCode.Core" />
+    <PackageReference Include="CommunityToolkit.Labs.WinUI.SegmentedControl" Version="0.0.2" />
     <PackageReference Include="CommunityToolkit.Labs.WinUI.SettingsControls" Version="0.0.16" />
     <PackageReference Include="CommunityToolkit.WinUI.UI" Version="7.1.2" />
     <PackageReference Include="CommunityToolkit.WinUI.UI.Animations" Version="7.1.2" />