Add SplitButton style for CommandBar (#4817)

* First checkin * Change how style is applied * Color tweaks * Remove extra secondary commands
microsoft · Apr 19, 2021 · e22113f · e22113f
1 parent d51d7a1
commit e22113f
Show file tree

Hide file tree

Showing 3 changed files with 334 additions and 1 deletion.
diff --git a/dev/CommonStyles/CommandBar_themeresources.xaml b/dev/CommonStyles/CommandBar_themeresources.xaml
@@ -7,6 +7,7 @@
   xmlns:contract8Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,8)"
   xmlns:contract12Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,12)"
   xmlns:contract12NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,12)"  
+  xmlns:local="using:Microsoft.UI.Xaml.Controls"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Key="Default">
@@ -125,6 +126,8 @@
                                     <SplineDoubleKeyFrame KeyTime="{StaticResource ControlFastAnimationDuration}" KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" Value="0" />
                                 </DoubleAnimationUsingKeyFrames>
                             </Storyboard>
+                            <Style TargetType="local:SplitButton" BasedOn="{StaticResource SplitButtonCommandBarStyle}"/>
+                            <Style TargetType="local:ToggleSplitButton" BasedOn="{StaticResource SplitButtonCommandBarStyle}"/>
                         </Grid.Resources>
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">

diff --git a/dev/CommonStyles/TestUI/CommandBarPage.xaml b/dev/CommonStyles/TestUI/CommandBarPage.xaml
@@ -5,6 +5,7 @@
     xmlns:local="using:CommonStyles_TestUI"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
   xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
   xmlns:contract6Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,6)"
   xmlns:contract6NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,6)"
@@ -25,6 +26,20 @@
                 <AppBarSeparator/>
                 <AppBarButton Icon="Save" Label="Save"/>
                 <AppBarToggleButton Icon="Add" Label="Toggle"/>
+                <contract7Present:AppBarElementContainer IsTabStop="False">
+                    <controls:SplitButton Content="Split">
+                        <controls:SplitButton.Flyout>
+                            <MenuFlyout Placement="Bottom">
+                                <MenuFlyoutItem Text="Do Something"/>
+                                <MenuFlyoutItem Text="Something Else"/>
+                                <MenuFlyoutItem Text="Yet More Things"/>
+                            </MenuFlyout>
+                        </controls:SplitButton.Flyout>
+                    </controls:SplitButton>
+                </contract7Present:AppBarElementContainer>
+                <contract7Present:AppBarElementContainer IsTabStop="False">
+                    <controls:ToggleSplitButton Content="Toggle"/>
+                </contract7Present:AppBarElementContainer>
             </CommandBar>
 
             <CommandBar>
@@ -47,6 +62,30 @@
                 <AppBarSeparator/>
                 <AppBarButton Icon="Save" Label="Save"/>
                 <AppBarToggleButton Icon="Add" Label="Toggle"/>
+                <contract7Present:AppBarElementContainer>
+                    <controls:SplitButton>
+                        <Grid Margin="0,1,0,0">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto"/>
+                                <ColumnDefinition Width="Auto"/>
+                            </Grid.ColumnDefinitions>
+                            <SymbolIcon Symbol="Keyboard" Margin="0,0,8,0"/>
+                            <TextBlock Grid.Column="1" Text="Split"/>
+                        </Grid>
+                    </controls:SplitButton>
+                </contract7Present:AppBarElementContainer>
+                <contract7Present:AppBarElementContainer>
+                    <controls:ToggleSplitButton>
+                        <Grid Margin="0,1,0,0">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto"/>
+                                <ColumnDefinition Width="Auto"/>
+                            </Grid.ColumnDefinitions>
+                            <SymbolIcon Symbol="Shuffle" Margin="0,0,8,0"/>
+                            <TextBlock Grid.Column="1" Text="Toggle"/>
+                        </Grid>
+                    </controls:ToggleSplitButton>
+                </contract7Present:AppBarElementContainer>
             </CommandBar>
 
             <CommandBar DefaultLabelPosition="Collapsed">