この手順では、プロジェクトに C1RadialGauge、C1LinearGauge、および C1Knob コントロールを追加して、アプリケーションを設定します。

これらのゲージコントロールをアプリケーションに追加するには、次の手順に従います。

1. プロジェクトの XAML ウィンドウで、カーソルを <StackPanel x:Name="sp2"> タグと </StackPanel> タグの間に置きます。
2. ツールボックスに移動し、［C1Knob］アイコンをダブルクリックして、StackPanel にコントロールを追加します。これで、参照と XAML 名前空間が自動的に追加されます。
3. x:Name="c1kb1" を <Gauge:C1Knob> タグに追加して、コントロールに名前を付けます。次のようになります。
   

   マークアップ	コードのコピー
   <Gauge:C1Knob x:Name="c1kb1">

   それに一意の識別子を付けると、コードでそのコントロールにアクセスできるようになります。

4. <Gauge:C1Knob> タグに Width="150" を追加して、コントロールをサイズ変更します。次のようになります。
   

   マークアップ	コードのコピー
   <Gauge:C1Knob x:Name="c1kb1" Width="150">

   アプリケーションを実行すると、このコントロールは少し小さく表示されます。

5. <Gauge:C1Knob> タグに Margin="5" を追加して、コントロールにマージンを追加します。次のようになります。
   

   マークアップ	コードのコピー
   <Gauge:C1Knob x:Name="c1kb1" Width="150" Margin="5">

   これで、C1Knob とページに追加する他のコントロールの間にスペースが追加されます。

6. Minimum="0" Maximum="100" を <Gauge:C1Knob> タグに追加して、最小値と最大値を設定します。次のようになります。
   

   マークアップ	コードのコピー
   <Gauge:C1Knob x:Name="c1kb1" Width="150" Margin="5" Minimum="0" Maximum="100">

   これは、ノブで設定できる最高値と最低値を決定します。

7. プロジェクトの XAML ウィンドウで、カーソルを </Gauge:C1Knob> タグと </StackPanel> タグの間に置きます。
8. ツールボックスに移動し、［C1RadialGauge］アイコンをダブルクリックして、StackPanel にコントロールを追加します。
9. x:Name="c1rg1" Margin="5" Minimum="0" Maximum="100" Height="300" を <Gauge:C1RadialGauge> タグに追加して、コントロールをカスタマイズします。次のようになります。
   

   マークアップ	コードのコピー
   <Gauge:C1RadialGauge x:Name="c1rg1" Margin="5" Minimum="0" Maximum="100" Height="300" Value="100" StartAngle="0" SweepAngle="300"></Gauge:C1RadialGauge>

   これで、C1RadialGauge の名前が指定され、コントロールがサイズ変更され、コントロールの最小値と最大値が設定されます。

10. <Gauge:C1RadialGauge> タグと </Gauge:C1RadialGauge> タグの間に次のマークアップを追加して、ゲージの外観を変更します。
    

    マークアップ	コードのコピー
    <Gauge:C1GaugeRange To="40" Location="0.8" Fill="#088080" Width="0.2" Opacity="0.6" /> <Gauge:C1GaugeRange From="75" Fill="#088080" Location="0.9" EndWidth="0.2" Opacity="0.3" /> <Gauge:C1GaugeMark Interval="20" /> <Gauge:C1GaugeMark Interval="10" /> <Gauge:C1GaugeMark Interval="1" /> <Gauge:C1GaugeLabel Interval="20" Alignment="In" AlignmentOffset="10" FontSize="16" />

    これで、ゲージの範囲と目盛りマークの外観が設定されます。

11. プロジェクトの XAML ウィンドウで、カーソルを最初と２番目の </StackPanel> タグの間に置きます。
12. ツールボックスに移動し、［Slider］アイコンをダブルクリックして、StackPanel に標準コントロールを追加します。
13. x:Name="s1" Height="400" Minimum="0" Maximum="100" ValueChanged="s1_ValueChanged_1" Orientation="Vertical" を <Slider> タグに追加して、コントロールをカスタマイズします。次のようになります。

    マークアップ	コードのコピー
    <Slider x:Name="s1" Height="400" Minimum="0" Maximum="100" ValueChanged="s1_ValueChanged_1" Orientation="Vertical"/>

    これで、Slider の名前が指定され、コントロールがサイズ変更され、最小値と最大値が設定されます。イベントハンドラのコードは、この後の手順で追加します。

14. プロジェクトの XAML ウィンドウで、カーソルを <Slider /> タグと </StackPanel> タグの間に置きます。
15. ツールボックスに移動し、［C1LinearGauge］アイコンをダブルクリックして、StackPanel にコントロールを追加します。
16. x:Name="c1lg1" Minimum="0" Maximum="100" Width="120" Height="500" を <Gauge:C1LinearGauge> タグに追加して、コントロールをカスタマイズします。次のようになります。

    マークアップ	コードのコピー
    <Gauge:C1LinearGauge x:Name="c1lg1" Minimum="0" Maximum="100"  Width="120" Height="500" Orientation="Vertical" XAxisLocation="0.05" XAxisLength="0.9" YAxisLocation="0.2"></Gauge:C1LinearGauge>

    これで、C1LinearGauge コントロールの名前が指定され、コントロールがサイズ変更され、最小値と最大値が設定されます。

17. <Gauge:C1LinearGauge> タグと </Gauge:C1LinearGauge> タグの間に次のマークアップを追加して、ゲージの外観を変更します。

    マークアップ

    コードのコピー

    <Gauge:C1GaugeMark Interval="20" /> <Gauge:C1GaugeMark Interval="10" /> <Gauge:C1GaugeMark Interval="2" /> <Gauge:C1GaugeLabel Interval="20" Format="n0" Alignment="Out" AlignmentOffset="30" FontSize="16"/> <Gauge:C1GaugeRange To="40" Location="0" Fill="#088080" Width="0.2" Opacity="0.2"/> <Gauge:C1GaugeRange From="40" To="80" Location="0" Fill="#088080" Width="0.2" Opacity="0.4"/> <Gauge:C1GaugeRange From="80" To="100" Location="0" Fill="#088080" Width="0.2" Opacity="0.6"/>

    これで、ゲージの範囲と目盛りマークの外観が設定されます。

いくつかの Gauges for UWP コントロールをアプリケーションに追加し、これらのコントロールをカスタマイズしました。これで、アプリケーションのユーザーインタフェースを正しく設定できました。次の手順では、コードをアプリケーションに追加します。