<Page
    x:Class="Listenelemente.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Listenelemente"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Margin="100" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="100"/>
        </Grid.RowDefinitions>

        <TextBlock Grid.Column="0" FontSize="32" HorizontalAlignment="Center" VerticalAlignment="Center">ListBox</TextBlock>
        <TextBlock Grid.Column="1" FontSize="32" HorizontalAlignment="Center" VerticalAlignment="Center">FlipView</TextBlock>
        <TextBlock Grid.Column="2" FontSize="32" HorizontalAlignment="Center" VerticalAlignment="Center">Datenbindung</TextBlock>

        <ListBox Name="listBox1" Grid.Column="0" Grid.Row="1" 
                 Margin="50,75" ScrollViewer.VerticalScrollBarVisibility="Visible"
                 SelectionChanged="listBox1_SelectionChanged_1" >
            <x:String>Element 1</x:String>
            <x:String>Element 2</x:String>
            <x:String>Element 3</x:String>
        </ListBox>

        <FlipView Name="flipView1" Grid.Column="1" Grid.Row="1" 
                  SelectionChanged="flipView1_SelectionChanged_1">
            <Image Source="Assets/Dogh01.tif" />
            <Image Source="Assets/Dogh02.tif" />
            <Image Source="Assets/Dogh03.tif" />
            <Image Source="Assets/Dogh04.tif" />
            <Image Source="Assets/Dogh05.tif" />
            
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid Background="#FFD13939">
                        <Image Height="100" Width="100" Source="{Binding Source}" Stretch="Fill"/>
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>

            <FlipView.ItemContainerStyle>
                <Style TargetType="FlipViewItem">
                    <Setter Property="BorderBrush" Value="Silver"/>
                    <Setter Property="BorderThickness" Value="5"/>
                    <Setter Property="Padding" Value="10"/>
                </Style>
            </FlipView.ItemContainerStyle>

            <FlipView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </FlipView.ItemsPanel>
            
        </FlipView>


        <Grid Grid.Column="2" Grid.Row="1" Margin="50,75">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Button Grid.Column="0" HorizontalAlignment="Stretch" Click="Button_Click_1">Hinzufügen</Button>
            <Button Grid.Column="1" HorizontalAlignment="Stretch" Click="Button_Click_2">Löschen</Button>

            <ListBox Grid.Row="1" Grid.ColumnSpan="2" Name="listBox2" 
                     ScrollViewer.VerticalScrollBarVisibility="Visible"
                     SelectionChanged="listBox2_SelectionChanged_1" VerticalContentAlignment="Stretch" >
            </ListBox>
            
        </Grid>

        <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.ColumnSpan="3">
            <TextBlock VerticalAlignment="Center" Padding="10" FontSize="32">Ausgewähltes Element: </TextBlock>
            <Border Margin="20" Background="White" >
                <TextBlock Name="output" VerticalAlignment="Center" Padding="10" 
                           FontSize="24"  Width="440" Foreground="Black" />
            </Border>
        </StackPanel>

    </Grid>
    
    
</Page>
