<Page
    x:Class="SpeedometerProgressBar.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SpeedometerProgressBar"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    
    <Page.Resources>
        <ControlTemplate x:Key="progressTemplate"
                         TargetType="ProgressBar">
            <Grid>
                <Grid.Resources>
                    <Style TargetType="Line">
                        <Setter Property="Stroke" Value="Black" />
                        <Setter Property="StrokeThickness" Value="1" />
                        <Setter Property="X1" Value="-85" />
                        <Setter Property="X2" Value="-95" />
                    </Style>

                    <Style TargetType="TextBlock">
                        <Setter Property="FontSize" Value="11" />
                        <Setter Property="Foreground" Value="Black" />
                    </Style>
                </Grid.Resources>

                <Border Width="270" Height="120"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="White">

                    <!-- Canvas for positioning graphics-->
                    <Canvas Width="0" Height="0" 
                            RenderTransform="1 0 0 1 0 50" >

                        <!-- The required parts of the ProgressBar template -->
                        <Border Name="DeterminateRoot"
                                Width="180">
                            <Rectangle Name="ProgressBarIndicator"
                                       HorizontalAlignment="Left" />
                        </Border>

                        <Line RenderTransform=" 1.00 0.00 -0.00 1.00 0 0" />
                        <Line RenderTransform=" 0.95 0.31 -0.31 0.95 0 0" />
                        <Line RenderTransform=" 0.81 0.59 -0.59 0.81 0 0" />
                        <Line RenderTransform=" 0.59 0.81 -0.81 0.59 0 0" />
                        <Line RenderTransform=" 0.31 0.95 -0.95 0.31 0 0" />
                        <Line RenderTransform=" 0.00 1.00 -1.00 0.00 0 0" />
                        <Line RenderTransform="-0.31 0.95  0.95 0.31 0 0" />
                        <Line RenderTransform="-0.59 0.81  0.81 0.59 0 0" />
                        <Line RenderTransform="-0.81 0.59  0.59 0.81 0 0" />
                        <Line RenderTransform="-0.95 0.31  0.31 0.95 0 0" />
                        <Line RenderTransform="-1.00 0.00  0.00 1.00 0 0" />

                        <TextBlock Text="0%" Canvas.Left="-115" Canvas.Top="-6" />
                        <TextBlock Text="20%" Canvas.Left="-104" Canvas.Top="-65" />
                        <TextBlock Text="40%" Canvas.Left="-42" Canvas.Top="-105" />
                        <TextBlock Text="60%" Canvas.Left="25" Canvas.Top="-105" />
                        <TextBlock Text="80%" Canvas.Left="82" Canvas.Top="-65" />
                        <TextBlock Text="100%" Canvas.Left="100" Canvas.Top="-6" />

                        <!-- Arrow to point to percentage -->
                        <Polygon Points="5 5 5 -5 -75 0"
                                 Stroke="Black" 
                                 Fill="Red">
                            <Polygon.RenderTransform>
                                <RotateTransform Angle="{Binding ElementName=ProgressBarIndicator, 
                                                                 Path=Width}" />
                            </Polygon.RenderTransform>
                        </Polygon>
                    </Canvas>
                </Border>
            </Grid>
        </ControlTemplate>
    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        
        <ProgressBar Grid.Row="0"
                     Template="{StaticResource progressTemplate}"
                     Margin="48"
                     Value="{Binding ElementName=slider, Path=Value}" />
        
        <Slider Name="slider"
                Grid.Row="1"
                Margin="48"
                VerticalAlignment="Center" />
    </Grid>
</Page>
