Telerik UI for Windows Phone by Progress

CopyXAML
    <phone:PhoneApplicationPage x:Class="WindowsPhoneApplication1.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
      xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:gauges="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.DataVisualization"
      mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
      FontFamily="{StaticResource PhoneFontFamilyNormal}"
      FontSize="{StaticResource PhoneFontSizeNormal}"
      Foreground="{StaticResource PhoneForegroundBrush}"
      SupportedOrientations="Portrait" Orientation="Portrait"
      shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
        <Grid.Resources>
            <gauges:GaugeValueToBrushConverter x:Key="converter1" DefaultColor="Gray">
                <gauges:GaugeColorValueRange MinValue="25" MaxValue="40" Color="Transparent" />
            </gauges:GaugeValueToBrushConverter>
            <gauges:GaugeValueToBrushConverter x:Key="converter2" DefaultColor="Transparent">
                <gauges:GaugeColorValueRange MinValue="0" MaxValue="0" Color="{StaticResource PhoneAccentColor}" />
                <gauges:GaugeColorValueRange MinValue="100" MaxValue="100" Color="{StaticResource PhoneAccentColor}" />
                <gauges:GaugeColorValueRange MinValue="120" MaxValue="120" Color="#FF005676" />
            </gauges:GaugeValueToBrushConverter>
            <gauges:GaugeValueToBrushConverter x:Key="converter3" DefaultColor="Transparent">
                <gauges:GaugeColorValueRange MinValue="0" MaxValue="100" Color="{StaticResource PhoneAccentColor}" />
            </gauges:GaugeValueToBrushConverter>
            <DataTemplate x:Key="redLabelTemplate">
                <TextBlock Text="{Binding}" Foreground="Red" FontWeight="Bold" FontSize="17" />
            </DataTemplate>
            <DataTemplate x:Key="rhombTemplate">
                <Rectangle Width="11" Height="11" Fill="Gray" RenderTransformOrigin="0.5, 0.5">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <SkewTransform AngleX="20" AngleY="20" />
                            <RotateTransform Angle="-40" />
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                </Rectangle>
            </DataTemplate>
            <DataTemplate x:Key="redCircleTemplate">
                <Ellipse Width="12" Height="12" Fill="{StaticResource PhoneBackgroundBrush}" Stroke="Red" />
            </DataTemplate>
        </Grid.Resources>
        <Button VerticalAlignment="Bottom" Content="Update" Click="OnButtonClick" />
        <gauges:RadialGaugeRange MaxValue="120" MaxAngle="115" LabelStep="20" TickStep="20" TickRadiusScale="0.60" LabelRadiusScale="0.50" SweepDirection="Counterclockwise" Height="400" Width="400" x:Name="range2">
            <gauges:RadialGaugeRange.TickTemplate>
                <DataTemplate>
                    <Rectangle Width="10" Height="2" Fill="{Binding Converter={StaticResource converter3}}" />
                </DataTemplate>
            </gauges:RadialGaugeRange.TickTemplate>
            <gauges:RadialGaugeRange.LabelTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" FontSize="12" Foreground="{Binding Converter={StaticResource converter2}}" FontWeight="Bold" />
                </DataTemplate>
            </gauges:RadialGaugeRange.LabelTemplate>
            <gauges:SegmentedRadialGaugeIndicator Value="120" gauges:RadialGaugeRange.MaxAngle="115.5" gauges:RadialGaugeRange.IndicatorRadiusScale="0.63">
                <gauges:BarIndicatorSegment Thickness="4" Length="0.8" Stroke="#FF005676" />
                <gauges:BarIndicatorSegment Thickness="4" Length="4" Stroke="{StaticResource PhoneAccentBrush}" />
            </gauges:SegmentedRadialGaugeIndicator>
            <gauges:MarkerGaugeIndicator Value="60" gauges:RadialGaugeRange.MaxAngle="115" gauges:RadialGaugeRange.SweepDirection="Counterclockwise" gauges:RadialGaugeRange.IndicatorRadiusScale="0.5" IsMarkerRotated="False">
                <gauges:MarkerGaugeIndicator.MarkerTemplate>
                    <DataTemplate>
                        <TextBlock Text="%" FontSize="17" Foreground="{StaticResource PhoneAccentBrush}" />
                    </DataTemplate>
                </gauges:MarkerGaugeIndicator.MarkerTemplate>
            </gauges:MarkerGaugeIndicator>
        </gauges:RadialGaugeRange>
        <gauges:RadialGaugeRange MaxAngle="180" MaxValue="40" TickStep="3.35" LabelStep="10" LabelRadiusScale="0.86" TickRadiusScale="0.78" Width="400" Height="400" x:Name="range1">
            <gauges:RadialGaugeRange.TickTemplate>
                <DataTemplate>
                    <Rectangle Width="10" Height="2" Fill="{Binding Converter={StaticResource converter1}}" />
                </DataTemplate>
            </gauges:RadialGaugeRange.TickTemplate>
            <gauges:RadialGaugeRange.LabelTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" Foreground="{Binding Converter={StaticResource converter1}}" FontWeight="Bold" FontSize="17" />
                </DataTemplate>
            </gauges:RadialGaugeRange.LabelTemplate>
            <gauges:SegmentedRadialGaugeIndicator gauges:RadialGaugeRange.MaxAngle="180" gauges:RadialGaugeRange.IndicatorRadiusScale="0.78" Value="40">
                <gauges:BarIndicatorSegment Length="1.05" Thickness="2" Stroke="#FFCCCCCC" />
                <gauges:BarIndicatorSegment Length="1" Thickness="2" Stroke="Gray" />
                <gauges:BarIndicatorSegment Length="1.1" Thickness="2" Stroke="Red" />
            </gauges:SegmentedRadialGaugeIndicator>
            <gauges:MarkerGaugeIndicator gauges:RadialGaugeRange.MaxAngle="180" gauges:RadialGaugeRange.IndicatorRadiusScale="0.78" Value="26" MarkerTemplate="{StaticResource redCircleTemplate}" />
            <gauges:MarkerGaugeIndicator gauges:RadialGaugeRange.MaxAngle="180" gauges:RadialGaugeRange.IndicatorRadiusScale="0.78" Value="40" MarkerTemplate="{StaticResource redCircleTemplate}" />
            <gauges:MarkerGaugeIndicator gauges:RadialGaugeRange.MaxAngle="180" gauges:RadialGaugeRange.IndicatorRadiusScale="0.90" Value="26" IsMarkerRotated="False" MarkerTemplate="{StaticResource redLabelTemplate}" />
            <gauges:MarkerGaugeIndicator gauges:RadialGaugeRange.MaxAngle="180" gauges:RadialGaugeRange.IndicatorRadiusScale="0.90" Value="40" IsMarkerRotated="False" MarkerTemplate="{StaticResource redLabelTemplate}" />
            <gauges:MarkerGaugeIndicator gauges:RadialGaugeRange.MaxAngle="180" gauges:RadialGaugeRange.IndicatorRadiusScale="0.78" Value="34" x:Name="indicator1" IsAnimated="True" MarkerTemplate="{StaticResource rhombTemplate}" />
            <gauges:ArrowGaugeIndicator x:Name="indicator2" ArrowBrush="{StaticResource PhoneForegroundBrush}" gauges:RadialGaugeRange.IndicatorRadiusScale="0.73" gauges:RadialGaugeRange.MaxAngle="180" ArrowThickness="2" ArrowTailRadius="1.2" Value="23.66" IsAnimated="True" />
        </gauges:RadialGaugeRange>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock Text="{Binding Path=ActualValue, ElementName=indicator2}" FontWeight="Bold" FontSize="18" Width="50" />
            <TextBlock Text="%8.3" HorizontalAlignment="Center" Foreground="{StaticResource PhoneAccentBrush}" FontWeight="Bold" FontSize="15" Margin="0, -5, 0, 0" x:Name="percentText" />
            <StackPanel.RenderTransform>
                <TranslateTransform Y="20" />
            </StackPanel.RenderTransform>
        </StackPanel>
    </Grid>
</phone:PhoneApplicationPage>