<UserControl x:Class="Q3.SL.Demos.Demos.ChartView"
             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"
             mc:Ignorable="d"
             d:DesignHeight="600"
             d:DesignWidth="800">
    <UserControl.Resources>
        <vms:ChartViewModel x:Key="xChartVM" />
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot"
          DataContext="{StaticResource xChartVM}"
          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 />
                    <RowDefinition Height="40" />
                </Grid.RowDefinitions>
                <TextBlock Text="Chart That!"
                           Style="{StaticResource zTitleBlockStyle}" />
                <!--<telerik:RadCartesianChart x:Name="xChart"
                                           Palette="Metro"
                                           Grid.Row="1">
                    <telerik:RadCartesianChart.Behaviors>
                        <telerik:ChartPanAndZoomBehavior PanMode="Horizontal"
                                                         ZoomMode="Horizontal" />
                    </telerik:RadCartesianChart.Behaviors>
                    <telerik:BarSeries x:Name="xBar"
                                       ItemsSource="{Binding chartDataOne}"
                                       ValueBinding="Val1"
                                       CategoryBinding="Id" />
                    <telerik:AreaSeries x:Name="xArea"
                                        ItemsSource="{Binding chartDataTwo}"
                                        ValueBinding="Val2"
                                        CategoryBinding="Id" />
                    <telerik:RadCartesianChart.HorizontalAxis>
                        <telerik:CategoricalAxis GapLength=".5"
                                                 LabelFitMode="Rotate"
                                                 LabelInterval="100" />
                    </telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:RadCartesianChart.VerticalAxis>
                        <telerik:LinearAxis Minimum="0"
                                            Maximum="1000" />
                    </telerik:RadCartesianChart.VerticalAxis>
                </telerik:RadCartesianChart>-->
                <telerik:RadPolarChart x:Name="xRadPolar"
                                       Grid.Row="1">
                    <telerik:PolarPointSeries x:Name="xPolar"
                                              ItemsSource="{Binding polarData}"
                                              ValueBinding="Val1"
                                              AngleBinding="Val2">
                        <telerik:PolarPointSeries.PointTemplate>
                            <DataTemplate>
                                <Rectangle Width="3"
                                           Height="3"
                                           Fill="Red" />
                            </DataTemplate>
                        </telerik:PolarPointSeries.PointTemplate>
                    </telerik:PolarPointSeries>
                    <telerik:PolarAreaSeries x:Name="xPolar2"
                                             ItemsSource="{Binding polarData2}"
                                             ValueBinding="Val1"
                                             AngleBinding="Val2">

                    </telerik:PolarAreaSeries>
                    <telerik:RadPolarChart.PolarAxis>
                        <telerik:PolarAxis Minimum="0"
                                           Maximum="50"
                                           LineThickness="1"
                                           LineStroke="Red" />
                    </telerik:RadPolarChart.PolarAxis>
                    <telerik:RadPolarChart.RadialAxis>
                        <telerik:NumericRadialAxis  />
                    </telerik:RadPolarChart.RadialAxis>
                </telerik:RadPolarChart>
            </Grid>
        </Border>
    </Grid>
</UserControl>
