Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version
Go to top

Custom Gauge Controls for Windows Phone 7: Part I

, 25 Feb 2013
The first article in this series presents the implementation considerations and the way to use some custom gauges in WP7.
GaugeLibV2-noexe.zip
GaugeLib
GaugeLib.csproj.user
Properties
Themes
GaugeLibV2.zip
Bin
Debug
GaugeLib.dll
GaugeLib.pdb
Release
GaugeLib.csproj.user
WPScadaControls.zip
WPScadaControls
WPClientV2
ApplicationIcon.png
Background.png
Bin
Debug
ApplicationIcon.png
Background.png
WPClientV2.dll
WPClientV2.xap
WPScadaControlsV2.dll
Release
obj
Debug
TempPE
Properties
SplashScreenImage.jpg
WPClientV2.csproj.user
WPScadaControlsV2
Bin
Debug
WPScadaControlsV2.dll
Release
obj
Debug
TempPE
Themes
Properties
ScaleDiagram.cd
Themes
WPScadaControlsV2.csproj.user
<phone:PhoneApplicationPage 
    x:Class="WPClientV2.Custom2"
    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="64" EndValue="90" />
        <loc:SizeConverter x:Key="conv2" EndValue="50" StartSize="3" EndSize="15" />
        <DataTemplate x:Key="defTemplate">
            <Rectangle Width="2" 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 L10,0 L5,10 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="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <scada:RadialScale MajorTickStep="25" >
                <scada:NeedleIndicator Value="90" 
                                       Background="{Binding RelativeSource={RelativeSource Mode=Self},Path=Value,Converter={StaticResource conv1}}"/>
            </scada:RadialScale>
            <scada:RadialScale MajorTickStep="25" Grid.Column="1" >
                <scada:NeedleIndicator Value="80" 
                                       Background="{Binding RelativeSource={RelativeSource Mode=Self},Path=Value,Converter={StaticResource conv1}}"/>
            </scada:RadialScale>
            <scada:RadialScale MajorTickStep="25" Grid.Column="2">
                <scada:NeedleIndicator Value="70" 
                                       Background="{Binding RelativeSource={RelativeSource Mode=Self},Path=Value,Converter={StaticResource conv1}}"/>
            </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)

Share

About the Author

Florin Badea
Software Developer
Romania Romania
No Biography provided

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 25 Feb 2013
Article Copyright 2011 by Florin Badea
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid