<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
<local:TestPage
    x:Class="MUXControlsTestApp.CommandBarFlyoutPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ui="http://schemas.modernwpf.com/2019"
    xmlns:local="clr-namespace:MUXControlsTestApp"
    xmlns:muxc="http://schemas.modernwpf.com/2019"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{DynamicResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.Resources>
            <muxc:CommandBarFlyout
                Placement="Right"
                x:Key="Flyout1"
                AutomationProperties.AutomationId="Flyout1"
                Opened="OnFlyoutOpened"
                Closed="OnFlyoutClosed">
                <ui:AppBarButton x:Name="CutButton1" AutomationProperties.AutomationId="CutButton1" Label="Cut" Icon="Cut" Click="OnElementClicked" />
                <AppBarSeparator />
                <ui:AppBarButton x:Name="CopyButton1" AutomationProperties.AutomationId="CopyButton1" Label="Copy" Icon="Copy" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="PasteButton1" AutomationProperties.AutomationId="PasteButton1" Label="Paste" Icon="Paste" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="BoldButton1" AutomationProperties.AutomationId="BoldButton1" Label="Bold" Icon="Bold" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="ItalicButton1" AutomationProperties.AutomationId="ItalicButton1" Label="Italic" Icon="Italic" Click="OnElementClicked" />
                <ui:AppBarToggleButton x:Name="UnderlineButton1" AutomationProperties.AutomationId="UnderlineButton1" Label="Underline" Icon="Underline" Click="OnElementClicked" />
                <muxc:CommandBarFlyout.SecondaryCommands>
                    <ui:AppBarButton x:Name="UndoButton1" AutomationProperties.AutomationId="UndoButton1" Label="Undo" Icon="Undo" Click="OnElementClicked" />
                    <AppBarSeparator IsTabStop="False" />
                    <ui:AppBarButton x:Name="RedoButton1" AutomationProperties.AutomationId="RedoButton1" Label="Redo" Icon="Redo" Click="OnElementClicked" />
                    <ui:AppBarButton x:Name="SelectAllButton1" AutomationProperties.AutomationId="SelectAllButton1" Label="Select all" Click="OnElementClicked" />
                    <ui:AppBarToggleButton x:Name="FavoriteToggleButton1" AutomationProperties.AutomationId="FavoriteToggleButton1" Label="Favorite" Icon="Favorite" Checked="OnElementChecked" Unchecked="OnElementUnchecked" />
                </muxc:CommandBarFlyout.SecondaryCommands>
            </muxc:CommandBarFlyout>
            <muxc:CommandBarFlyout
                Placement="Right"
                x:Key="Flyout2"
                AutomationProperties.AutomationId="Flyout2"
                Opened="OnFlyoutOpened"
                Closed="OnFlyoutClosed">
                <ui:AppBarButton x:Name="CutButton2" AutomationProperties.AutomationId="CutButton2" Label="Cut" Icon="Cut" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="CopyButton2" AutomationProperties.AutomationId="CopyButton2" Label="Copy" Icon="Copy" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="PasteButton2" AutomationProperties.AutomationId="PasteButton2" Label="Paste" Icon="Paste" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="BoldButton2" AutomationProperties.AutomationId="BoldButton2" Label="Bold" Icon="Bold" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="ItalicButton2" AutomationProperties.AutomationId="ItalicButton2" Label="Italic" Icon="Italic" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="UnderlineButton2" AutomationProperties.AutomationId="UnderlineButton2" Label="Underline" Icon="Underline" Click="OnElementClicked" />
                <muxc:CommandBarFlyout.SecondaryCommands>
                    <ui:AppBarButton x:Name="UndoButton2" AutomationProperties.AutomationId="UndoButton2" Label="Undo" Icon="Undo" Click="OnElementClicked" />
                    <ui:AppBarButton x:Name="RedoButton2" AutomationProperties.AutomationId="RedoButton2" Label="Redo" Icon="Redo" Click="OnElementClicked" />
                    <ui:AppBarButton x:Name="SelectAllButton2" AutomationProperties.AutomationId="SelectAllButton2" Label="Select all" Click="OnElementClicked" />
                    <ui:AppBarButton x:Name="WideButton" AutomationProperties.AutomationId="WideButton" Label="Item with a label wider than primary items" />
                </muxc:CommandBarFlyout.SecondaryCommands>
            </muxc:CommandBarFlyout>
            <muxc:CommandBarFlyout
                Placement="Right"
                x:Key="Flyout3"
                AutomationProperties.AutomationId="Flyout3"
                Opened="OnFlyoutOpened"
                Closed="OnFlyoutClosed">
                <ui:AppBarButton x:Name="CutButton3" AutomationProperties.AutomationId="CutButton3" Label="Cut" Icon="Cut" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="CopyButton3" AutomationProperties.AutomationId="CopyButton3" Label="Copy" Icon="Copy" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="PasteButton3" AutomationProperties.AutomationId="PasteButton3" Label="Paste" Icon="Paste" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="BoldButton3" AutomationProperties.AutomationId="BoldButton3" Label="Bold" Icon="Bold" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="ItalicButton3" AutomationProperties.AutomationId="ItalicButton3" Label="Italic" Icon="Italic" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="UnderlineButton3" AutomationProperties.AutomationId="UnderlineButton3" Label="Underline" Icon="Underline" Click="OnElementClicked" />
                <muxc:CommandBarFlyout.SecondaryCommands>
                    <ui:AppBarButton x:Name="UndoButton3" AutomationProperties.AutomationId="UndoButton3" Label="Undo" Icon="Undo" Click="OnElementClicked" />
                    <ui:AppBarButton x:Name="RedoButton3" AutomationProperties.AutomationId="RedoButton3" Label="Redo" Icon="Redo" Click="OnElementClicked" />
                    <ui:AppBarButton x:Name="SelectAllButton3" AutomationProperties.AutomationId="SelectAllButton3" Label="Select all" Click="OnElementClicked" />
                    <ui:AppBarButton Label="Do another thing" />
                    <ui:AppBarButton Label="Do another thing" />
                    <ui:AppBarButton Label="Do another thing" />
                    <ui:AppBarButton Label="Do another thing" />
                    <ui:AppBarButton Label="Do another thing" />
                    <ui:AppBarButton Label="Do another thing" />
                    <ui:AppBarButton Label="Do another thing" />
                    <ui:AppBarButton Label="Do another thing" />
                    <ui:AppBarButton Label="Do another thing" />
                    <ui:AppBarButton Label="Do another thing" />
                    <ui:AppBarButton Label="Do another thing" />
                    <ui:AppBarButton Label="Do another thing" />
                    <ui:AppBarButton Label="Do another thing" />
                    <ui:AppBarButton Label="Do another thing" />
                    <ui:AppBarButton Label="Do another thing" />
                    <ui:AppBarButton Label="Do another thing" />
                    <ui:AppBarButton Label="Do another thing" />
                </muxc:CommandBarFlyout.SecondaryCommands>
            </muxc:CommandBarFlyout>
            <muxc:CommandBarFlyout
                Placement="Right"
                x:Key="Flyout4"
                AutomationProperties.AutomationId="Flyout4"
                Opened="OnFlyoutOpened"
                Closed="OnFlyoutClosed">
                <ui:AppBarButton x:Name="CutButton4" AutomationProperties.AutomationId="CutButton4" Label="Cut" Icon="Cut" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="CopyButton4" AutomationProperties.AutomationId="CopyButton4" Label="Copy" Icon="Copy" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="PasteButton4" AutomationProperties.AutomationId="PasteButton4" Label="Paste" Icon="Paste" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="BoldButton4" AutomationProperties.AutomationId="BoldButton4" Label="Bold" Icon="Bold" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="ItalicButton4" AutomationProperties.AutomationId="ItalicButton4" Label="Italic" Icon="Italic" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="UnderlineButton4" AutomationProperties.AutomationId="UnderlineButton4" Label="Underline" Icon="Underline" Click="OnElementClicked" />
                <muxc:CommandBarFlyout.SecondaryCommands>
                    <ui:AppBarButton x:Name="UndoButton4" AutomationProperties.AutomationId="UndoButton4" Label="Undo" Icon="Undo" Click="OnElementClicked" />
                    <ui:AppBarButton x:Name="RedoButton4" AutomationProperties.AutomationId="RedoButton4" Label="Redo" Icon="Redo" Click="OnElementClicked" />
                    <ui:AppBarButton x:Name="SelectAllButton4" AutomationProperties.AutomationId="SelectAllButton4" Label="Select all" Click="OnElementClicked" />
                    <ui:AppBarButton Label="Item with a really really really long label that will not fit in the space provided" />
                </muxc:CommandBarFlyout.SecondaryCommands>
            </muxc:CommandBarFlyout>
            <muxc:CommandBarFlyout
                Placement="Right"
                x:Key="Flyout5"
                AutomationProperties.AutomationId="Flyout5"
                Opened="OnFlyoutOpened"
                Closed="OnFlyoutClosed">
                <ui:AppBarButton x:Name="CutButton5" AutomationProperties.AutomationId="CutButton5" Label="Cut" Icon="Cut" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="CopyButton5" AutomationProperties.AutomationId="CopyButton5" Label="Copy" Icon="Copy" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="PasteButton5" AutomationProperties.AutomationId="PasteButton5" Label="Paste" Icon="Paste" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="BoldButton5" AutomationProperties.AutomationId="BoldButton5" Label="Bold" Icon="Bold" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="ItalicButton5" AutomationProperties.AutomationId="ItalicButton5" Label="Italic" Icon="Italic" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="UnderlineButton5" AutomationProperties.AutomationId="UnderlineButton5" Label="Underline" Icon="Underline" Click="OnElementClicked" />
                <muxc:CommandBarFlyout.SecondaryCommands>
                    <ui:AppBarButton x:Name="ProofingButton" AutomationProperties.AutomationId="ProofingButton" Label="Proofing" Click="OnElementClicked">
                        <ui:AppBarButton.Flyout>
                            <ui:MenuFlyout>
                                <MenuItem AutomationProperties.Name="FirstFlyoutItem" Header="talk" />
                                <MenuItem Header="talks" />
                                <MenuItem Header="talk a" />
                                <Separator />
                                <MenuItem Header="Add to Dictionary" />
                                <MenuItem Header="Ignore Once" />
                                <MenuItem Header="Ignore All" />
                            </ui:MenuFlyout>
                        </ui:AppBarButton.Flyout>
                    </ui:AppBarButton>
                    <ui:AppBarButton x:Name="UndoButton5" AutomationProperties.AutomationId="UndoButton5" Label="Undo" Icon="Undo" Click="OnElementClicked" />
                    <ui:AppBarButton x:Name="RedoButton5" AutomationProperties.AutomationId="RedoButton5" Label="Redo" Icon="Redo" Click="OnElementClicked" />
                    <ui:AppBarButton x:Name="SelectAllButton5" AutomationProperties.AutomationId="SelectAllButton5" Label="Select all" Click="OnElementClicked" />
                </muxc:CommandBarFlyout.SecondaryCommands>
            </muxc:CommandBarFlyout>
            <muxc:CommandBarFlyout
                Placement="Right"
                x:Key="Flyout6"
                AutomationProperties.AutomationId="Flyout6"
                Opened="OnFlyoutOpened"
                Closed="OnFlyoutClosed">
                <muxc:CommandBarFlyout.SecondaryCommands>
                    <ui:AppBarButton x:Name="UndoButton6" AutomationProperties.AutomationId="UndoButton6" Label="Undo" Icon="Undo" Click="OnElementClicked" />
                    <ui:AppBarButton x:Name="RedoButton6" AutomationProperties.AutomationId="RedoButton6" Label="Redo" Icon="Redo" Click="OnElementClicked" />
                    <ui:AppBarButton x:Name="SelectAllButton6" AutomationProperties.AutomationId="SelectAllButton6" Label="Select all" Click="OnElementClicked" />
                    <ui:AppBarToggleButton x:Name="FavoriteToggleButton6" AutomationProperties.AutomationId="FavoriteToggleButton6" Label="Favorite" Icon="Favorite" Checked="OnElementChecked" Unchecked="OnElementUnchecked" />
                </muxc:CommandBarFlyout.SecondaryCommands>
            </muxc:CommandBarFlyout>
            <muxc:CommandBarFlyout
                Placement="Right"
                x:Key="Flyout7"
                AutomationProperties.AutomationId="Flyout7"
                Opened="OnFlyoutOpened"
                Closed="OnFlyoutClosed">
                <ui:AppBarButton x:Name="CutButton7" AutomationProperties.AutomationId="CutButton7" Visibility="Collapsed" Label="Cut" Icon="Cut" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="CopyButton7" AutomationProperties.AutomationId="CopyButton7" IsEnabled="False" Label="Copy" Icon="Copy" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="PasteButton7" AutomationProperties.AutomationId="PasteButton7" Label="Paste" Icon="Paste" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="BoldButton7" AutomationProperties.AutomationId="BoldButton7" Visibility="Collapsed" Label="Bold" Icon="Bold" Click="OnElementClicked" />
                <!-- AllowFocusWhenDisabled="True" -->
                <ui:AppBarButton x:Name="ItalicButton7" AutomationProperties.AutomationId="ItalicButton7" IsEnabled="False" Label="Italic" Icon="Italic" Click="OnElementClicked" />
                <ui:AppBarButton x:Name="UnderlineButton7" AutomationProperties.AutomationId="UnderlineButton7" Label="Underline" Icon="Underline" Click="OnElementClicked" />
                <muxc:CommandBarFlyout.SecondaryCommands>
                    <ui:AppBarButton x:Name="UndoButton7" AutomationProperties.AutomationId="UndoButton7" Label="Undo" Icon="Undo" Click="OnElementClicked" />
                    <ui:AppBarButton x:Name="RedoButton7" AutomationProperties.AutomationId="RedoButton7" Label="Redo" Icon="Redo" Click="OnElementClicked" />
                    <ui:AppBarButton x:Name="SelectAllButton7" AutomationProperties.AutomationId="SelectAllButton7" Label="Select all" Click="OnElementClicked" />
                </muxc:CommandBarFlyout.SecondaryCommands>
            </muxc:CommandBarFlyout>
            <muxc:CommandBarFlyout Placement="Right" x:Key="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:Key="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>
                <Button
                    x:Name="FlyoutTarget1"
                    Content="Show CommandBarFlyout"
                    Margin="10"
                    Click="OnFlyoutTarget1Click" />
                <Button
                    x:Name="FlyoutTarget2"
                    Content="Show expanding CommandBarFlyout"
                    Margin="10"
                    Click="OnFlyoutTarget2Click" />
                <Button
                    x:Name="FlyoutTarget3"
                    Content="Show tall CommandBarFlyout"
                    Margin="10"
                    Click="OnFlyoutTarget3Click" />
                <Button
                    x:Name="FlyoutTarget4"
                    Content="Show max-width CommandBarFlyout"
                    Margin="10"
                    Click="OnFlyoutTarget4Click" />
                <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>
        <StackPanel Grid.Row="1">
            <TextBox
                IsReadOnly="True"
                AcceptsReturn="True"
                x:Name="StatusReportingTextBox"
                AutomationProperties.AutomationId="StatusReportingTextBox"
                Margin="10" />
            <CheckBox
                x:Name="IsFlyoutOpenCheckBox"
                AutomationProperties.AutomationId="IsFlyoutOpenCheckBox"
                Content="Is flyout open" />
        </StackPanel>
    </Grid>
</local:TestPage>
