<UserControl
    x:Class="BasicLibrarySamples.View.ListBoxSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BasicLibrarySamples.View"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c1="using:C1.Xaml"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    
    <Grid>
        <StackPanel x:Name="loading" VerticalAlignment="Center">
            <TextBlock Text="Retrieving data from Flickr..." TextAlignment="Center"/>
            <c1:C1ProgressBar IsIndeterminate="True" IndeterminateForeground="#FF2C383D" Height="4"/>
        </StackPanel>
        <Button x:Name="retry" HorizontalAlignment="Center" VerticalAlignment="Center" Content="Retry" Visibility="Collapsed" Click="Retry_Click" />
        <c1:C1ListBox x:Name="listBox" 
                      Background="Transparent"
                      Foreground="White"
                      SelectedBackground="#FF0AC2FF"
                      Visibility="Collapsed"
                      ItemWidth="300"
                      ItemHeight="240"
                      Orientation="Horizontal"
                      ZoomMode="Enabled"
                      ViewportGap="0"
                      ViewportPreviewGap="0"
                      RefreshWhileScrolling="False"
                      ItemTapped="listBox_ItemTapped"
                      HorizontalContentAlignment="Stretch"
                      VerticalContentAlignment="Stretch">
            <c1:C1ListBox.PreviewItemTemplate>
                <DataTemplate>
                    <Grid Background="Gray">
                        <Image Source="{Binding Thumbnail}" Stretch="UniformToFill"/>
                    </Grid>
                </DataTemplate>
            </c1:C1ListBox.PreviewItemTemplate>
            <c1:C1ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Image Source="{Binding Content}" Stretch="UniformToFill"/>
                        <TextBlock Text="{Binding Title}" Margin="4 0 0 4" VerticalAlignment="Bottom"/>
                    </Grid>
                </DataTemplate>
            </c1:C1ListBox.ItemTemplate>
            <c1:C1ListViewer.ItemStyle>
                <!--This style allows showing the preview while the full image is being loaded-->
                <Style TargetType="c1:C1ListBoxItem">
                    <Setter Property="BorderThickness" Value="4"/>
                    <Setter Property="Margin" Value="4"/>
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="c1:C1ListBoxItem">
                                <Grid>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="PointerOver">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PointerOverBorder"/>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="DesignBrush" Storyboard.TargetName="SelectedBackground">
                                                        <DiscreteObjectKeyFrame KeyTime="0">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <SolidColorBrush Color="#FF5F37BE"/>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content"/>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="PreviewStates">
                                            <VisualState x:Name="Full">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Visibility>Visible</Visibility>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Preview">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Visibility>Collapsed</Visibility>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="SelectionStates">
                                            <VisualState x:Name="NotSelected">
                                                <Storyboard>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Selected">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/>
                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Path x:Name="HintingCheckMark" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{TemplateBinding SelectedBackground}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
                                    <Grid x:Name="Hinting">
                                        <Rectangle x:Name="PointerOverBorder" Fill="{TemplateBinding MouseOverBrush}" IsHitTestVisible="False" Margin="1" Opacity="0"/>
                                        <Rectangle x:Name="SelectionBackground" Fill="{TemplateBinding SelectedBackground}" Opacity="0"/>
                                        <Border x:Name="ContentBorder" 
                                    BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    Background="{TemplateBinding Background}">
                                            <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                                <ContentControl x:Name="PreviewElement" 
                                            Content="{TemplateBinding PreviewContent}" 
                                            ContentTemplate="{TemplateBinding PreviewContentTemplate}" 
                                            Visibility="Visible"
                                            HorizontalContentAlignment="Stretch"
                                            VerticalContentAlignment="Stretch"/>
                                                <ContentPresenter x:Name="Content" Visibility="Collapsed"/>
                                            </Grid>
                                        </Border>
                                        <c1:C1BrushBuilder x:Name="SelectedBackground" Input="{TemplateBinding SelectedBackground}" DesignColor="#FF4617B4" DesignBrush="#FF4617B4"/>
                                        <Border x:Name="SelectedBorder" IsHitTestVisible="False" Opacity="0" BorderBrush="{Binding Output,ElementName=SelectedBackground}" BorderThickness="{TemplateBinding BorderThickness}">
                                            <Grid x:Name="SelectedCheckMark" Height="40" Width="40" HorizontalAlignment="Right" IsHitTestVisible="False" VerticalAlignment="Top">
                                                <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{Binding Output,ElementName=SelectedBackground}" Stretch="Fill"/>
                                                <Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
                                            </Grid>
                                        </Border>
                                    </Grid>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </c1:C1ListViewer.ItemStyle>
        </c1:C1ListBox>
    </Grid>
</UserControl>
