<UserControl x:Class="FlickrSlideShow.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="Auto" 
    Height="Auto" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" >

    <Grid x:Name="layoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.8, 0.9" StartPoint="0.1,-0.09">
                <GradientStop Color="#FF7CA5BF"/>
                <GradientStop Color="#FFE0E7EC" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>

        <Grid.RowDefinitions>
            <RowDefinition Height="10"/>
            <RowDefinition Height="40"/>
            <RowDefinition Height="10"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="40"/>
            <RowDefinition Height="160"/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="30"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="30"/>
        </Grid.ColumnDefinitions>
        
        <StackPanel x:Name="searchControl" Grid.Row="1" Grid.Column="1" 
                    Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" >
            <TextBlock x:Name="searchInputLabel" Text="Flickr Suche: " FontSize="12" FontFamily="Tahoma" Height="22" Padding="0, 2, 5, 0" />
            <TextBox x:Name="searchInput" Text="Bitte Suchbegriff eingeben..." FontFamily="Tahoma" FontSize="12" Padding="2" Width="250" Height="22"/>
            <Button x:Name="searchButton" Content="Suchen" FontFamily="Tahoma" FontSize="12" Click="searchButton_Click" Margin="10, 0, 0, 0" Height="22"/>
        </StackPanel>
        
        <Image Grid.Column="1" Grid.Row="3" Height="480" Width="Auto" Source="" x:Name="slideshowImage" Visibility="Collapsed">
            <Image.Resources>
                <Storyboard x:Name="fadeInAnimation">
                    <DoubleAnimation Duration="00:00:00.40" From="0" To="1"
                        Storyboard.TargetProperty="Opacity"
                        Storyboard.TargetName="slideshowImage" />
                </Storyboard>
                <Storyboard x:Name="fadeOutAnimation">
                    <DoubleAnimation Duration="00:00:00.40" From="1" To="0"
                        Storyboard.TargetProperty="Opacity"
                        Storyboard.TargetName="slideshowImage" />
                </Storyboard>
            </Image.Resources>
        </Image>
        
        <Grid x:Name="imageOverview" Grid.Column="1" Grid.Row="3" 
              Height="Auto" Width="Auto" 
              HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="200" />
            </Grid.ColumnDefinitions>
        </Grid>
        
        <TextBlock x:Name="selectionLabel" Grid.Row="5" Grid.Column="1" 
                   Text="Bilder für die Slideshow hierhin ziehen" 
                   TextAlignment="Center" VerticalAlignment="Center" />

        <ScrollViewer x:Name="scroller" 
                      Grid.Row="5" Grid.ColumnSpan="3" 
                      BorderThickness="1"  Background="Transparent"
                      HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden" Margin="0,0,0,0" VerticalAlignment="Stretch">
            <StackPanel x:Name="thumbnailContainer" Orientation="Horizontal" 
                        HorizontalAlignment="Center" VerticalAlignment="Stretch" />
        </ScrollViewer>

        <Button x:Name="slideshowButton" Grid.Row="6" Grid.Column="1" 
                Width="150" Height="24" 
                Content="Slideshow starten" 
                FontFamily="Tahoma" FontSize="12" 
                Click="slideshowButton_Click" 
                Visibility="Collapsed" />

        <Canvas x:Name="dragLayer" Grid.RowSpan="6" Grid.ColumnSpan="3" 
                HorizontalAlignment="Left" VerticalAlignment="Top" />

    </Grid>
</UserControl>
