Click here to Skip to main content
15,885,985 members
Articles / Mobile Apps / Windows Phone 7

Custom Gauge Controls for Windows Phone 7: Part II

Rate me:
Please Sign up or sign in to vote.
4.95/5 (21 votes)
25 Feb 2013CPOL15 min read 52.1K   976   34  
This article is the second in the series that describes a set of gauge controls for WP7.
<phone:PhoneApplicationPage 
    x:Class="WPClientV2.SneakPeek"
    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:scada="clr-namespace:WPScadaControlsV2;assembly=WPScadaControlsV2"
    xmlns:loc="clr-namespace:WPClientV2"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot contains the root grid where all other page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentGrid" Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <!--<Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <scada:RadialScale Margin="5"/>
                <scada:LinearScale Grid.Row="1" Margin="10"/>
            </Grid>
            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <scada:RadialScale Margin="5" DefaultRangeColor="Red"
                                   RangeThickness="3" DefaultTickColor="SteelBlue"
                                   MinorTickStep="10"/>
                <scada:LinearScale Grid.Row="1" Margin="10" DefaultRangeColor="Red"
                                   RangeThickness="3" DefaultTickColor="SteelBlue"
                                   MinorTickStep="10" MajorTickStep="50"/>
            </Grid>
            <Grid Grid.Row="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <scada:RadialScale Margin="5" RangeThickness="5"
                                   DefaultTickColor="Red"
                                   MinorTickStep="5" MajorTickStep="20" >
                    <scada:RadialScale.Ranges>
                        <scada:GaugeRange Offset="40" Color="Green"/>
                    </scada:RadialScale.Ranges>
                </scada:RadialScale>
                <scada:LinearScale Grid.Row="1" Margin="10" 
                                   DefaultTickColor="Red" RangeThickness="5"
                                   MinorTickStep="5" MajorTickStep="20" >
                    <scada:LinearScale.Ranges>
                        <scada:GaugeRange Offset="40" Color="Green"/>
                    </scada:LinearScale.Ranges>
                </scada:LinearScale>
            </Grid>
            <Grid Grid.Row="1" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <scada:RadialScale Margin="5" RangeThickness="5" UseRangeColorsForTicks="True">
                    <scada:RadialScale.Ranges>
                        <scada:GaugeRange Offset="30" Color="{StaticResource PhoneAccentColor}"/>
                        <scada:GaugeRange Offset="60" Color="Gold"/>
                        <scada:GaugeRange Offset="90" Color="Red"/>
                    </scada:RadialScale.Ranges>
                </scada:RadialScale>
                <scada:LinearScale Grid.Row="1" Margin="10" RangeThickness="5"
                                   UseRangeColorsForTicks="True">
                    <scada:LinearScale.Ranges>
                        <scada:GaugeRange Offset="30" Color="{StaticResource PhoneAccentColor}"/>
                        <scada:GaugeRange Offset="60" Color="Gold"/>
                        <scada:GaugeRange Offset="90" Color="Red"/>
                    </scada:LinearScale.Ranges>
                </scada:LinearScale>
            </Grid>-->
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <scada:RadialScale Margin="5" UseDefaultRange="False"
                                   DefaultTickColor="Gold">
                    <scada:RadialScale.MinorTickTemplate>
                        <DataTemplate>
                            <Ellipse Width="3" Height="3" Fill="White"/>
                        </DataTemplate>
                    </scada:RadialScale.MinorTickTemplate>
                    <scada:RadialScale.MajorTickTemplate>
                        <DataTemplate>
                            <Ellipse Width="6" Height="6" Fill="Red"/>
                        </DataTemplate>
                    </scada:RadialScale.MajorTickTemplate>
                </scada:RadialScale>
                <scada:LinearScale Grid.Row="1" Margin="10" MajorTickStep="20"
                                   DefaultTickColor="Goldenrod">
                    <scada:LinearScale.MinorTickTemplate>
                        <DataTemplate>
                            <Rectangle Width="2" Height="6" Fill="White"/>
                        </DataTemplate>
                    </scada:LinearScale.MinorTickTemplate>
                    <scada:LinearScale.MajorTickTemplate>
                        <DataTemplate>
                            <Path Data="M0,0 L8,0 L4,12 Z" Fill="Red"/>
                        </DataTemplate>
                    </scada:LinearScale.MajorTickTemplate>
                </scada:LinearScale>
            </Grid>
            
            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <scada:RadialScale Margin="5" DefaultRangeColor="Red"
                                   MinAngle="0" MaxAngle="270"
                                   SweepDirection="Counterclockwise"
                                   RangeThickness="3" DefaultTickColor="SteelBlue"
                                   MinorTickStep="10"/>
                
            </Grid>
            <Grid Grid.Row="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <scada:RadialScale Margin="5" RangeThickness="5"
                                   RadialType="Semicircle"
                                   DefaultTickColor="Red"
                                   MinAngle="0" MaxAngle="180"
                                   MinorTickStep="5" MajorTickStep="20" >
                    <scada:RadialScale.Ranges>
                        <scada:GaugeRange Offset="40" Color="Green"/>
                    </scada:RadialScale.Ranges>
                </scada:RadialScale>
                
            </Grid>
            <Grid Grid.Row="1" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <scada:RadialScale Margin="5" RangeThickness="5" UseRangeColorsForTicks="True"
                                   RadialType="Quadrant" MinAngle="0" MaxAngle="90"
                                   SweepDirection="Counterclockwise" DefaultRangeColor="Red">
                    <scada:RadialScale.Ranges>
                        <scada:GaugeRange Offset="30" Color="{StaticResource PhoneAccentColor}"/>
                        <scada:GaugeRange Offset="60" Color="Gold"/>
                        <scada:GaugeRange Offset="90" Color="Red"/>
                    </scada:RadialScale.Ranges>
                </scada:RadialScale>
                
            </Grid>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Romania Romania
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions