<UserControl x:Class="Q3.SL.Demos.Demos.Barcode"
             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:telerikTransitions="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"
             xmlns:vms="clr-namespace:Q3.SL.Demos.ViewModels"
             mc:Ignorable="d"
             d:DesignHeight="600"
             d:DesignWidth="800">
    <UserControl.Resources>
        <vms:BarcodeViewModel x:Key="xBarcodeViewModel" />
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot"
          DataContext="{StaticResource xBarcodeViewModel}"
          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 Width="200" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Order System"
                           Style="{StaticResource zTitleBlockStyle}" />
                <TextBlock Text="Product Selection"
                           Style="{StaticResource zSmallHeaderStyleTop}"
                           Grid.Column="1"
                           Grid.Row="1" />
                <ListBox x:Name="xProductListBox"
                         ItemsSource="{Binding Products}"
                         SelectionChanged="xProductListBox_SelectionChanged"
                         DisplayMemberPath="Name"
                         Grid.Column="1"
                         Grid.Row="1"
                         telerik:StyleManager.Theme="Metro"
                         BorderThickness="0"
                         Margin="5,30,5,5" />
                <Grid x:Name="xProductDisplayGrid"
                      DataContext="{Binding ElementName=xProductListBox, Path=SelectedItem}"
                      Grid.Row="1">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition Height="2*" />
                        <RowDefinition Height="2*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="Product ID"
                               Style="{StaticResource zSmallHeaderStyle}" />
                    <TextBlock Text="{Binding Id}"
                               Style="{StaticResource zSmallHeaderBasicStyle}"
                               Grid.Column="1" />
                    <TextBlock Grid.Row="1"
                               Text="Product Name"
                               Style="{StaticResource zSmallHeaderStyle}" />
                    <TextBlock Text="{Binding Name}"
                               Style="{StaticResource zSmallHeaderBasicStyle}"
                               Grid.Column="1"
                               Grid.Row="1" />
                    <TextBlock Grid.Row="2"
                               Text="Product Quantity"
                               Style="{StaticResource zSmallHeaderStyle}" />
                    <TextBlock Text="{Binding Quantity}"
                               Style="{StaticResource zSmallHeaderBasicStyle}"
                               Grid.Column="1"
                               Grid.Row="2" />
                    <telerik:RadTransitionControl x:Name="xTransition"
                                                  Grid.Row="3"
                                                  Grid.ColumnSpan="2"
                                                  Style="{StaticResource zBarcodeTransitionStyle}">
                        <telerik:RadTransitionControl.Transition>
                            <telerikTransitions:FadeTransition />
                        </telerik:RadTransitionControl.Transition>
                    </telerik:RadTransitionControl>
                    <telerik:RadButton Grid.Row="5"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       Content="Order"
                                       Width="100" />
                    <telerik:RadButton Grid.Row="5"
                                       Grid.Column="1"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       Content="Cancel"
                                       Width="100" />
                </Grid>
            </Grid>
        </Border>

    </Grid>
</UserControl>
