<ui:Page
    x:Class="ModernWpf.SampleApp.ControlPages.ButtonsPage"
    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>
        <sys:Double x:Key="SwatchSize">32</sys:Double>
    </Page.Resources>

    <ScrollViewer>
        <ui:SimpleStackPanel Style="{StaticResource ControlPageContentPanelStyle}">
            <sc:ControlExample HeaderText="Simple DropDownButton">
                <StackPanel
                    x:Name="Control1"
                    Orientation="Horizontal">
                    <ui:DropDownButton Content="Email">
                        <ui:DropDownButton.Flyout>
                            <ui:MenuFlyout Placement="BottomEdgeAlignedLeft">
                                <MenuItem Header="Send" />
                                <MenuItem Header="Reply" />
                                <MenuItem Header="Reply All" />
                            </ui:MenuFlyout>
                        </ui:DropDownButton.Flyout>
                    </ui:DropDownButton>
                </StackPanel>
            </sc:ControlExample>

            <sc:ControlExample HeaderText="DropDownButton with Icons">
                <StackPanel
                    x:Name="Control2"
                    Orientation="Horizontal">
                    <ui:DropDownButton AutomationProperties.Name="Email">
                        <ui:DropDownButton.Content>
                            <ui:FontIcon Glyph="&#xE715;" />
                        </ui:DropDownButton.Content>
                        <ui:DropDownButton.Flyout>
                            <ui:MenuFlyout Placement="BottomEdgeAlignedLeft">
                                <MenuItem Header="Send">
                                    <MenuItem.Icon>
                                        <ui:FontIcon Glyph="&#xE725;" />
                                    </MenuItem.Icon>
                                </MenuItem>
                                <MenuItem Header="Reply">
                                    <MenuItem.Icon>
                                        <ui:FontIcon Glyph="&#xE8CA;" />
                                    </MenuItem.Icon>
                                </MenuItem>
                                <MenuItem Header="Reply All">
                                    <MenuItem.Icon>
                                        <ui:FontIcon Glyph="&#xE8C2;" />
                                    </MenuItem.Icon>
                                </MenuItem>
                            </ui:MenuFlyout>
                        </ui:DropDownButton.Flyout>
                    </ui:DropDownButton>
                </StackPanel>
            </sc:ControlExample>

            <sc:ControlExample HeaderText="DropDownButton with CommandBarFlyout">
                <StackPanel Orientation="Horizontal">
                    <ui:DropDownButton AutomationProperties.Name="Email">
                        <ui:DropDownButton.Content>
                            <ui:FontIcon Glyph="&#xE715;" />
                        </ui:DropDownButton.Content>
                        <ui:DropDownButton.Flyout>
                            <ui:CommandBarFlyout Placement="BottomEdgeAlignedLeft">
                                <ui:CommandBarFlyout.SecondaryCommands>
                                    <ui:AppBarButton Label="Send">
                                        <ui:AppBarButton.Icon>
                                            <ui:FontIcon Glyph="&#xE725;" />
                                        </ui:AppBarButton.Icon>
                                    </ui:AppBarButton>
                                    <ui:AppBarButton Label="Reply">
                                        <ui:AppBarButton.Icon>
                                            <ui:FontIcon Glyph="&#xE8CA;" />
                                        </ui:AppBarButton.Icon>
                                    </ui:AppBarButton>
                                    <ui:AppBarButton Label="Reply All">
                                        <ui:AppBarButton.Icon>
                                            <ui:FontIcon Glyph="&#xE8C2;" />
                                        </ui:AppBarButton.Icon>
                                    </ui:AppBarButton>
                                </ui:CommandBarFlyout.SecondaryCommands>
                            </ui:CommandBarFlyout>
                        </ui:DropDownButton.Flyout>
                    </ui:DropDownButton>
                </StackPanel>
            </sc:ControlExample>

            <sc:ControlExample HeaderText="Simple SplitButton">
                <StackPanel Orientation="Horizontal">
                    <ui:SplitButton
                        x:Name="myColorButton"
                        AutomationProperties.Name="Font color"
                        Padding="0"
                        MinHeight="0"
                        MinWidth="0"
                        VerticalAlignment="Top">
                        <Rectangle
                            x:Name="CurrentColor"
                            Width="{StaticResource SwatchSize}"
                            Height="{StaticResource SwatchSize}"
                            Fill="Black"
                            Margin="0" />
                        <ui:SplitButton.Flyout>
                            <ui:Flyout Placement="BottomEdgeAlignedLeft">
                                <UniformGrid
                                    Rows="3"
                                    Columns="3">
                                    <UniformGrid.Resources>
                                        <Style TargetType="Rectangle">
                                            <Setter Property="Width" Value="{StaticResource SwatchSize}" />
                                            <Setter Property="Height" Value="{StaticResource SwatchSize}" />
                                        </Style>
                                        <Style TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}">
                                            <Setter Property="Padding" Value="0" />
                                            <Setter Property="MinWidth" Value="0" />
                                            <Setter Property="MinHeight" Value="0" />
                                            <Setter Property="Margin" Value="6" />
                                        </Style>
                                    </UniformGrid.Resources>
                                    <Button
                                        Click="ColorButton_Click"
                                        AutomationProperties.Name="Red">
                                        <Button.Content>
                                            <Rectangle Fill="Red" />
                                        </Button.Content>
                                    </Button>
                                    <Button
                                        Click="ColorButton_Click"
                                        AutomationProperties.Name="Orange">
                                        <Button.Content>
                                            <Rectangle Fill="Orange" />
                                        </Button.Content>
                                    </Button>
                                    <Button
                                        Click="ColorButton_Click"
                                        AutomationProperties.Name="Yellow">
                                        <Button.Content>
                                            <Rectangle Fill="Yellow" />
                                        </Button.Content>
                                    </Button>
                                    <Button
                                        Click="ColorButton_Click"
                                        AutomationProperties.Name="Green">
                                        <Button.Content>
                                            <Rectangle Fill="Green" />
                                        </Button.Content>
                                    </Button>
                                    <Button
                                        Click="ColorButton_Click"
                                        AutomationProperties.Name="Blue">
                                        <Button.Content>
                                            <Rectangle Fill="Blue" />
                                        </Button.Content>
                                    </Button>
                                    <Button
                                        Click="ColorButton_Click"
                                        AutomationProperties.Name="Indigo">
                                        <Button.Content>
                                            <Rectangle Fill="Indigo" />
                                        </Button.Content>
                                    </Button>
                                    <Button
                                        Click="ColorButton_Click"
                                        AutomationProperties.Name="Violet">
                                        <Button.Content>
                                            <Rectangle Fill="Violet" />
                                        </Button.Content>
                                    </Button>
                                    <Button
                                        Click="ColorButton_Click"
                                        AutomationProperties.Name="Gray">
                                        <Button.Content>
                                            <Rectangle Fill="Gray" />
                                        </Button.Content>
                                    </Button>
                                    <Button
                                        Click="ColorButton_Click"
                                        AutomationProperties.Name="Black">
                                        <Button.Content>
                                            <Rectangle Fill="Black" />
                                        </Button.Content>
                                    </Button>
                                </UniformGrid>
                            </ui:Flyout>
                        </ui:SplitButton.Flyout>
                    </ui:SplitButton>
                </StackPanel>
            </sc:ControlExample>

            <sc:ControlExample HeaderText="Simple ToggleSplitButton">
                <StackPanel Orientation="Horizontal">
                    <ui:ToggleSplitButton
                        x:Name="myListButton"
                        AutomationProperties.Name="Bullets"
                        VerticalAlignment="Top"
                        IsCheckedChanged="MyListButton_IsCheckedChanged">
                        <ui:SymbolIcon
                            x:Name="mySymbolIcon"
                            Symbol="List" />
                        <ui:ToggleSplitButton.Flyout>
                            <ui:Flyout Placement="BottomEdgeAlignedLeft">
                                <StackPanel Orientation="Horizontal">
                                    <StackPanel.Resources>
                                        <Style TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}">
                                            <Setter Property="Padding" Value="4" />
                                            <Setter Property="MinWidth" Value="0" />
                                            <Setter Property="MinHeight" Value="0" />
                                            <Setter Property="Margin" Value="6" />
                                        </Style>
                                    </StackPanel.Resources>
                                    <Button
                                        Click="BulletButton_Click"
                                        AutomationProperties.Name="Bulleted list">
                                        <ui:SymbolIcon Symbol="List" />
                                    </Button>
                                    <Button
                                        Click="BulletButton_Click"
                                        AutomationProperties.Name="Roman numerals list">
                                        <ui:SymbolIcon Symbol="Bullets" />
                                    </Button>
                                </StackPanel>
                            </ui:Flyout>
                        </ui:ToggleSplitButton.Flyout>
                    </ui:ToggleSplitButton>
                </StackPanel>
            </sc:ControlExample>
        </ui:SimpleStackPanel>
    </ScrollViewer>
</ui:Page>
