<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="TileSamples.FlickrPhotoViewer" x:Name="pageRoot" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml">

    <UserControl.Resources>
        <Style TargetType="c1:C1Tile" x:Key="baseTileStyle">
            <Setter Property="Background" Value="LightGray" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="HeaderPadding" Value="5" />
            <Setter Property="HeaderBackground" Value="#88000000" />
            <Setter Property="HeaderForeground" Value="White" />
            <Setter Property="HeaderFontSize" Value="20" />
            <Setter Property="HorizontalHeaderAlignment" Value="Stretch" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Height" Value="224" />
            <Setter Property="Width" Value="224" />
            <Setter Property="Margin" Value="3" />
            <Setter Property="c1:C1TileService.PointerDownAnimation" Value="True" />
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <Image Source="{Binding ImageSource}" Stretch="UniformToFill" Margin="0" />
                            <Border Background="#88FFFFFF" VerticalAlignment="Top" Height="24">
                                <TextBlock Text="{Binding Author}" Foreground="Black" FontSize="12" FontWeight="Bold" Margin="10 4" />
                            </Border>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="c1:C1Tile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
        <Style TargetType="c1:C1SlideTile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
        <Style TargetType="c1:C1FlipTile" BasedOn="{StaticResource baseTileStyle}">
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <ScrollViewer HorizontalAlignment="Center">
            <c1:C1WrapPanel x:Name="tilePanel">
                <c1:C1SlideTile Header="nature" Command="{Binding TileCommand, ElementName=pageRoot}" CommandParameter="{Binding Content, RelativeSource={RelativeSource Self}}" />
                <c1:C1FlipTile Header="people" Command="{Binding TileCommand, ElementName=pageRoot}" CommandParameter="{Binding Content, RelativeSource={RelativeSource Self}}" />
                <c1:C1SlideTile Width="454" Header="travel" Command="{Binding TileCommand, ElementName=pageRoot}" CommandParameter="{Binding Content, RelativeSource={RelativeSource Self}}" />
                <c1:C1FlipTile Header="night" Command="{Binding TileCommand, ElementName=pageRoot}" CommandParameter="{Binding Content, RelativeSource={RelativeSource Self}}" />
                <c1:C1SlideTile Header="traffic" Command="{Binding TileCommand, ElementName=pageRoot}" CommandParameter="{Binding Content, RelativeSource={RelativeSource Self}}" />
                <c1:C1SlideTile Header="animals" Command="{Binding TileCommand, ElementName=pageRoot}" CommandParameter="{Binding Content, RelativeSource={RelativeSource Self}}" />
                <c1:C1SlideTile Header="cars" Command="{Binding TileCommand, ElementName=pageRoot}" CommandParameter="{Binding Content, RelativeSource={RelativeSource Self}}" />
                <c1:C1SlideTile Header="family" Command="{Binding TileCommand, ElementName=pageRoot}" CommandParameter="{Binding Content, RelativeSource={RelativeSource Self}}" />
                <c1:C1Tile Header="summer" Command="{Binding TileCommand, ElementName=pageRoot}" CommandParameter="{Binding Content, RelativeSource={RelativeSource Self}}" />
                <c1:C1SlideTile Width="454" Header="architecture" Command="{Binding TileCommand, ElementName=pageRoot}" CommandParameter="{Binding Content, RelativeSource={RelativeSource Self}}" />
            </c1:C1WrapPanel>
        </ScrollViewer>

    </Grid>
</UserControl>