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

Custom Gauge Controls for Windows Phone 7: Part I

Rate me:
Please Sign up or sign in to vote.
4.91/5 (61 votes)
25 Feb 2013CPOL15 min read 143.3K   3.5K   78  
The first article in this series presents the implementation considerations and the way to use some custom gauges in WP7.
<phone:PhoneApplicationPage 
    x:Class="WPClientV2.Custom1"
    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">
    <phone:PhoneApplicationPage.Resources>
        <loc:RangeColorConverter x:Key="colConv">
            <loc:ColorRange Color="Red" Minimum="20" Maximum="40"/>
            <loc:ColorRange Color="Blue" Minimum="60" Maximum="80"/>
        </loc:RangeColorConverter>
        <loc:GradientConverter x:Key="conv1" EndColor="Blue" StartColor="Red" StartValue="50" EndValue="90" />
        <loc:SizeConverter x:Key="conv2" EndValue="50" StartSize="4" EndSize="15" />
        <loc:SizeConverter x:Key="sizeConv" EndValue="100" StartSize="5" EndSize="20" />
        <DataTemplate x:Key="defTemplate">
            <Rectangle Width="4" Height="{Binding Converter={StaticResource conv2}}" Fill="White"/>
        </DataTemplate>
        <loc:RangeTemplateConverter x:Key="conv3" DefaultTemplate="{StaticResource defTemplate}" >
            <loc:TemplateRange Minimum="60" Maximum="90" >
                <loc:TemplateRange.Template>
                    <DataTemplate>
                        <Path Data="M0,0 L15,0 L7,15 Z" Fill="{Binding Converter={StaticResource conv1}}"/>
                    </DataTemplate>
                </loc:TemplateRange.Template>
            </loc:TemplateRange>
            
        </loc:RangeTemplateConverter>
    </phone:PhoneApplicationPage.Resources>
        <!--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.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <scada:RadialScale MinorTickStep="5" MajorTickStep="5">
                <scada:RadialScale.MajorTickTemplate>
                    <DataTemplate>
                        <ContentPresenter Content="{Binding}" ContentTemplate="{Binding Converter={StaticResource conv3}}"/>
                    </DataTemplate>
                </scada:RadialScale.MajorTickTemplate>
            </scada:RadialScale>
            <scada:RadialScale Grid.Column="1" MajorTickStep="5">
                <scada:RadialScale.MajorTickTemplate>
                    <DataTemplate>
                        <Rectangle Width="4" Height="12" Fill="{Binding Converter={StaticResource colConv}}"/>
                    </DataTemplate>
                </scada:RadialScale.MajorTickTemplate>
            </scada:RadialScale>
            <scada:RadialScale Grid.Row="1" MajorTickStep="5">
                <scada:RadialScale.MajorTickTemplate>
                    <DataTemplate>
                        <Rectangle Width="4" Height="12" Fill="{Binding Converter={StaticResource conv1}}"/>
                    </DataTemplate>
                </scada:RadialScale.MajorTickTemplate>
            </scada:RadialScale>
            <scada:RadialScale Grid.Row="1" Grid.Column="1" MajorTickStep="5">
                <scada:RadialScale.MajorTickTemplate>
                    <DataTemplate>
                        <Rectangle Width="4" Height="{Binding Converter={StaticResource sizeConv}}" Fill="White"/>
                    </DataTemplate>
                </scada:RadialScale.MajorTickTemplate>
            </scada:RadialScale>
        </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