Gauges for UWP
目盛りマークのカスタマイズ
タスク別ヘルプ > 目盛りマークのカスタマイズ

デフォルトでは、ゲージの目盛りマークは青灰色の四角形として描画されます。C1GaugeMark 要素の Template プロパティにカスタムテンプレートを割り当てることで、目盛りマークの外観をカスタマイズできます。以下の手順では、C1GaugeMark の外観を定義する新しい DataTemplate を作成した後、そのテンプレートを C1RadialGauge コントロールの C1GaugeMark 要素の Template プロパティに割り当てます。

次の手順に従います。

  1. XAML ビューに切り替えて、3つの <Gauge:C1GaugeMark> タグを <Gauge:C1RadialGauge> タグに追加します。次のようになります。
    XAMLマークアップ 
    コードのコピー
    <Gauge:C1RadialGauge Height="89" Margin="90,72,41,88" Name="C1RadialGauge1" Width="287">
         <Gauge:C1GaugeMark From="0" To="100" Interval="10" />
         <Gauge:C1GaugeMark Interval="5" Location="1.1" />
     </Gauge:C1RadialGauge>
  2. UserControl タグの真下に次のマークアップを追加して、テンプレートを追加します。
    XAMLマークアップ 
    コードのコピー
    <UserControl.Resources>
        <!-- ゲージマークの描画に使用されるテンプレート -->
        <DataTemplate x:Key="MyMarkTemplate">
            <Rectangle Width="4" Height="18" Fill="BlueViolet" Stroke="Black" StrokeThickness=".5"/>
        </DataTemplate>
    </UserControl.Resources>

    このテンプレートは、目盛りマークの外観を定義します。

  3. 次に、最初に追加した C1GaugeMark 要素に Template プロパティを設定して、新しいテンプレートのキーを参照します。
    XAMLマークアップ 
    コードのコピー
    <Gauge:C1GaugeMark From="0" To="100" Interval="10" Template="{StaticResource MyMarkTemplate}"/>

プロジェクトの実行と確認

C1RadialGauge コントロールに、カスタマイズされた目盛りマークが表示されます。

マークは、Location プロパティで指定された位置から内側に向かって描画されています。マークの表示に使用される四角形の Height を増やすと、目盛りマークはゲージの中心に向かって長くなります。マークを外側に向けて延ばすには、C1GaugeMark 要素の Location プロパティを変更します。また、目盛りマークの表示に使用される要素はスケールに沿って向きが変わりますが、ラベルの表示に使用される要素は向きが変わらないことがわかります(「ゲージへのラベルの追加」を参照)。

関連トピック