この手順では、プロジェクトに C1RadialGauge、C1LinearGauge、および C1Knob コントロールを追加して、アプリケーションを設定します。
これらのゲージコントロールをアプリケーションに追加するには、次の手順に従います。
<StackPanel x:Name="sp2">
タグと </StackPanel>
タグの間に置きます。x:Name="c1kb1" を <Gauge:C1Knob>
タグに追加して、コントロールに名前を付けます。次のようになります。マークアップ |
コードのコピー
|
---|---|
<Gauge:C1Knob x:Name="c1kb1"> |
それに一意の識別子を付けると、コードでそのコントロールにアクセスできるようになります。
<Gauge:C1Knob>
タグに Width="150"
を追加して、コントロールをサイズ変更します。次のようになります。マークアップ |
コードのコピー
|
---|---|
<Gauge:C1Knob x:Name="c1kb1" Width="150"> |
アプリケーションを実行すると、このコントロールは少し小さく表示されます。
<Gauge:C1Knob>
タグに Margin="5"
を追加して、コントロールにマージンを追加します。次のようになります。マークアップ |
コードのコピー
|
---|---|
<Gauge:C1Knob x:Name="c1kb1" Width="150" Margin="5"> |
これで、C1Knob とページに追加する他のコントロールの間にスペースが追加されます。
Minimum="0" Maximum="100"
を <Gauge:C1Knob>
タグに追加して、最小値と最大値を設定します。次のようになります。マークアップ |
コードのコピー
|
---|---|
<Gauge:C1Knob x:Name="c1kb1" Width="150" Margin="5" Minimum="0" Maximum="100"> |
これは、ノブで設定できる最高値と最低値を決定します。
</Gauge:C1Knob>
タグと </StackPanel>
タグの間に置きます。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 の名前が指定され、コントロールがサイズ変更され、コントロールの最小値と最大値が設定されます。
<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" /> |
これで、ゲージの範囲と目盛りマークの外観が設定されます。
</StackPanel>
タグの間に置きます。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 の名前が指定され、コントロールがサイズ変更され、最小値と最大値が設定されます。イベントハンドラのコードは、この後の手順で追加します。
<Slider />
タグと </StackPanel>
タグの間に置きます。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 コントロールの名前が指定され、コントロールがサイズ変更され、最小値と最大値が設定されます。
<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 コントロールをアプリケーションに追加し、これらのコントロールをカスタマイズしました。これで、アプリケーションのユーザーインタフェースを正しく設定できました。次の手順では、コードをアプリケーションに追加します。