<UserControl x:Class="AdaptiveLayout.AdaptiveItemTemplateControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="using:AdaptiveLayout"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             d:DesignHeight="300"
             d:DesignWidth="400"
             mc:Ignorable="d">
    <RelativePanel>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <!--
                    Depending on the width of the screen the children in the RelativePanel are reordered.
                -->
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Thumbnail.(RelativePanel.AlignTopWithPanel)" Value="True" />
                        <Setter Target="Title.(RelativePanel.RightOf)" Value="Thumbnail" />
                        <Setter Target="Title.(RelativePanel.AlignTopWithPanel)" Value="True" />
                        <Setter Target="Description.(RelativePanel.Below)" Value="Title" />
                        <Setter Target="Description.(RelativePanel.RightOf)" Value="Thumbnail" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="NarrowState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="Title.(RelativePanel.AlignTopWithPanel)" Value="True" />
                        <Setter Target="Thumbnail.Fill" Value="#15aac1" />
                        <Setter Target="Thumbnail.(RelativePanel.Below)" Value="Title" />
                        <Setter Target="Description.(RelativePanel.Below)" Value="Thumbnail" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Rectangle x:Name="Thumbnail"
                   Width="200"
                   Height="100"
                   Fill="#7eaf00" />
        <TextBlock x:Name="Title"
                   FontWeight="Bold"
                   Text="{Binding Path=Title, Mode=OneWay}"
                   TextWrapping="Wrap" />
        <TextBlock x:Name="Description"
                   Margin="8"
                   Text="{Binding Path=Description, Mode=OneWay}"
                   TextWrapping="Wrap" />
    </RelativePanel>
</UserControl>
