<Page
    x:Class="Breda_Tour.MapScreen.WpDetailPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Breda_Tour.MapScreen"
    xmlns:c ="using:Breda_Tour.CustomControls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:data="using:Breda_Tour.Data"
    mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <c:DefaultTopBar x:Name="NameBar" Grid.Row="0" Header="{x:Bind wp.Title}"/>
        <ListView Background="White" Grid.Row="1" ItemsSource="{x:Bind wp.Pictures}"
                  ScrollViewer.HorizontalScrollMode="Enabled"
                    ScrollViewer.IsHorizontalRailEnabled="True"
                    ScrollViewer.VerticalScrollMode="Disabled" HorizontalAlignment="Left" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="Margin" Value="0"/>
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemTemplate >
                <DataTemplate x:DataType="data:Picture">
                    <Image Source="{x:Bind Source}" Height="{x:Bind Width}" Width="{x:Bind Width}" Stretch="UniformToFill" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <RelativePanel Background="White" Grid.Row="2">
            <TextBlock x:Uid="WpDetailPagetxtBeschrijving" Text="Beschrijving" FontSize="20" Margin="15,15,0,15" />
            <Line X1="0" X2="{x:Bind Width, Mode=OneTime}" Y1="50" Y2="50" Stroke="Gray" StrokeThickness="2" />
        </RelativePanel>
        <RelativePanel Background="White" Grid.Row="3">
            <ScrollViewer Margin="15,0,0,0" VerticalScrollBarVisibility="Auto" >
                <TextBlock HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" TextWrapping="Wrap" Text="{x:Bind wp.Description}"/>
            </ScrollViewer>
        </RelativePanel>
    </Grid>
</Page>
