CSWorks client framework is all about third-party UI components. As of this writing, all major Silverlight component providers have come up with their versions of the Gauge control. In this example, I will show how you can integrate Telerik and/or ComponentOne gauge controls into CSWorks Pipes and Tanks Demo application. The result will look like this:
Here are the steps to make it work.
1. Download Telerik Silverlight controls (dlls only) and ComponentOne Studio Trial Package for Silverlight.
2. Create a folder for third-party controls - C:\Program Files\CSWorks\ThirdParty.
3. Unpack downloaded Telerik archive and install ComponentOne package.
4. Copy Telerik assemblies (Telerik.Windows.Controls.Gauge.dll, Telerik.Windows.Controls.dll, Telerik.Windows.Data.dll) and ComponentOne assemblies (C1.Silverlight.dll, C1.Silverlight.Gauge.dll) to ThirdParty folder.
5. Open C:\Program Files\CSWorks\Demo\Src\PipesAndTanksDemo\PipesAndTanksDemo.Sample.csproj in Visual Studio.
6. Add all copied third party assemblies to the project reference list.
7. Open Page.xaml and add third-party namespaces to the namespace list:
<UserControl x:Class="CSWorks.Client.PipesAndTanksDemo.Page"
...
xmlns:tcontrol="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Gauge"
xmlns:tgauge="clr-namespace:Telerik.Windows.Controls.Gauges;assembly=Telerik.Windows.Controls.Gauge"
xmlns:c1gauge="clr-namespace:C1.Silverlight.Gauge;assembly=C1.Silverlight.Gauge"
...>
8. Add gauge controls to the page and bind them to LeftPumpSpeed and RightPumpSpeed data items:
<controls:TabItem Header="HMI Controls View">
<Canvas>
...
<Grid ...>
...
<Border ...>
...
</Border>
<!-- Telerik Gauge for left pump -->
<Border Grid.Row="1" Grid.Column="5" Grid.RowSpan="1" Grid.ColumnSpan="3" Background="White" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Padding="5,0,5,0" Margin="0,10,0,-10">
<StackPanel Orientation="Vertical">
<TextBlock Text="Telerik Gauge" Foreground="Black" FontSize="8" HorizontalAlignment="Center"/>
<tcontrol:RadGauge x:Name="radGauge" VerticalAlignment="Bottom" >
<tgauge:RadialGauge >
<tgauge:RadialScale Min="0" Max="200" LabelRotationMode="None" FontSize="7">
<tgauge:RadialScale.Label>
<tgauge:LabelProperties FontSize="4.5"/>
</tgauge:RadialScale.Label>
<tgauge:RangeList>
<tgauge:RadialRange Min="0" Max="100" StartWidth="0.05" EndWidth="0.05" Background="Green"/>
<tgauge:RadialRange Min="100" Max="160" StartWidth="0.05" EndWidth="0.05" Background="Orange"/>
<tgauge:RadialRange Min="160" Max="200" StartWidth="0.05" EndWidth="0.05" Background="Red" />
</tgauge:RangeList>
<tgauge:IndicatorList>
<tgauge:Needle Value="{Binding Value, Mode=OneWay, Source={StaticResource LeftPumpSpeed}}"/>
</tgauge:IndicatorList>
</tgauge:RadialScale>
</tgauge:RadialGauge>
</tcontrol:RadGauge>
<TextBlock Text="rpm" Foreground="White" FontSize="7" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,-30,0,30"/>
</StackPanel>
</Border>
<!-- ComponentOne Gauge for right pump -->
<Border Grid.Row="1" Grid.Column="9" Grid.RowSpan="1" Grid.ColumnSpan="3" Background="White" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Padding="5,0,5,0" Margin="0,10,0,-10">
<StackPanel Orientation="Vertical">
<TextBlock Text="C1 Gauge" Foreground="Black" FontSize="8" HorizontalAlignment="Center"/>
<c1gauge:C1RadialGauge Minimum="0" Maximum="200" Value="{Binding Value, Mode=OneWay, Source={StaticResource RightPumpSpeed}}">
<c1gauge:C1GaugeLabel Interval="20" Foreground="Black" Format="#" FontSize="6" FontWeight="200" Location="0.85"/>
<c1gauge:C1GaugeRange From="0" To="100" Fill="Green" Location="0.45"/>
<c1gauge:C1GaugeRange From="100" To="160" Fill="Orange" Location="0.45"/>
<c1gauge:C1GaugeRange From="160" To="200" Fill="Red" Location="0.45"/>
<c1gauge:C1GaugeMark Interval="20" />
</c1gauge:C1RadialGauge>
<TextBlock Text="rpm" Foreground="Black" FontSize="7" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,-30,0,30"/>
</StackPanel>
</Border>
<TextBlock Text="All UI elements ..." .../>
</Grid>
...
</Canvas>
</controls:TabItem>
9. Build the project and start Pipes and Tanks Demo from your start menu. Enjoy professional-looking controls in action.