<Page
    x:Class="GaugeSamples.RadialGauge"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GaugeSamples"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c1="using:C1.Xaml.Gauge"
    mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="ValueFaceTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="0"  HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16" Margin="0,20,0,-20" Opacity="0.6" />
                <TextBlock Text="100" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="16" Margin="0,20,0,-20" Opacity="0.6" />
            </Grid>
        </DataTemplate>
        <local:ValueTextConverter x:Key="Converter"/>
    </Page.Resources>
    <Grid>
        <c1:C1RadialGauge x:Name="myGauge" Height="300" PointerVisibility="Collapsed" Background="Transparent" FaceTemplate="{StaticResource ValueFaceTemplate}"
                          Value="25" StartAngle="-90" SweepAngle="180" PointerPressed="OnPointerPressed" PointerMoved="OnPointerMoved" PointerReleased="OnPointerReleased">
            <c1:C1GaugeRange To="100" Fill="White" Location="0.6" Width="0.6" Stroke="#C0C0C0" StrokeThickness="2"/>
            <c1:C1GaugeRange To="{Binding ElementName=myGauge,Path=Value}" Location="0.6" Fill="#0085C7" Width="0.6" />
        </c1:C1RadialGauge>
        <TextBlock Text="{Binding ElementName=myGauge,Path=Value,Converter={StaticResource Converter}}" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="28" FontWeight="Bold" />
        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's window size -->
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="540" />
                    </VisualState.StateTriggers>
                </VisualState>
                <!-- Visual states reflect the Windows Phone Wide window size -->
                <VisualState x:Name="MiddleLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="480" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="myGauge.Height" Value="220" />
                        <Setter Target="myGauge.Width" Value="220" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
