Progress Wheel

XAML

<wheel:ProgressWheel  
   RotationSpeed="{Binding  RotationSpeed}" 
   Color="{Binding Path=Color}" 
   StylePreset="{Binding Path=Preset,Mode=TwoWay}" 
   Active="{Binding Path=Active}"
   OuterCircleRadius="{Binding Path=OuterCircleRadius,Mode=TwoWay}" 
   InnerCircleRadius="{Binding Path=InnerCircleRadius,Mode=TwoWay}"
   NumberSpokes="{Binding Path=NumberOfSpokes,Mode=TwoWay}"
   SpokeThickness="{Binding Path=SpokeWidth,Mode=TwoWay}"
  Width="100" Height="100"></wheel:ProgressWheel>


This XAML assumes a ViewModel is used for the binding. This is used at design time.

 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 mc:Ignorable="d" 
 xmlns:vm="clr-namespace:ProgressWheelDemo.ViewModel"
 d:DataContext="{d:DesignInstance vm:MainViewModel,IsDesignTimeCreatable=True}"


The ViewModel source can be found in the ProgressWheelDemp project in the source file MainViewModel

Analogue Gauge

Basic Settings

 <controls:AnalogGauge 
            NeedleRadius="95" 
            MaxValue="100"
            Value="50"
            NeedleBase="Black" 
            NeedleBaseRadius="10" 
            BezelThickness="5" 
            Center="150,150"
            Height="200" 
            Width="300" 
            Sweep="120" 
            StartAngle="150"
            ScaleBackground="White"
            BezelCornerRadius="20" 
            BezelBackground="Black"
            BaseBackground="Black">



NeedleRadius - The length of the radius
MaxValue - The scale max value
Value - The position ( angle) of the Needle
NeedleBase - The brush for the needle base
NeedleBaseRadius - The radius of the needle base
BezelThickness - The width of the Border ( Bezel)
Center - The point around which the other elements are located
StartAngle - The angle (0-360) where the scale starts)
Sweep - The angle that defines the other end of the scale from StartAngle
ScaleBackground - The Scale background brush
BezelCornerRadius - The amount of curvature on the Bezel
BezelBackground - The brush defining the bezel
BaseBackground - The gauge background brush

Ranges

For each range sector

Min - start of the sector as percentage of full scale
Max - end of the sector as percentage of full scale
Stroke - The brush to color the range sector
Thickness - The size of the sector

<controls:AnalogGauge.RangeDefinitions>
                <controls:RangeDefinition 
                      Min="0" 
                     Max="0.5" 
                     Stroke="Green" 
                     Thickness="70">
                </controls:RangeDefinition>
                <controls:RangeDefinition 
                     Min="0.5" 
                     Max="0.75" 
                     Stroke="Orange" 
                     Thickness="70">
                </controls:RangeDefinition>
</controls:AnalogGauge.RangeDefinitions>

Captions

For each caption
X,Y - The Top/ Left of the Text
Foreground - The Text color
Size - The Text size

 <controls:AnalogGauge.Captions>
    <controls:Caption Size="20" X="115" Y="170"  Text="Current" Foreground="Black"></controls:Caption>
    <controls:Caption Size="20" X="132" Y="80"  Text="mA" Foreground="White"></controls:Caption>
</controls:AnalogGauge.Captions>

Specifying the scale

<controls:AnalogGauge.Scale>
                <controls:Scale 
                     MajorTickSize="9" 
                     TextRadius="120" 
                     Radius="141" 
                     Stroke="Black" 
                     StrokeThickness="2" 
                     MajorTick="2" 
                     MinorTick="1"/>
            </controls:AnalogGauge.Scale>


MajorTickSize - The length of the major tick indicators
TextRadius - The radius at which the scale text is displayed
Radius- The radius at which the scale base line is drawn
Stroke - The brush for the scale lines
StrokeThickness - The thickness of the stroke lines
MajorTick - The interval between Major ticks
MinorTick - Theinterval between the minor ticks

Last edited Jan 13, 2012 at 5:16 PM by msrushton, version 6

Comments

No comments yet.