Рассмотрим создание стрелочного датчика на Universal Windows Platform.
Создадим новый проект и вначале добавим в него через Nuget пакет WinRTXamlToolkitControls.Gauge.UWP:
На главной странице в xaml определим такой код:
<Page x:Class="RadialGaugeApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:RadialGaugeApp" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:toolkit="using:WinRTXamlToolkit.Controls" mc:Ignorable="d"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <toolkit:Gauge x:Name="gauge" Value="35" Unit="КМ/Ч" ScaleTickBrush="Transparent" TickBrush="Transparent" ScaleWidth="30" CanDrag="True"> <toolkit:Gauge.NeedleBrush> <SolidColorBrush Color="Black" Opacity="0.6" /> </toolkit:Gauge.NeedleBrush> <toolkit:Gauge.TrailBrush> <SolidColorBrush Color="Red" Opacity="0.6" /> </toolkit:Gauge.TrailBrush> </toolkit:Gauge> </Grid> </Page>
В начал нам надо подключить пространство имен нашего элемента управления:
xmlns:toolkit="using:WinRTXamlToolkit.Controls"
Затем создаем сам элемент toolkit:Gauge, представляющий стрелочный датчик. Для его настройки используем следующие свойства:
Value: некоторое числовое значение датчика
Unit: единицы измерения. Это могут быть любые произвольные единицы измерения - минуты, часы, километры, граммы и т.д.
ScaleTickBrush: цвет внутренних делений датчика
TickBrush: цвет внешних делений датчика
TickSpacing: ширина пространства между делениями датчика
ScaleWidth: ширина внутренних делений датчика
NeedleBrush: цвет стрелки
TrailBrush: цвет пройденного пространства датчика
ValueBrush: цвет текста значения
UnitBrush: цвет текста единиц измерения
Экспериментируя с этими настройками, мы можем изменить внешнее отображение датчика:
<toolkit:Gauge x:Name="gauge" Width="200" Height="200" Value="65" Unit="КМ/Ч" TickBrush="Black" ScaleWidth="10" UnitBrush="Red" ValueBrush="Green" > <toolkit:Gauge.NeedleBrush> <SolidColorBrush Color="Black" Opacity="0.6" /> </toolkit:Gauge.NeedleBrush> <toolkit:Gauge.TrailBrush> <SolidColorBrush Color="Red" Opacity="0.6" /> </toolkit:Gauge.TrailBrush> </toolkit:Gauge>