<UserControl x:Class="BloodPressureChart.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"
		xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:vm="clr-namespace:BloodPressureChart"
		mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <UserControl.Resources>

        <Style x:Key="BloodPressureStyle" TargetType="telerik:RangeBar">
            <Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:RangeBar">
                        <Grid Opacity="0" x:Name="PART_MainContainer">
                            <Polyline Height="20"
                                      Margin="0,-20,0,0" VerticalAlignment="Top"
                                      Points="0.25,0 0.5,1 0.75,0"
                                      Stretch="Fill"
                                      Stroke="Black"
                                      MaxWidth="30"
                                      StrokeThickness="3" />
                            <Rectangle x:Name="PART_DefiningGeometry"
                                       Height="{TemplateBinding ItemActualHeight}"
                                       Width="3"
                                       Style="{TemplateBinding ItemStyle}" />
                            <Polyline Height="20" Margin="0,0,0,-20" VerticalAlignment="Bottom"
                                      Points="0.25,1 0.5,0 0.75,1"
                                      Stretch="Fill"
                                      Stroke="Black"
                                      MaxWidth="30"
                                      StrokeThickness="3" />

                            <Grid.RenderTransform>
                                <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
                            </Grid.RenderTransform>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <UserControl.DataContext>
        <vm:MyViewModel/>
    </UserControl.DataContext>

    <Grid x:Name="LayoutRoot">
        <telerik:RadChart x:Name="RadChart1" ItemsSource="{Binding Data}">
            <telerik:RadChart.SeriesMappings>
                <telerik:SeriesMapping>
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:RangeBarSeriesDefinition ItemStyle="{StaticResource BloodPressureStyle}">
                            <telerik:RangeBarSeriesDefinition.Appearance>
                                <telerik:SeriesAppearanceSettings Fill="Black" />
                            </telerik:RangeBarSeriesDefinition.Appearance>
                        </telerik:RangeBarSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:ItemMapping FieldName="Low" DataPointMember="Low" />
                    <telerik:ItemMapping FieldName="High" DataPointMember="High" />
                    <telerik:ItemMapping FieldName="XCat" DataPointMember="XCategory"/>
                </telerik:SeriesMapping>
            </telerik:RadChart.SeriesMappings>
            <telerik:RadChart.DefaultView>
                <telerik:ChartDefaultView>
                    <telerik:ChartDefaultView.ChartLegend>
                        <telerik:ChartLegend Visibility="Collapsed" />
                    </telerik:ChartDefaultView.ChartLegend>
                    <telerik:ChartDefaultView.ChartArea>
                        <telerik:ChartArea>
                            <telerik:ChartArea.AxisY>
                                <telerik:AxisY Title="mmHg" MajorGridLinesVisibility="Visible" />
                            </telerik:ChartArea.AxisY>
                            <telerik:ChartArea.AxisX>
                                <telerik:AxisX LayoutMode="Inside" DefaultLabelFormat="dd-MMM"/>
                            </telerik:ChartArea.AxisX>
                        </telerik:ChartArea>
                    </telerik:ChartDefaultView.ChartArea>
                </telerik:ChartDefaultView>
            </telerik:RadChart.DefaultView>
        </telerik:RadChart>
    </Grid>
</UserControl>
