<UserControl x:Class="Q3.SL.Demos.Demos.VirtualPanel"
             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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:vms="clr-namespace:Q3.SL.Demos.ViewModels"
             xmlns:exclasses="clr-namespace:Q3.SL.Demos.ExClasses"
             mc:Ignorable="d"
             d:DesignHeight="600"
             d:DesignWidth="800">
    <UserControl.Resources>
        <DataTemplate x:Key="xListTemplate">
            <StackPanel>
                <TextBlock Text="{Binding Id}"
                           FontWeight="Bold"
                           Margin="5,0" />
                <StackPanel Orientation="Horizontal"
                            Margin="5">
                    <TextBlock Text="{Binding Name}" />
                    <TextBlock Text="{Binding Quantity, StringFormat=' ({0})'}" />
                </StackPanel>
                <TextBlock Text="{Binding UPCValue}"
                           Margin="5,0" />
            </StackPanel>
        </DataTemplate>
        <vms:VirtualViewModel x:Key="xVVM" />
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot"
          DataContext="{StaticResource xVVM}"
          Background="White">
        <Border HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Width="700"
                Height="400"
                Background="{StaticResource MainBrush}"
                BorderThickness="1"
                BorderBrush="{StaticResource BasicBrush}">
            <Border.Effect>
                <DropShadowEffect BlurRadius="5"
                                  Color="Black"
                                  ShadowDepth="5"
                                  Opacity=".5" />
            </Border.Effect>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="60" />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Virtualize-It!™ "
                           Style="{StaticResource zTitleBlockStyle}" />
                <ListBox x:Name="xListOne"
                         ItemTemplate="{StaticResource xListTemplate}"
                         ItemsSource="{Binding ProductList}"
                         Grid.Row="1"
                         Margin="20" />
                <ListBox x:Name="xListTwo"
                         ItemTemplate="{StaticResource xListTemplate}"
                         ItemsSource="{Binding ProductList}"
                         Grid.Row="1"
                         Grid.Column="1"
                         Margin="20">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <telerik:VirtualizingWrapPanel ItemWidth="125" />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>
            </Grid>
        </Border>
    </Grid>
</UserControl>
