Fix splitbutton keyboard accessability. (#840)

* Fix issue where splitbutton flyout content wasn't invokable by keyboard. * Removed commented code.
microsoft · Feb 1, 2022 · e4e2284 · e4e2284
1 parent e4f6930
commit e4e2284
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 55 deletions.
diff --git a/XamlControlsGallery/ControlPages/SplitButtonPage.xaml b/XamlControlsGallery/ControlPages/SplitButtonPage.xaml
@@ -20,7 +20,7 @@
                     <Border x:Name="CurrentColor" Width="{StaticResource SwatchSize}" Height="{StaticResource SwatchSize}" Background="Green" Margin="0" CornerRadius="4,0,0,4"/>
                     <SplitButton.Flyout>
                         <Flyout Placement="Bottom">
-                            <GridView>
+                            <GridView ItemClick="GridView_ItemClick" IsItemClickEnabled="True">
                                 <GridView.ItemsPanel>
                                     <ItemsPanelTemplate>
                                         <ItemsWrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal"/>
@@ -33,55 +33,16 @@
                                         <Setter Property="RadiusX" Value="4"/>
                                         <Setter Property="RadiusY" Value="4"/>
                                     </Style>
-                                    <Style TargetType="Button">
-                                        <Setter Property="Padding" Value="0"/>
-                                        <Setter Property="MinWidth" Value="0"/>
-                                        <Setter Property="MinHeight" Value="0"/>
-                                        <Setter Property="Margin" Value="6"/>
-                                        <Setter Property="CornerRadius" Value="{StaticResource ControlCornerRadius}"/>
-                                    </Style>
                                 </GridView.Resources>
                                 <GridView.Items>
-                                    <Button Click="ColorButton_Click" AutomationProperties.Name="Red">
-                                        <Button.Content>
-                                            <Rectangle Fill="Red"/>
-                                        </Button.Content>
-                                    </Button>
-                                    <Button Click="ColorButton_Click" AutomationProperties.Name="Orange">
-                                        <Button.Content>
-                                            <Rectangle Fill="Orange"/>
-                                        </Button.Content>
-                                    </Button>
-                                    <Button Click="ColorButton_Click" AutomationProperties.Name="Yellow">
-                                        <Button.Content>
-                                            <Rectangle Fill="Yellow"/>
-                                        </Button.Content>
-                                    </Button>
-                                    <Button Click="ColorButton_Click" AutomationProperties.Name="Green">
-                                        <Button.Content>
-                                            <Rectangle Fill="Green"/>
-                                        </Button.Content>
-                                    </Button>
-                                    <Button Click="ColorButton_Click" AutomationProperties.Name="Blue">
-                                        <Button.Content>
-                                            <Rectangle Fill="Blue"/>
-                                        </Button.Content>
-                                    </Button>
-                                    <Button Click="ColorButton_Click" AutomationProperties.Name="Indigo">
-                                        <Button.Content>
-                                            <Rectangle Fill="Indigo"/>
-                                        </Button.Content>
-                                    </Button>
-                                    <Button Click="ColorButton_Click" AutomationProperties.Name="Violet">
-                                        <Button.Content>
-                                            <Rectangle Fill="Violet"/>
-                                        </Button.Content>
-                                    </Button>
-                                    <Button Click="ColorButton_Click" AutomationProperties.Name="Gray">
-                                        <Button.Content>
-                                            <Rectangle Fill="Gray"/>
-                                        </Button.Content>
-                                    </Button>
+                                    <Rectangle Fill="Red"/>
+                                    <Rectangle Fill="Orange"/>
+                                    <Rectangle Fill="Yellow"/>
+                                    <Rectangle Fill="Green"/>
+                                    <Rectangle Fill="Blue"/>
+                                    <Rectangle Fill="Indigo"/>
+                                    <Rectangle Fill="Violet"/>
+                                    <Rectangle Fill="Gray"/>
                                 </GridView.Items>
                             </GridView>
 

diff --git a/XamlControlsGallery/ControlPages/SplitButtonPage.xaml.cs b/XamlControlsGallery/ControlPages/SplitButtonPage.xaml.cs
@@ -1,8 +1,9 @@
-using Microsoft.UI;
+using Microsoft.UI;
 using Microsoft.UI.Text;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Shapes;
 using System.Threading.Tasks;
 
 namespace AppUIBasics.ControlPages
@@ -21,13 +22,10 @@ public SplitButtonPage()
                 "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempor commodo ullamcorper a lacus.");
         }
 
-        private void ColorButton_Click(object sender, RoutedEventArgs e)
+        private void GridView_ItemClick(object sender, ItemClickEventArgs e)
         {
-            // Extract the color of the button that was clicked.
-            Button clickedColor = (Button)sender;
-            var rectangle = (Microsoft.UI.Xaml.Shapes.Rectangle)clickedColor.Content;
-            var color = ((Microsoft.UI.Xaml.Media.SolidColorBrush)rectangle.Fill).Color;
-
+            var rect = (Rectangle)e.ClickedItem;
+            var color = ((SolidColorBrush)rect.Fill).Color;
             myRichEditBox.Document.Selection.CharacterFormat.ForegroundColor = color;
             CurrentColor.Background = new SolidColorBrush(color);