<UserControl
    x:Class="SmartCharging.MultipleImagePicker"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SmartCharging"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <UserControl.Resources>
        <Flyout x:Key="ImagePreviewFlyout2" Placement="Left" x:Name="ImagePreviewFlyout" >
            <!-- The DataContext of the Image that the flyout is attached to must be the Image's Source. -->
            <Image x:ConnectionId='1' Source="{Binding Path}" MaxHeight="400" MaxWidth="400" Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Center"                               />
            <Flyout.FlyoutPresenterStyle>
                <Style TargetType="FlyoutPresenter" >
                    <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
                    <Setter Property="Background" Value="Black"/>
                    <Setter Property="BorderBrush" Value="Gray"/>
                    <Setter Property="BorderThickness" Value="0"/>
                    <Setter Property="MinHeight" Value="720"/>
                    <Setter Property="MinWidth" Value="300"/>
                    <Setter Property="VerticalAlignment" Value="Stretch"/>
                    <Setter Property="HorizontalAlignment" Value="Stretch"/>
                </Style>
            </Flyout.FlyoutPresenterStyle>
        </Flyout>

    </UserControl.Resources>

    <Grid HorizontalAlignment="Stretch">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
            <AppBarButton x:ConnectionId='2' x:Name="AddImagesButton" x:Uid="AddImagesButton" Icon="Add" Label="Aggiungi immagini" FontSize="18"                                 Foreground="#FF2CDAFF" Style="{StaticResource AppBarButtonStyleStandard}" Width="75" />

            <ListView x:Name="PreviewList" Margin="30,30,0,0" HorizontalAlignment="Stretch">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid ItemHeight="100" MaximumRowsOrColumns="2" ItemWidth="100" Orientation="Horizontal" ></VariableSizedWrapGrid>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>

                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="20"></RowDefinition>
                                <RowDefinition Height="80"></RowDefinition>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="20"></ColumnDefinition>
                                <ColumnDefinition Width="80"></ColumnDefinition>

                            </Grid.ColumnDefinitions>
                            <Image x:ConnectionId='3' Source="{Binding Path}" Width="80"  Grid.Row="1" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout2}"                      />
                            <AppBarButton x:ConnectionId='4' HorizontalAlignment="Left" Icon="Cancel" Label="" VerticalAlignment="Top"                              Style="{StaticResource AppBarButtonStyleStandard}" Height="30" Foreground="#FF564966" Margin="7,7,7,0"  Grid.ColumnSpan="2" Grid.RowSpan="2" Width="30"  />
                        </Grid>
                    </DataTemplate>

                </ListView.ItemTemplate>

            </ListView>

        </StackPanel>


    </Grid>
</UserControl>