<Page
    x:Class="BasicLibrarySamples.DropDownDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BasicLibrarySamples"
    xmlns:c1="using:C1.Xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <CheckBox x:Name="autoClose" Content="AutoClose - determines if C1DropDown will automatically close when focus is lost." IsChecked="{Binding ElementName=c1DropDown1, Path=AutoClose, Mode=TwoWay}" Margin="10"/>
        <c1:C1DropDownButton Grid.Row="1" Background="White" x:Name="c1DropDown1" Padding="2" Width="150" HorizontalAlignment="Center" VerticalAlignment="Center">
            <c1:C1DropDownButton.Header>
                <Border x:Name="dropDownBorder" Background="White" />
            </c1:C1DropDownButton.Header>
            <c1:C1DropDownButton.Content>
                <c1:C1TileListBox x:Name="colorListBox"
                                  Height="180" 
                                  Orientation="Horizontal"
                                  ItemTapped="colorListBox_ItemTapped"
                                  SelectionMode="None"
                                  HorizontalContentAlignment="Stretch"
                                  VerticalContentAlignment="Stretch"
                                  BorderBrush="{StaticResource ComboBoxPopupBorderThemeBrush}" 
                                  BorderThickness="{StaticResource ComboBoxPopupBorderThemeThickness}" 
                                  Background="{StaticResource ComboBoxPopupBackgroundThemeBrush}">
                    <Border Background="Black" BorderBrush="White" BorderThickness="1"/>
                    <Border Background="DarkGray"/>
                    <Border Background="White" BorderBrush="Black" BorderThickness="1"/>

                    <Border Background="DarkBlue" />
                    <Border Background="Blue" />
                    <Border Background="Cyan" />

                    <Border Background="Teal" />
                    <Border Background="Green" />
                    <Border Background="Lime" />

                    <Border Background="SaddleBrown"/>
                    <Border Background="Orange" />
                    <Border Background="Yellow" />

                    <Border Background="Maroon" />
                    <Border Background="Red" />
                    <Border Background="Magenta" />
                </c1:C1TileListBox>
            </c1:C1DropDownButton.Content>
        </c1:C1DropDownButton>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="540" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="autoClose.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
