<UserControl x:Class="McLaren_WPF.Controls.SpeedPanel"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             mc:Ignorable="d" 
             Height="300" Width="200">

    <UserControl.Resources>

        <DataTemplate x:Key="TriangleTickTemplate">
            <Polygon Points="0.5,0 1,1 0,1"
					Stretch="Fill" 
					Fill="#2F6C9D"
					Stroke="{Binding Path=Stroke}"
					StrokeThickness="{Binding Path=StrokeThickness}" />
        </DataTemplate>

        <DataTemplate x:Key="MajorTriangleTickTemplate">
            <Grid>
                <Path Data="M89,41 L94,32 L100,32 L105,41" 
                      Fill="#FCE0E5"
                      Stroke="#FF2F6C9E"
                      Stretch="Fill" />
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="2*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Polygon Grid.Column="1" 
                             Grid.Row="1"
                             Fill="#FF427493"
                             Points="0.5,0 1,1 0,1" 
                             Stretch="Fill"  />
                </Grid>
            </Grid>
        </DataTemplate>

        <Style x:Key="NeedleStyle" TargetType="telerik:Needle">
            <Setter Property="telerik:ScaleObject.Location" Value="Inside" />
            <Setter Property="telerik:ScaleObject.RelativeWidth" Value="0.1*" />
            <Setter Property="telerik:ScaleObject.Offset" Value="0.3*" />
            <Setter Property="Background" Value="Brown" />
            <Setter Property="TailHeight" Value="0.12" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:Needle">
                        <Grid x:Name="PART_Grid" >
                            <Polygon Points="0,0 1,0 0.5,1"
								     Fill="{TemplateBinding Background}"
                                     Stroke="{TemplateBinding BorderBrush}"
								     Stretch="Fill"/>

                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Border Margin="3" CornerRadius="10" Padding="15" Background="#FCE0E5">

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="24"/>
                <RowDefinition Height="20"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="24"/>
                <RowDefinition Height="20"/>
            </Grid.RowDefinitions>

            <TextBlock Name="DescriptionTxt" TextAlignment="Center"  Text="1-Speed"
                       VerticalAlignment="Center" Padding="0,5" Width="160"
                       FontSize="16" Foreground="#1E5B8C"  />
            
            <TextBlock Name="DelayTxt" Grid.Row="1" 
                       VerticalAlignment="Bottom"  TextAlignment="Center"
                       Foreground="#6C6969"  Text= "Data delay: 150 msec"
                       FontSize="12"  />
            
            <telerik:RadRadialGauge Grid.Row="2" Width="160" Height="160" Margin="0"                                      
                    VerticalAlignment="Center" OuterBorderBrush="#FFF0F0F0"
                   OuterBorderThickness="2" OuterBackground="#FF63837F" InnerBorderBrush="#FFF7EEB2">
                <telerik:RadRadialGauge.InnerBackground>
                    <RadialGradientBrush>
                        <GradientStop Color="#FFE8E8E4" Offset="0"/>
                        <GradientStop Color="#FFBCBF77" Offset="1"/>
                        <GradientStop Color="#FFECE78D" Offset="0.874"/>
                    </RadialGradientBrush>
                </telerik:RadRadialGauge.InnerBackground>

                <telerik:RadialScale StartWidth="0.04"
                        EndWidth="0.04"
                        Radius="0.55"
                        MajorTickRelativeWidth="1"
                        MajorTickRelativeHeight="3"
                        MajorTickBackground="Blue"
                        MajorTickStep="60"
                        MiddleTickRelativeWidth="1"
                        MiddleTickRelativeHeight="3"
                        MiddleTicks="3"
                        MinorTicks="1"
                        Min="0" Max="248"
                        ShowLastLabel="False"
                        RangeOffset="2"
                        RangeLocation="Outside"
                        LabelOffset="4"
                        LabelRotationMode="None"
                        LabelLocation="CenterInside"
                        Foreground="Blue"
                        FontFamily="Segoe UI Semibold">

                    <telerik:RadialScale.Ranges>
                        <telerik:GaugeRange Background="#FF09AE09"  
                                                StartWidth="0.01"
                                                EndWidth="0.01"
                                                Min="0" Max="180" />
                        <telerik:GaugeRange Background="OrangeRed"  
                                                StartWidth="0.01"
                                                EndWidth="0.01"
                                                Min="180" Max="248"/>
                    </telerik:RadialScale.Ranges>

                    <telerik:RadialScale.CustomItems>
                        <TextBlock Text="mph" 
                                        TextAlignment="Center" 
                                        FontFamily="Segoe UI Semibold"
                                        FontSize="12" 
                                        Foreground="Blue"
                                        telerik:ScaleObject.RelativeX="0.44"
                                        telerik:ScaleObject.RelativeY="0.74" />
                    </telerik:RadialScale.CustomItems>

                </telerik:RadialScale>

                <telerik:RadialScale Name="scale2"    
                                            Min="0" Max="400"
                                            MajorTickStep="50"
                                            MiddleTicks="2"
                                            MinorTicks="1"
                                            MajorTickLocation="Inside"  
                                            MajorTickRelativeWidth="0.15*"
                                            MajorTickRelativeHeight="0.1*"
                                            MajorTickOffset="-2"
                                            MajorTickTemplate="{StaticResource MajorTriangleTickTemplate}"
                                            MiddleTickLocation="Inside"
                                            MiddleTickOffset="0.05*"
                                            MiddleTickRelativeWidth="0.03*"
                                            MiddleTickRelativeHeight="0.08*"
                                            MiddleTickBackground="Gray"
                                            MiddleTickTemplate="{StaticResource TriangleTickTemplate}"
                                            LabelLocation="Inside"
                                            LabelOffset="0.12*"
                                            LabelRotationMode="None"
                                            Foreground="Black"
                                            StartWidth="0.04"
                                            EndWidth="0.04"
                                            RangeOffset="-1"
                                            RangeLocation="Inside"
                                            FontFamily="Segoe UI Semibold"
                                            Radius="1.00">

                    <telerik:RadialScale.Indicators>
                        <telerik:Pinpoint Background="#FFBB4848" 
                                                BorderBrush="#FFFAA687" 
                                                StrokeThickness="2"
                                                telerik:ScaleObject.RelativeWidth="18" 
                                                telerik:ScaleObject.RelativeHeight="18" />
                        <telerik:Needle Value="40" Name="SpeedNeedle" IsAnimated="True"
                                            Style="{StaticResource NeedleStyle}"/>
                    </telerik:RadialScale.Indicators>

                    <telerik:RadialScale.Ranges>
                        <telerik:GaugeRange Background="#FF2F6C9E" 
                                                StrokeThickness="2"
                                                StartWidth="0.03"
                                                EndWidth="0.03"
                                                Min="0" Max="200"/>
                    </telerik:RadialScale.Ranges>
                    <telerik:RadialScale.CustomItems>
                        <TextBlock Text="km/h"
                                        TextAlignment="Center" 
                                        FontFamily="Segoe UI Semibold"
                                        FontSize="12"
                                        Foreground="Black"
                                        telerik:ScaleObject.RelativeX="0.43"
                                        telerik:ScaleObject.RelativeY="0.82"/>
                    </telerik:RadialScale.CustomItems>
                </telerik:RadialScale>
            </telerik:RadRadialGauge>

            <TextBlock Name="SpeedTxt" Grid.Row="3" 
                       VerticalAlignment="Center" 
                       Foreground="#1E5B8C"  TextAlignment="Center" Text="200 km/h"
                       FontSize="24" FontWeight="Bold" />
            
            <TextBlock Name="InfoTxt" Grid.Row="4" 
                       VerticalAlignment="Center" 
                       Foreground="Gray"  TextAlignment="Center" Text="20 liters"
                       FontSize="14"  />
        </Grid>

    </Border>

</UserControl>


