<Page
    x:Name="pageRoot"
    x:Class="TileSamples.C1TileListBoxSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:c1="using:C1.Xaml"
    xmlns:c1tile="using:C1.Xaml.Tile"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style x:Key="listBoxItemStyle" TargetType="c1:C1ListBoxItem">
            <Setter Property="c1tile:C1TileService.PointerDownAnimation" Value="True"/>
        </Style>
        <Style TargetType="c1tile:C1Tile" x:Key="baseTileStyle">
            <Setter Property="Background" Value="#88bde6" />
            <Setter Property="FontSize" Value="80"/>
            <Setter Property="HeaderForeground" Value="White"/>
            <Setter Property="HeaderBackground" Value="#44000000"/>
            <Setter Property="HorizontalHeaderAlignment" Value="Stretch"/>
            <Setter Property="HeaderFontSize" Value="12"/>
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="HeaderPadding" Value="8" />
            <Setter Property="Width" Value="260" />
            <Setter Property="Height" Value="160" />
        </Style>
        <Style TargetType="c1tile:C1Tile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
        <Style TargetType="c1tile:C1SlideTile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
        <Style TargetType="c1tile:C1FlipTile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <c1:C1TileListBox ItemStyle="{StaticResource listBoxItemStyle}" >
            <c1:C1TileListBox.Items>
                <c1tile:C1Tile Header="{Binding Tile1_Header, Source={StaticResource TileSamplesLocalization}}" 
                               Content="{Binding Source={StaticResource TileSamplesLocalization}, Path=Tile1_Content}" HeaderBackground="#22000000" />
                <c1tile:C1SlideTile HorizontalContentAlignment="Stretch" Header="{Binding Source={StaticResource TileSamplesLocalization}, Path=SlideTile2_Header}"
                                    VerticalContentAlignment="Stretch" Content="{Binding Source={StaticResource TileSamplesLocalization}, Path=SlideTile2_Content}">
                    <c1tile:C1Tile.ContentTemplate>
                        <DataTemplate>
                            <Border Background="#90cd97" >
                                <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                            </Border>
                        </DataTemplate>
                    </c1tile:C1Tile.ContentTemplate>
                    <c1tile:C1Tile.BackContentTemplate>
                        <DataTemplate>
                            <Border Background="#f6aac9" >
                                <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                                    <TextBlock Text="{Binding}" HorizontalAlignment="Center"/>
                                    <TextBlock Text="{Binding Source={StaticResource TileSamplesLocalization}, Path=BackContent_Text}" Margin="0 -10 0 0" FontSize="12" HorizontalAlignment="Center"/>
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </c1tile:C1Tile.BackContentTemplate>
                </c1tile:C1SlideTile>
                <c1tile:C1SlideTile Content="{Binding Source={StaticResource TileSamplesLocalization}, Path=SlideTile3_Content}"
                                    Header="{Binding Source={StaticResource TileSamplesLocalization}, Path=SlideTile3_Header}"
                                    BackContent="{Binding Source={StaticResource TileSamplesLocalization}, Path=SlideTile3_BackContent}" FontSize="36" />
                <c1tile:C1SlideTile Content="{Binding Source={StaticResource TileSamplesLocalization}, Path=SlideTile4_Content}" 
                                    Header="{Binding Source={StaticResource TileSamplesLocalization}, Path=SlideTile4_Header}" SlideDirection="Right" />
                <c1tile:C1SlideTile Content="{Binding Source={StaticResource TileSamplesLocalization}, Path=SlideTile5_Content}" Header="{Binding Source={StaticResource TileSamplesLocalization}, Path=SlideTile5_Header}" />
                <c1tile:C1FlipTile Content="{Binding Source={StaticResource TileSamplesLocalization}, Path=FlipTile6_Content}" Header="{Binding Source={StaticResource TileSamplesLocalization}, Path=FlipTile6_Header}"/>
                <c1tile:C1FlipTile Content="{Binding Source={StaticResource TileSamplesLocalization}, Path=FlipTile7_Content}" Header="{Binding Source={StaticResource TileSamplesLocalization}, Path=FlipTile7_Header}" HeaderBackground="#22000000">
                    <c1tile:C1Tile.ContentTemplate>
                        <DataTemplate>
                            <Border Background="#bc99c7" >
                                <TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                            </Border>
                        </DataTemplate>
                    </c1tile:C1Tile.ContentTemplate>
                    <c1tile:C1Tile.BackContentTemplate>
                        <DataTemplate>
                            <Border Background="#fbb258" >
                                <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                                    <TextBlock Text="{Binding}" HorizontalAlignment="Center"/>
                                    <TextBlock Text="{Binding Source={StaticResource TileSamplesLocalization}, Path=BackContent_Text}" Margin="0 -10 0 0" FontSize="12" HorizontalAlignment="Center"/>
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </c1tile:C1Tile.BackContentTemplate>
                </c1tile:C1FlipTile>
            </c1:C1TileListBox.Items>
        </c1:C1TileListBox>
    </Grid>
</Page>
