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

    <ScrollViewer>
        <ui:SimpleStackPanel Style="{StaticResource ControlPageContentPanelStyle}">
            <sc:ControlExample
                x:Name="Example1"
                HeaderText="A simple FlipView with items declared inline.">
                <sc:ControlExample.Example>
                    <mah:FlipView
                        x:Name="FlipView1"
                        MaxWidth="400"
                        Height="270"
                        HorizontalAlignment="Left">
                        <Image
                            Source="/Assets/SampleMedia/cliff.jpg"
                            AutomationProperties.Name="Cliff" />
                        <Image
                            Source="/Assets/SampleMedia/grapes.jpg"
                            AutomationProperties.Name="Grapes" />
                        <Image
                            Source="/Assets/SampleMedia/rainier.jpg"
                            AutomationProperties.Name="Rainier" />
                        <Image
                            Source="/Assets/SampleMedia/sunset.jpg"
                            AutomationProperties.Name="Sunset" />
                        <Image
                            Source="/Assets/SampleMedia/valley.jpg"
                            AutomationProperties.Name="Valley" />
                    </mah:FlipView>
                </sc:ControlExample.Example>
                <sc:ControlExample.Options>
                    <ui:SimpleStackPanel Style="{StaticResource OptionsPanelStyle}">
                        <CheckBox
                            Content="CircularNavigation"
                            IsChecked="{Binding ElementName=FlipView1, Path=CircularNavigation}" />
                        <CheckBox
                            Content="IsNavigationEnabled"
                            IsChecked="{Binding ElementName=FlipView1, Path=IsNavigationEnabled}" />
                        <ui:RadioButtons
                            Header="Orientation"
                            ItemsSource="{Binding Source={x:Type Orientation}, Converter={StaticResource EnumValuesConverter}}"
                            SelectedItem="{Binding ElementName=FlipView1, Path=Orientation}" />
                    </ui:SimpleStackPanel>
                </sc:ControlExample.Options>
            </sc:ControlExample>

            <sc:ControlExample
                x:Name="Example2"
                HeaderText="A FlipView showing bound data with a data template.">
                <sc:ControlExample.Example>
                    <mah:FlipView
                        x:Name="FlipView2"
                        Width="400"
                        Height="180"
                        BorderBrush="Black"
                        BorderThickness="1">
                        <mah:FlipView.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <Rectangle
                                        Width="36"
                                        Height="36"
                                        Fill="{Binding}"
                                        VerticalAlignment="Center" />
                                    <Border
                                        Background="#A5FFFFFF"
                                        Height="60"
                                        Grid.Row="1">
                                        <TextBlock
                                            Text="{Binding}"
                                            Foreground="Black"
                                            Padding="12,12"
                                            Style="{StaticResource TitleTextBlockStyle}"
                                            HorizontalAlignment="Center" />
                                    </Border>
                                </Grid>
                            </DataTemplate>
                        </mah:FlipView.ItemTemplate>
                    </mah:FlipView>
                </sc:ControlExample.Example>
            </sc:ControlExample>
        </ui:SimpleStackPanel>
    </ScrollViewer>
</ui:Page>
