Дополнительные элементы управления

Стрелочный датчик

Рассмотрим создание стрелочного датчика на 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>