<ui:Page
    x:Class="ModernWpf.SampleApp.ControlPages.CommandBarFlyoutPage"
    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"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    mc:Ignorable="d">

    <Page.Resources>
        <ui:CommandBarFlyout
            Placement="RightEdgeAlignedTop"
            x:Key="CommandBarFlyout1">
            <ui:AppBarButton Label="Share" Icon="Share" ToolTipService.ToolTip="Share" Click="OnElementClicked" />
            <ui:AppBarButton Label="Save" Icon="Save" ToolTipService.ToolTip="Save" Click="OnElementClicked" />
            <ui:AppBarButton Label="Delete" Icon="Delete" ToolTipService.ToolTip="Delete" Click="OnElementClicked" />
            <ui:CommandBarFlyout.SecondaryCommands>
                <ui:AppBarButton Label="Resize" Click="OnElementClicked" />
                <ui:AppBarButton Label="Move" Click="OnElementClicked" />
            </ui:CommandBarFlyout.SecondaryCommands>
        </ui:CommandBarFlyout>
    </Page.Resources>

    <ScrollViewer>
        <ui:SimpleStackPanel Style="{StaticResource ControlPageContentPanelStyle}">
            <sc:ControlExample HeaderText="CommandBarFlyout for commands on an in-app object">
                <StackPanel>
                    <TextBlock Text="Click or right click the image to open a CommandBarFlyout" />
                    <Button
                        x:Name="myImageButton"
                        AutomationProperties.Name="mountain"
                        Padding="0"
                        Margin="0,12"
                        Click="MyImageButton_Click"
                        ContextMenuOpening="MyImageButton_ContextMenuOpening">
                        <Image
                            x:Name="Image1"
                            Height="300"
                            Source="/Assets/SampleMedia/rainier.jpg" />
                    </Button>
                    <TextBlock
                        x:Name="SelectedOptionText"
                        Text="" />
                </StackPanel>
            </sc:ControlExample>

            <sc:ControlExample HeaderText="A command bar flyout with custom zoom UI in the menu">
                <StackPanel>
                    <Button Content="Click me">
                        <ui:FlyoutService.Flyout>
                            <ui:CommandBarFlyout
                                x:Name="CommandBarFlyout2"
                                Placement="RightEdgeAlignedTop">
                                <ui:AppBarButton Icon="Cut" ToolTipService.ToolTip="Cut" />
                                <ui:AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy" />
                                <ui:AppBarButton Icon="Paste" ToolTipService.ToolTip="Paste" />
                                <!-- Alignment controls -->
                                <ui:AppBarElementContainer>
                                    <ui:SplitButton
                                        ToolTipService.ToolTip="Alignment"
                                        CornerRadius="0"
                                        ui:FocusVisualHelper.FocusVisualMargin="0">
                                        <ui:SplitButton.Resources>
                                            <!--
                                                Override default brushes to make the SplitButton
                                                match other command bar elements.
                                            -->
                                            <Style TargetType="ui:SplitButton">
                                                <Setter Property="Height" Value="38" />
                                            </Style>
                                            <SolidColorBrush x:Key="SplitButtonBackground" Color="Transparent" />
                                            <SolidColorBrush x:Key="SplitButtonBackgroundPressed" Color="{DynamicResource SystemListMediumColor}" />
                                            <SolidColorBrush x:Key="SplitButtonBackgroundPointerOver" Color="{DynamicResource SystemListLowColor}" />
                                            <SolidColorBrush x:Key="SplitButtonBorderBrush" Color="Transparent" />
                                            <SolidColorBrush x:Key="SplitButtonBorderBrushPointerOver" Color="Transparent" />
                                            <SolidColorBrush x:Key="SplitButtonBorderBrushChecked" Color="Transparent" />
                                        </ui:SplitButton.Resources>
                                        <ui:SplitButton.Content>
                                            <Viewbox
                                                Width="16"
                                                Height="16"
                                                Margin="0,2,0,0">
                                                <ui:SymbolIcon Symbol="AlignLeft" />
                                            </Viewbox>
                                        </ui:SplitButton.Content>
                                        <ui:SplitButton.Flyout>
                                            <ui:MenuFlyout Placement="BottomEdgeAlignedLeft">
                                                <MenuItem Header="Align left">
                                                    <MenuItem.Icon>
                                                        <ui:SymbolIcon Symbol="AlignLeft" />
                                                    </MenuItem.Icon>
                                                </MenuItem>
                                                <MenuItem Header="Center">
                                                    <MenuItem.Icon>
                                                        <ui:SymbolIcon Symbol="AlignCenter" />
                                                    </MenuItem.Icon>
                                                </MenuItem>
                                                <MenuItem Header="Align right">
                                                    <MenuItem.Icon>
                                                        <ui:SymbolIcon Symbol="AlignRight" />
                                                    </MenuItem.Icon>
                                                </MenuItem>
                                            </ui:MenuFlyout>
                                        </ui:SplitButton.Flyout>
                                    </ui:SplitButton>
                                </ui:AppBarElementContainer>
                                <!-- end Alignment controls -->
                                <ui:CommandBarFlyout.SecondaryCommands>
                                    <!-- Zoom controls -->
                                    <ui:AppBarElementContainer>
                                        <ui:AppBarElementContainer.Resources>
                                            <!--
                                                Override default brushes to make the Buttons
                                                match other command bar elements.
                                            -->
                                            <SolidColorBrush x:Key="ButtonBackground" Color="Transparent" />
                                            <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{DynamicResource SystemListMediumColor}" />
                                            <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{DynamicResource SystemListLowColor}" />
                                            <SolidColorBrush x:Key="ButtonBorderBrush" Color="Transparent" />
                                            <SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="Transparent" />
                                            <SolidColorBrush x:Key="ButtonBorderBrushChecked" Color="Transparent" />
                                            <Style TargetType="TextBlock">
                                                <Setter Property="VerticalAlignment" Value="Center" />
                                            </Style>
                                            <Style TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}">
                                                <Setter Property="Height" Value="40" />
                                                <Setter Property="Width" Value="40" />
                                            </Style>
                                        </ui:AppBarElementContainer.Resources>
                                        <Grid Margin="12,-4">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="76" />
                                                <ColumnDefinition Width="Auto" />
                                            </Grid.ColumnDefinitions>
                                            <Viewbox
                                                Width="16"
                                                Height="16"
                                                Margin="0,2,0,0">
                                                <ui:SymbolIcon Symbol="Zoom" />
                                            </Viewbox>
                                            <TextBlock
                                                Text="Zoom"
                                                Margin="10,0,0,0"
                                                Grid.Column="1" />
                                            <StackPanel
                                                Orientation="Horizontal"
                                                Grid.Column="2">
                                                <Button ToolTipService.ToolTip="Zoom out">
                                                    <Viewbox
                                                        Width="16"
                                                        Height="16">
                                                        <ui:SymbolIcon Symbol="ZoomOut" />
                                                    </Viewbox>
                                                </Button>
                                                <TextBlock
                                                    Text="50%"
                                                    Width="40"
                                                    TextAlignment="Center" />
                                                <Button ToolTipService.ToolTip="Zoom in">
                                                    <Viewbox
                                                        Width="16"
                                                        Height="16">
                                                        <ui:SymbolIcon Symbol="ZoomIn" />
                                                    </Viewbox>
                                                </Button>
                                            </StackPanel>
                                        </Grid>
                                    </ui:AppBarElementContainer>
                                    <!-- end Zoom controls -->
                                    <ui:AppBarSeparator />
                                    <ui:AppBarButton Label="Undo" Icon="Undo" />
                                    <ui:AppBarButton Label="Redo" Icon="Redo" />
                                    <ui:AppBarButton Label="Select all" Icon="SelectAll" />
                                </ui:CommandBarFlyout.SecondaryCommands>
                            </ui:CommandBarFlyout>
                        </ui:FlyoutService.Flyout>
                    </Button>
                </StackPanel>
                <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=CommandBarFlyout2, Path=Placement}" />
                    </ui:SimpleStackPanel>
                </sc:ControlExample.Options>
            </sc:ControlExample>
        </ui:SimpleStackPanel>
    </ScrollViewer>
</ui:Page>
