<ui:Page
    x:Class="ModernWpf.SampleApp.ControlPages.MenuFlyoutPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="http://schemas.modernwpf.com/2019"
    xmlns:sc="clr-namespace:SamplesCommon;assembly=SamplesCommon"
    mc:Ignorable="d">

    <ScrollViewer>
        <ui:SimpleStackPanel Style="{StaticResource ControlPageContentPanelStyle}">
            <sc:ControlExample HeaderText="An AppBarButton with a MenuFlyout.">
                <StackPanel
                    x:Name="Control1"
                    Orientation="Horizontal">
                    <ui:AppBarButton Icon="Sort" IsCompact="True" ToolTipService.ToolTip="Sort" AutomationProperties.Name="Sort">
                        <ui:AppBarButton.Flyout>
                            <ui:MenuFlyout>
                                <MenuItem
                                    Header="By rating"
                                    Click="MenuFlyoutItem_Click"
                                    Tag="rating" />
                                <MenuItem
                                    Header="By match"
                                    Click="MenuFlyoutItem_Click"
                                    Tag="match" />
                                <MenuItem
                                    Header="By distance"
                                    Click="MenuFlyoutItem_Click"
                                    Tag="distance" />
                            </ui:MenuFlyout>
                        </ui:AppBarButton.Flyout>
                    </ui:AppBarButton>
                    <TextBlock
                        x:Name="Control1Output"
                        Style="{StaticResource OutputTextBlockStyle}" />
                </StackPanel>
            </sc:ControlExample>

            <sc:ControlExample HeaderText="A MenuFlyout with checkable MenuItems and Separator.">
                <Button Content="Options">
                    <ui:FlyoutService.Flyout>
                        <ui:MenuFlyout x:Name="Flyout1">
                            <MenuItem Header="Reset" />
                            <Separator />
                            <MenuItem
                                Header="Repeat"
                                IsCheckable="True"
                                IsChecked="True" />
                            <MenuItem
                                Header="Shuffle"
                                IsCheckable="True"
                                IsChecked="True" />
                        </ui:MenuFlyout>
                    </ui:FlyoutService.Flyout>
                </Button>

                <sc:ControlExample.Options>
                    <ui:SimpleStackPanel Style="{StaticResource OptionsPanelStyle}">
                        <ComboBox
                            ui:ControlHelper.Header="Placement"
                            ItemsSource="{Binding Source={x:Type ui:FlyoutPlacementMode}, Converter={StaticResource EnumValuesConverter}}"
                            SelectedItem="{Binding ElementName=Flyout1, Path=Placement}" />
                    </ui:SimpleStackPanel>
                </sc:ControlExample.Options>
            </sc:ControlExample>

            <sc:ControlExample HeaderText="A MenuFlyout with cascading menus.">
                <Button Content="File Options">
                    <ui:FlyoutService.Flyout>
                        <ui:MenuFlyout>
                            <MenuItem Header="Open" />
                            <MenuItem Header="Send to">
                                <MenuItem Header="Bluetooth" />
                                <MenuItem Header="Desktop (shortcut)" />
                                <MenuItem Header="Compressed file">
                                    <MenuItem Header="Compress and email" />
                                    <MenuItem Header="Compress to .7z" />
                                    <MenuItem Header="Compress to .zip" />
                                </MenuItem>
                            </MenuItem>
                        </ui:MenuFlyout>
                    </ui:FlyoutService.Flyout>
                </Button>
            </sc:ControlExample>

            <sc:ControlExample HeaderText="A MenuFlyout with icons.">
                <Button Content="Edit Options">
                    <ui:FlyoutService.Flyout>
                        <ui:MenuFlyout>
                            <MenuItem Header="Share">
                                <MenuItem.Icon>
                                    <ui:FontIcon Glyph="&#xE72D;" />
                                </MenuItem.Icon>
                            </MenuItem>
                            <MenuItem Header="Copy">
                                <MenuItem.Icon>
                                    <ui:FontIcon Glyph="&#xE16F;" />
                                </MenuItem.Icon>
                            </MenuItem>
                            <MenuItem Header="Delete">
                                <MenuItem.Icon>
                                    <ui:FontIcon Glyph="&#xE107;" />
                                </MenuItem.Icon>
                            </MenuItem>
                            <Separator />
                            <MenuItem Header="Rename" />
                            <MenuItem Header="Select" />
                        </ui:MenuFlyout>
                    </ui:FlyoutService.Flyout>
                </Button>
            </sc:ControlExample>

            <sc:ControlExample HeaderText="A MenuFlyout with icons and InputGestureTexts.">
                <Button Content="Edit Options">
                    <ui:FlyoutService.Flyout>
                        <ui:MenuFlyout>
                            <MenuItem
                                Header="Share"
                                InputGestureText="Ctrl+S">
                                <MenuItem.Icon>
                                    <ui:FontIcon Glyph="&#xE72D;" />
                                </MenuItem.Icon>
                            </MenuItem>
                            <MenuItem
                                Header="Copy"
                                InputGestureText="Ctrl+C">
                                <MenuItem.Icon>
                                    <ui:FontIcon Glyph="&#xE16F;" />
                                </MenuItem.Icon>
                            </MenuItem>
                            <MenuItem
                                Header="Delete"
                                InputGestureText="Delete">
                                <MenuItem.Icon>
                                    <ui:FontIcon Glyph="&#xE107;" />
                                </MenuItem.Icon>
                            </MenuItem>
                            <Separator />
                            <MenuItem Header="Rename" />
                            <MenuItem Header="Select" />
                        </ui:MenuFlyout>
                    </ui:FlyoutService.Flyout>
                </Button>
            </sc:ControlExample>
        </ui:SimpleStackPanel>
    </ScrollViewer>
</ui:Page>
