Skip to content

Commit

Permalink
Tweaks to Rainbow Backgrounds on CommandBarFlyout and MenuFlyout Test…
Browse files Browse the repository at this point in the history 
…UI pages (#5219)

* Tweaks to Rainbow Backgrounds

Harder transitions added to the Rainbow Background help to illustrate the blurring from the Acrylic CommandBarFlyouts and MenuFlyouts

* Update CommandBarPage.xaml

I forgot to update the rainbow background on the Command Bar page

Co-authored-by: Stephen L Peters <stpete@microsoft.com>
  • Loading branch information
@mdtauk @StephenLPeters
mdtauk and StephenLPeters authored Nov 10, 2021
1 parent b04f8a8 commit 04b7230
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 84 deletions.
15 changes: 10 additions & 5 deletions dev/CommandBarFlyout/TestUI/CommandBarFlyoutPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,17 @@
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Red" Offset="0.000" />
<GradientStop Color="Orange" Offset="0.167" />
<GradientStop Color="Yellow" Offset="0.333" />
<GradientStop Color="Green" Offset="0.500" />
<GradientStop Color="Blue" Offset="0.667" />
<GradientStop Color="Red" Offset="0.166" />
<GradientStop Color="DarkOrange" Offset="0.167" />
<GradientStop Color="DarkOrange" Offset="0.332" />
<GradientStop Color="Goldenrod" Offset="0.333" />
<GradientStop Color="Goldenrod" Offset="0.499" />
<GradientStop Color="SeaGreen" Offset="0.500" />
<GradientStop Color="SeaGreen" Offset="0.666" />
<GradientStop Color="MediumBlue" Offset="0.667" />
<GradientStop Color="MediumBlue" Offset="0.832" />
<GradientStop Color="Indigo" Offset="0.833" />
<GradientStop Color="Violet" Offset="1.000" />
<GradientStop Color="Indigo" Offset="1.000" />
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
Expand Down
175 changes: 101 additions & 74 deletions dev/CommonStyles/TestUI/CommandBarPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,56 +2,74 @@
x:Class="MUXControlsTestApp.CommandBarPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CommonStyles_TestUI"
xmlns:contract5NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,5)"
xmlns:contract6NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,6)"
xmlns:contract6Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,6)"
xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
xmlns:controls="using:Microsoft.UI.Xaml.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:CommonStyles_TestUI"
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)"
xmlns:contract5NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,5)"
mc:Ignorable="d">


<Page.Resources>
</Page.Resources>
<Page.Resources />

<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Offset="0.000" Color="Red" />
<GradientStop Offset="0.166" Color="Red" />
<GradientStop Offset="0.167" Color="DarkOrange" />
<GradientStop Offset="0.332" Color="DarkOrange" />
<GradientStop Offset="0.333" Color="Goldenrod" />
<GradientStop Offset="0.499" Color="Goldenrod" />
<GradientStop Offset="0.500" Color="SeaGreen" />
<GradientStop Offset="0.666" Color="SeaGreen" />
<GradientStop Offset="0.667" Color="MediumBlue" />
<GradientStop Offset="0.832" Color="MediumBlue" />
<GradientStop Offset="0.833" Color="Indigo" />
<GradientStop Offset="1.000" Color="Indigo" />
</LinearGradientBrush>
</Grid.Background>
<StackPanel Orientation="Vertical">

<CommandBar>
<AppBarButton Icon="Add" Label="Add"/>
<AppBarButton Icon="Remove" Label="Remove"/>
<AppBarSeparator/>
<AppBarButton Icon="Save" Label="Save"/>
<AppBarToggleButton Icon="Add" Label="Toggle"/>
<AppBarButton Icon="Add" Label="Add" />
<AppBarButton Icon="Remove" Label="Remove" />
<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"/>
<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"/>
<controls:ToggleSplitButton Content="Toggle" />
</contract7Present:AppBarElementContainer>
</CommandBar>

<CommandBar>
<AppBarButton Icon="Add" Label="Add"/>
<AppBarButton Icon="Remove" Label="Remove" LabelPosition="Collapsed"/>
<AppBarSeparator/>
<AppBarButton Icon="Save" Label="Save And Quit"/>
<AppBarToggleButton Icon="Add" Label="Toggle"/>
<AppBarButton Icon="Add" Label="Add" />
<AppBarButton
Icon="Remove"
Label="Remove"
LabelPosition="Collapsed" />
<AppBarSeparator />
<AppBarButton Icon="Save" Label="Save And Quit" />
<AppBarToggleButton Icon="Add" Label="Toggle" />
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Add" Label="Add"/>
<AppBarButton Icon="Remove" Label="Remove"/>
<AppBarSeparator/>
<AppBarToggleButton Icon="Add" Label="Toggle"/>
<AppBarButton Icon="Add" Label="Add" />
<AppBarButton Icon="Remove" Label="Remove" />
<AppBarSeparator />
<AppBarToggleButton Icon="Add" Label="Toggle" />
</CommandBar.SecondaryCommands>
</CommandBar>

Expand All @@ -65,8 +83,8 @@
<controls:SplitButton>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Viewbox Height="16" Margin="0,0,8,0">
<SymbolIcon Symbol="Keyboard"/>
Expand All @@ -93,8 +111,8 @@
<controls:ToggleSplitButton>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Viewbox Height="16" Margin="0,0,8,0">
<SymbolIcon Symbol="Shuffle"/>
Expand All @@ -106,68 +124,74 @@
</CommandBar>

<CommandBar DefaultLabelPosition="Collapsed">
<AppBarButton Icon="Add" Label="Add"/>
<AppBarButton Icon="Remove" Label="Remove"/>
<AppBarSeparator/>
<AppBarButton Icon="Save" Label="Save"/>
<AppBarToggleButton Icon="Add" Label="Toggle"/>
<AppBarButton Icon="Add" Label="Add" />
<AppBarButton Icon="Remove" Label="Remove" />
<AppBarSeparator />
<AppBarButton Icon="Save" Label="Save" />
<AppBarToggleButton Icon="Add" Label="Toggle" />
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Add" Label="Add"/>
<AppBarButton Icon="Remove" Label="Remove"/>
<AppBarSeparator/>
<AppBarToggleButton Icon="Add" Label="Toggle"/>
<AppBarButton Icon="Add" Label="Add" />
<AppBarButton Icon="Remove" Label="Remove" />
<AppBarSeparator />
<AppBarToggleButton Icon="Add" Label="Toggle" />
</CommandBar.SecondaryCommands>
</CommandBar>

<CommandBar HorizontalAlignment="Left">
<AppBarButton Icon="Add" Label="Add"/>
<AppBarButton Icon="Remove" Label="Remove"/>
<AppBarSeparator/>
<AppBarButton Icon="Save" Label="Save"/>
<AppBarToggleButton Icon="Add" Label="Toggle"/>
<AppBarButton Icon="Add" Label="Add" />
<AppBarButton Icon="Remove" Label="Remove" />
<AppBarSeparator />
<AppBarButton Icon="Save" Label="Save" />
<AppBarToggleButton Icon="Add" Label="Toggle" />
</CommandBar>

<CommandBar HorizontalAlignment="Left">
<AppBarButton Icon="Add" Label="Add"/>
<AppBarButton Icon="Remove" Label="Remove" LabelPosition="Collapsed"/>
<AppBarSeparator/>
<AppBarButton Icon="Save" Label="Save"/>
<AppBarToggleButton Icon="Add" Label="Toggle"/>
<AppBarButton Icon="Add" Label="Add" />
<AppBarButton
Icon="Remove"
Label="Remove"
LabelPosition="Collapsed" />
<AppBarSeparator />
<AppBarButton Icon="Save" Label="Save" />
<AppBarToggleButton Icon="Add" Label="Toggle" />
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Add" Label="Add"/>
<AppBarButton Icon="Remove" Label="Remove"/>
<AppBarSeparator/>
<AppBarToggleButton Icon="Add" Label="Toggle"/>
<AppBarButton Icon="Add" Label="Add" />
<AppBarButton Icon="Remove" Label="Remove" />
<AppBarSeparator />
<AppBarToggleButton Icon="Add" Label="Toggle" />
</CommandBar.SecondaryCommands>
</CommandBar>

<TextBlock Text="AppBarButton with flyout"/>
<TextBlock Text="AppBarButton with flyout" />
<CommandBar HorizontalAlignment="Left">
<CommandBar.Resources>
<!--Does not work-->
<!-- Does not work -->
<Visibility x:Key="CommandBarAppBarButtonHasFlyoutChevronVisibility">Visible</Visibility>
</CommandBar.Resources>
<AppBarButton Icon="Add" Label="Add">
<AppBarButton.Flyout>
<contract7Present:CommandBarFlyout Placement="Right">
<AppBarButton Icon="Play" />
<AppBarButton Icon="People" />
<AppBarButton Icon="Play" />
<AppBarButton Icon="People" />
</contract7Present:CommandBarFlyout>
</AppBarButton.Flyout>
</AppBarButton>
<AppBarButton Icon="Remove" Label="Remove" LabelPosition="Collapsed"/>
<AppBarSeparator/>
<AppBarButton Icon="Save" Label="Save"/>
<AppBarToggleButton Icon="Add" Label="Toggle"/>
<AppBarButton
Icon="Remove"
Label="Remove"
LabelPosition="Collapsed" />
<AppBarSeparator />
<AppBarButton Icon="Save" Label="Save" />
<AppBarToggleButton Icon="Add" Label="Toggle" />
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Add" Label="Add"/>
<AppBarButton Icon="Remove" Label="Remove"/>
<AppBarSeparator/>
<AppBarToggleButton Icon="Add" Label="Toggle"/>
<AppBarButton Icon="Add" Label="Add" />
<AppBarButton Icon="Remove" Label="Remove" />
<AppBarSeparator />
<AppBarToggleButton Icon="Add" Label="Toggle" />
</CommandBar.SecondaryCommands>
</CommandBar>

<TextBlock Text="AppBarButton with flyout with visibility override"/>
<TextBlock Text="AppBarButton with flyout with visibility override" />
<CommandBar HorizontalAlignment="Left">
<AppBarButton Icon="Add" Label="Add">
<AppBarButton.Resources>
Expand All @@ -180,15 +204,18 @@
</controls:CommandBarFlyout>
</AppBarButton.Flyout>
</AppBarButton>
<AppBarButton Icon="Remove" Label="Remove" LabelPosition="Collapsed"/>
<AppBarSeparator/>
<AppBarButton Icon="Save" Label="Save"/>
<AppBarToggleButton Icon="Add" Label="Toggle"/>
<AppBarButton
Icon="Remove"
Label="Remove"
LabelPosition="Collapsed" />
<AppBarSeparator />
<AppBarButton Icon="Save" Label="Save" />
<AppBarToggleButton Icon="Add" Label="Toggle" />
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Add" Label="Add"/>
<AppBarButton Icon="Remove" Label="Remove"/>
<AppBarSeparator/>
<AppBarToggleButton Icon="Add" Label="Toggle"/>
<AppBarButton Icon="Add" Label="Add" />
<AppBarButton Icon="Remove" Label="Remove" />
<AppBarSeparator />
<AppBarToggleButton Icon="Add" Label="Toggle" />
</CommandBar.SecondaryCommands>
</CommandBar>

Expand Down
15 changes: 10 additions & 5 deletions dev/CommonStyles/TestUI/MenuFlyoutPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,17 @@
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Red" Offset="0.000" />
<GradientStop Color="Orange" Offset="0.167" />
<GradientStop Color="Yellow" Offset="0.333" />
<GradientStop Color="Green" Offset="0.500" />
<GradientStop Color="Blue" Offset="0.667" />
<GradientStop Color="Red" Offset="0.166" />
<GradientStop Color="DarkOrange" Offset="0.167" />
<GradientStop Color="DarkOrange" Offset="0.332" />
<GradientStop Color="Goldenrod" Offset="0.333" />
<GradientStop Color="Goldenrod" Offset="0.499" />
<GradientStop Color="SeaGreen" Offset="0.500" />
<GradientStop Color="SeaGreen" Offset="0.666" />
<GradientStop Color="MediumBlue" Offset="0.667" />
<GradientStop Color="MediumBlue" Offset="0.832" />
<GradientStop Color="Indigo" Offset="0.833" />
<GradientStop Color="Violet" Offset="1.000" />
<GradientStop Color="Indigo" Offset="1.000" />
</LinearGradientBrush>
</Grid.Background>
<Grid.ColumnDefinitions>
Expand Down

0 comments on commit 04b7230

Please sign in to comment.