<UserControl x:Class="RadTimeBarOfficial.MainPage"
             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"
             mc:Ignorable="d"
             d:DesignHeight="400"
             d:DesignWidth="800"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:local="clr-namespace:RadTimeBarOfficial">
    <UserControl.Resources>
        <local:SalesViewModel x:Key="xSalesViewModel" />
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot"
          DataContext="{StaticResource xSalesViewModel}"
          Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="150" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <local:SalesViewModel x:Name="xSalesViewModel" />
        <TextBlock FontFamily="Portable User Interface"
                   Text="RADTIMEBAR"
                   FontSize="24"
                   Foreground="DarkGray"
                   Margin="5" />
        
        <telerik:RadTimeBar x:Name="xRadTimeBar"
                            Grid.ColumnSpan="2"
                            Grid.Row="1"
                            IsSnapToIntervalEnabled="True"
                            PeriodStart="1-1-2011"
                            PeriodEnd="4-15-2011"
                            VisiblePeriodStart="4-1-2011"
                            VisiblePeriodEnd="4-15-2011"
                            SelectionStart="4-12-2011"
                            SelectionEnd="4-13-2011"
                            SelectionChanged="xRadTimeBar_SelectionChanged">
            <telerik:RadTimeBar.Intervals>
                <telerik:MonthInterval />
                <telerik:WeekInterval />
                <telerik:DayInterval />
                <telerik:HourInterval />                
            </telerik:RadTimeBar.Intervals>
            <telerik:RadAreaSparkline ItemsSource="{Binding SalesData}"
                                      XValuePath="datadate"
                                      YValuePath="salestotal"
                                      Margin="0,8" />
        </telerik:RadTimeBar>

        <telerik:RadChart x:Name="xRadChart"
                          TimeBar="{Binding ElementName=xRadTimeBar}"
                          ItemsSource="{Binding SalesData}"
                          Grid.Row="2">
            <telerik:RadChart.SeriesMappings>
                <telerik:SeriesMapping>
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:AreaSeriesDefinition />
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:SeriesMapping.ItemMappings>
                        <telerik:ItemMapping FieldName="salestotal"
                                             DataPointMember="YValue" />
                        <telerik:ItemMapping FieldName="datadate"
                                             DataPointMember="XCategory" />
                    </telerik:SeriesMapping.ItemMappings>
                </telerik:SeriesMapping>
                <telerik:SeriesMapping>
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:LineSeriesDefinition />
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:SeriesMapping.ItemMappings>
                        <telerik:ItemMapping FieldName="marketingspend"
                                             DataPointMember="YValue" />
                        <telerik:ItemMapping FieldName="datadate"
                                             DataPointMember="XCategory" />
                    </telerik:SeriesMapping.ItemMappings>
                </telerik:SeriesMapping>
            </telerik:RadChart.SeriesMappings>
        </telerik:RadChart>

        <telerik:RadGridView x:Name="xRadGridView"
                             Grid.Row="2"
                             Grid.Column="1"
                             ItemsSource="{Binding SalesData}" />
    </Grid>
</UserControl>
