Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add AlwaysExpanded property to CommandBarFlyout #4532

Merged
merged 5 commits into from
Mar 23, 2021
Merged

Add AlwaysExpanded property to CommandBarFlyout #4532

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
62f2389
Added AlwaysExpanded property and test case.
teaP Mar 5, 2021
05b0b94
Fix to secondary commands collapsing issues.
teaP Mar 10, 2021
ff0a080
update test, move to preview
teaP Mar 15, 2021
c4c3edf
PR update
teaP Mar 22, 2021
8b044d3
Merge branch 'master' into user/teaP/CommandBarAlwaysExpanded
teaP Mar 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions dev/CommandBarFlyout/CommandBarFlyout.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,10 +125,24 @@ CommandBarFlyout::CommandBarFlyout()
// In that circumstance, we want to have the flyout be open from the start.
winrt::IFlyoutBase5 thisAsFlyoutBase5 = *this;

// If we don't have IFlyoutBase5 available, then we assume a standard show mode.
if (!thisAsFlyoutBase5 || thisAsFlyoutBase5.ShowMode() == winrt::FlyoutShowMode::Standard)
if (auto commandBar = m_commandBar.get())
{
m_commandBar.get().IsOpen(true);
// If we don't have IFlyoutBase5 available, then we assume a standard show mode.
if (!thisAsFlyoutBase5 || thisAsFlyoutBase5.ShowMode() == winrt::FlyoutShowMode::Standard)
{
commandBar.IsOpen(true);
}

// When CommandBarFlyout is in AlwaysOpen state, don't show the overflow button
if (AlwaysExpanded())
{
commandBar.IsOpen(true);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

commandBar.IsOpen(true); [](start = 20, length = 24)

Why does AlwaysExpanded affect if we open the commandbar (not the overflow flyout)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CommandBar IsOpen is actually about the overflow flyout! It's unfortunately a bit confusing.

commandBar.OverflowButtonVisibility(winrt::Windows::UI::Xaml::Controls::CommandBarOverflowButtonVisibility::Collapsed);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't we have to do something to show the overflow items?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See above comment.

}
else
{
commandBar.OverflowButtonVisibility(winrt::Windows::UI::Xaml::Controls::CommandBarOverflowButtonVisibility::Auto);
}
}
}
});
Expand Down
5 changes: 5 additions & 0 deletions dev/CommandBarFlyout/CommandBarFlyout.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ class CommandBarFlyout :
CommandBarFlyout();
~CommandBarFlyout();

bool AlwaysExpanded() { return m_alwaysExpanded; }
void AlwaysExpanded(bool value) { m_alwaysExpanded = value; }

winrt::IObservableVector<winrt::ICommandBarElement> PrimaryCommands();
winrt::IObservableVector<winrt::ICommandBarElement> SecondaryCommands();

Expand All @@ -25,6 +28,8 @@ class CommandBarFlyout :
private:
void SetSecondaryCommandsToCloseWhenExecuted();

bool m_alwaysExpanded;

winrt::IObservableVector<winrt::ICommandBarElement> m_primaryCommands{ nullptr };
winrt::IObservableVector<winrt::ICommandBarElement> m_secondaryCommands{ nullptr };

Expand Down
5 changes: 5 additions & 0 deletions dev/CommandBarFlyout/CommandBarFlyout.idl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@ unsealed runtimeclass CommandBarFlyout : Windows.UI.Xaml.Controls.Primitives.Fly
{
CommandBarFlyout();

[MUX_PREVIEW]
{
Boolean AlwaysExpanded{ get; set; };
}

Windows.Foundation.Collections.IObservableVector<Windows.UI.Xaml.Controls.ICommandBarElement> PrimaryCommands { get; };
Windows.Foundation.Collections.IObservableVector<Windows.UI.Xaml.Controls.ICommandBarElement> SecondaryCommands { get; };
};
Expand Down
2 changes: 1 addition & 1 deletion dev/CommandBarFlyout/CommandBarFlyout.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,7 @@
contract7NotPresent:CornerRadius="{ThemeResource OverlayCornerRadius}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" MinWidth="3"/>
</Grid.ColumnDefinitions>
<ItemsControl x:Name="PrimaryItemsControl"
Height="40"
Expand Down
14 changes: 14 additions & 0 deletions dev/CommandBarFlyout/CommandBarFlyoutCommandBar.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,20 @@ CommandBarFlyoutCommandBar::CommandBarFlyoutCommandBar()
}
});

Closing({
[this](auto const&, auto const&)
{
if (auto owningFlyout = m_owningFlyout.get())
{
if (owningFlyout.AlwaysExpanded())
{
// Don't close the secondary commands list when the flyout is AlwaysExpanded.
IsOpen(true);
}
}
}
});

Closed({
[this](auto const&, auto const&)
{
Expand Down
37 changes: 37 additions & 0 deletions dev/CommandBarFlyout/InteractionTests/CommandBarFlyoutTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -661,5 +661,42 @@ public void VerifyFlyoutClosingBehavior()
VerifyElement.NotFound("FirstFlyoutItem",FindBy.Name);
}
}

[TestMethod]
public void VerifyAlwaysExpandedBehavior()
{
if (PlatformConfiguration.IsOSVersionLessThan(OSVersion.Redstone2))
{
Log.Warning("Test is disabled pre-RS2 because CommandBarFlyout is not supported pre-RS2");
return;
}

using (var setup = new CommandBarFlyoutTestSetupHelper())
{
Button showCommandBarFlyoutButton = FindElement.ByName<Button>("Show CommandBarFlyout with AlwaysExpanded");

Log.Comment("Tapping on a button to show the CommandBarFlyout.");
showCommandBarFlyoutButton.InvokeAndWait();

Log.Comment("Verifying that the secondary commands are visible.");
Button undoButton = FindElement.ById<Button>("UndoButton9");
Verify.IsNotNull(undoButton);

Log.Comment("Verifying that the ... button is not visible.");
UIObject moreButton = TryFindElement.ById("MoreButton");
Verify.IsNull(moreButton);

Log.Comment("Tapping on one of the primary commands");
FindElement.ById<Button>("CutButton9").InvokeAndWait();
ElementCache.Clear();

Log.Comment("Verifying that the secondary commands are still visible.");
undoButton = FindElement.ById<Button>("UndoButton9");
Verify.IsNotNull(undoButton);

Log.Comment("Tapping on a button to hide the CommandBarFlyout.");
InputHelper.Tap(showCommandBarFlyoutButton);
}
}
}
}
24 changes: 24 additions & 0 deletions dev/CommandBarFlyout/TestUI/CommandBarFlyoutPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,28 @@
<AppBarButton x:Name="SelectAllButton7" AutomationProperties.AutomationId="SelectAllButton7" Label="Select all" Click="OnElementClicked" />
</muxc:CommandBarFlyout.SecondaryCommands>
</muxc:CommandBarFlyout>
<muxc:CommandBarFlyout Placement="Right" x:Name="Flyout8" AutomationProperties.AutomationId="Flyout8" Opened="OnFlyoutOpened" Closed="OnFlyoutClosed" AlwaysExpanded="true">
<AppBarButton x:Name="CutButton8" AutomationProperties.AutomationId="CutButton8" Label="Cut" Icon="Cut" Click="OnElementClicked" />
<AppBarButton x:Name="CopyButton8" AutomationProperties.AutomationId="CopyButton8" Label="Copy" Icon="Copy" Click="OnElementClicked" />
<AppBarButton x:Name="PasteButton8" AutomationProperties.AutomationId="PasteButton8" Label="Paste" Icon="Paste" Click="OnElementClicked" />
<AppBarButton x:Name="BoldButton8" AutomationProperties.AutomationId="BoldButton8" Label="Bold" Icon="Bold" Click="OnElementClicked" />
<AppBarButton x:Name="ItalicButton8" AutomationProperties.AutomationId="ItalicButton8" Label="Italic" Icon="Italic" Click="OnElementClicked" />
<AppBarButton x:Name="UnderlineButton8" AutomationProperties.AutomationId="UnderlineButton8" Label="Underline" Icon="Underline" Click="OnElementClicked" />
</muxc:CommandBarFlyout>
<muxc:CommandBarFlyout Placement="Right" x:Name="Flyout9" AutomationProperties.AutomationId="Flyout9" Opened="OnFlyoutOpened" Closed="OnFlyoutClosed" AlwaysExpanded="true">
<AppBarButton x:Name="CutButton9" AutomationProperties.AutomationId="CutButton9" Label="Cut" Icon="Cut" Click="OnElementClicked" />
<AppBarButton x:Name="CopyButton9" AutomationProperties.AutomationId="CopyButton9" Label="Copy" Icon="Copy" Click="OnElementClicked" />
<AppBarButton x:Name="PasteButton9" AutomationProperties.AutomationId="PasteButton9" Label="Paste" Icon="Paste" Click="OnElementClicked" />
<AppBarButton x:Name="BoldButton9" AutomationProperties.AutomationId="BoldButton9" Label="Bold" Icon="Bold" Click="OnElementClicked" />
<AppBarButton x:Name="ItalicButton9" AutomationProperties.AutomationId="ItalicButton9" Label="Italic" Icon="Italic" Click="OnElementClicked" />
<AppBarButton x:Name="UnderlineButton9" AutomationProperties.AutomationId="UnderlineButton9" Label="Underline" Icon="Underline" Click="OnElementClicked" />
<muxc:CommandBarFlyout.SecondaryCommands>
<AppBarButton x:Name="UndoButton9" AutomationProperties.AutomationId="UndoButton9" Label="Undo" Icon="Undo" Click="OnElementClicked" />
<AppBarButton x:Name="RedoButton9" AutomationProperties.AutomationId="RedoButton9" Label="Redo" Icon="Redo" Click="OnElementClicked" />
<AppBarButton x:Name="SelectAllButton9" AutomationProperties.AutomationId="SelectAllButton9" Label="Select all" Click="OnElementClicked" />
<AppBarToggleButton x:Name="FavoriteToggleButton9" AutomationProperties.AutomationId="FavoriteToggleButton9" Label="Favorite" Icon="Favorite" Checked="OnElementChecked" Unchecked="OnElementUnchecked" />
</muxc:CommandBarFlyout.SecondaryCommands>
</muxc:CommandBarFlyout>
</Grid.Resources>
<ScrollViewer>
<StackPanel>
Expand All @@ -161,6 +183,8 @@
<Button x:Name="FlyoutTarget5" Content="Show CommandBarFlyout with sub-menu" Margin="10" Click="OnFlyoutTarget5Click" />
<Button x:Name="FlyoutTarget6" Content="Show CommandBarFlyout with no primary commands" Margin="10" Click="OnFlyoutTarget6Click" />
<Button x:Name="FlyoutTarget7" Content="Show CommandBarFlyout with non-focusable primary commands" Margin="10" Click="OnFlyoutTarget7Click" />
<Button x:Name="FlyoutTarget8" Content="Show CommandBarFlyout with no secondary commands" Margin="10" Click="OnFlyoutTarget8Click" />
<Button x:Name="FlyoutTarget9" Content="Show CommandBarFlyout with AlwaysExpanded" Margin="10" Click="OnFlyoutTarget9Click" />
<CheckBox x:Name="IsRTLCheckBox" Content="Is Page in RightToLeft FlowDirection?" AutomationProperties.AutomationId="IsRTLCheckBox" Margin="10" Checked="IsRTLCheckBox_Checked" Unchecked="IsRTLCheckBox_Unchecked" />
</StackPanel>
</ScrollViewer>
Expand Down
10 changes: 10 additions & 0 deletions dev/CommandBarFlyout/TestUI/CommandBarFlyoutPage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,16 @@ private void OnFlyoutTarget7Click(object sender, RoutedEventArgs e)
ShowFlyoutAt(Flyout7, FlyoutTarget7);
}

private void OnFlyoutTarget8Click(object sender, RoutedEventArgs e)
{
ShowFlyoutAt(Flyout8, FlyoutTarget8);
}

private void OnFlyoutTarget9Click(object sender, RoutedEventArgs e)
{
ShowFlyoutAt(Flyout9, FlyoutTarget9);
}

private void ShowFlyoutAt(FlyoutBase flyout, FrameworkElement targetElement, FlyoutShowMode showMode = FlyoutShowMode.Transient)
{
if (PlatformConfiguration.IsOsVersionGreaterThanOrEqual(OSVersion.Redstone5))
Expand Down
3 changes: 2 additions & 1 deletion dev/CommonStyles/CommandBar_themeresources.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@
<x:Double x:Key="AppBarThemeMinHeight">64</x:Double>
<x:Double x:Key="AppBarThemeCompactHeight">48</x:Double>
<Thickness x:Key="AppBarEllipsisButtonInnerBorderMargin">0,9,9,9</Thickness>
<x:Double x:Key="AppBarMoreButtonColumnMinWidth">6</x:Double>

<Thickness x:Key="CommandBarOverflowPresenterMargin">0,4,0,4</Thickness>

Expand Down Expand Up @@ -813,7 +814,7 @@
XYFocusKeyboardNavigation="Enabled">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" MinWidth="{StaticResource AppBarMoreButtonColumnMinWidth}"/>
</Grid.ColumnDefinitions>
<Grid.RenderTransform>
<TranslateTransform x:Name="ContentTransform" />
Expand Down
10 changes: 2 additions & 8 deletions dev/CommonStyles/TestUI/CommandBarPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<AppBarButton Icon="Save" Label="Save"/>
<AppBarToggleButton Icon="Add" Label="Toggle"/>
</CommandBar>

<CommandBar>
<AppBarButton Icon="Add" Label="Add"/>
<AppBarButton Icon="Remove" Label="Remove" LabelPosition="Collapsed"/>
Expand All @@ -41,18 +41,12 @@
</CommandBar.SecondaryCommands>
</CommandBar>

<CommandBar DefaultLabelPosition="Right">
<CommandBar DefaultLabelPosition="Right" OverflowButtonVisibility="Collapsed">
<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"/>
</CommandBar.SecondaryCommands>
</CommandBar>

<CommandBar DefaultLabelPosition="Collapsed">
Expand Down