Xuni 製品ヘルプ
LinearGauge クイックスタート
Xuni コントロール > Gauge > クイックスタート：追加と設定 > LinearGauge クイックスタート

このセクションでは、移植可能なアプリまたは共有アプリに LinearGauge コントロールを追加し、そこにデータを追加する方法について説明します。C# または XAML で Xuni コンポーネントを追加する方法については、「C# による Xuni コンポーネントの追加」または「XAML による Xuni コンポーネントの追加」を参照してください。

このトピックは 2 つの手順で構成されます。

次の図は、上記の手順を実行した後の LinearGauge を示しています。

手順 1：LinearGauge コントロールの追加

Value プロパティは、ゲージの値を示します。1 つのゲージに複数の範囲を追加し、範囲の Min および Max プロパティで範囲の位置を定義します。ゲージの IsReadOnly プロパティを false に設定すると、ユーザーはゲージをタップして値を編集できます。

メモ：XuniLinearGauge.Origin プロパティを使用して、LinearGauge ポインタの原点を変更できます。デフォルトでは、原点は 0 に設定されています。

C# または XAML で LinearGauge コントロールを初期化するには、次の手順を実行します。

C# のコード

  1. 新しいクラス（QuickStart.cs など）を Portable または Shared プロジェクトに追加し、以下のように Xuni Gauge および Xamarin 参照を含めます。
    C#
    コードのコピー 
    using Xuni.Forms.Gauge;
using Xamarin.Forms;
  2. LinearGauge コントロールを新しいメソッド GetLinearGauge() 内でインスタンス化します。
    C#
    コードのコピー 
    public static XuniLinearGauge GetLinearGauge()
{
    // 直線型ゲージのインスタンスを作成し、プロパティを設定します。
    XuniLinearGauge gauge = new XuniLinearGauge();
    gauge.HeightRequest = 50;
    gauge.WidthRequest = 50;
    gauge.Value = 35;
    gauge.Thickness = 0.5;
    gauge.Min = 0;
    gauge.Max = 100;
    gauge.Direction = LinearGaugeDirection.Right;
    gauge.PointerColor = Color.Blue;

    //範囲を作成します。
    GaugeRange low = new GaugeRange();
    GaugeRange med = new GaugeRange();
    GaugeRange high = new GaugeRange();

    //範囲をカスタマイズします。
    low.Color = Color.Red;
    low.Min = 0;
    low.Max = 40;
    med.Color = Color.Yellow;
    med.Min = 40;
    med.Max = 80;
    high.Color = Color.Green;
    high.Min = 80;
    high.Max = 100;

    //範囲を直線型ゲージに追加します。
    gauge.Ranges.Add(low);
    gauge.Ranges.Add(med);
    gauge.Ranges.Add(high);

    return gauge;
}

XAML のコード

  1. 新しい Forms XAML ページ（QuickStart.xaml など）を Portable または Shared プロジェクトに追加し、<ContentPage> タグを変更して、以下のように Xuni 参照を追加します。
    XAML
    コードのコピー 
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Appl.QuickStart"
xmlns:xuni="clr-namespace:Xuni.Forms.Gauge;assembly=Xuni.Forms.Gauge">
  2. LinearGauge コントロールを初期化します。それには、コントロールの <ContentPage></ContentPage> タグ間の <StackLayout></StackLayout> タグ内で、次のようにマークアップを追加します。
    XAML
    コードのコピー 
     <xuni:XuniLinearGauge  Value="35" Min="0" Max="100" Thickness="0.5"
   HeightRequest="50" WidthRequest="50" PointerColor="Blue" Direction="Right">
    <xuni:XuniLinearGauge.Ranges>
      <xuni:GaugeRange Min="0" Max="40" Color="Red"/>
      <xuni:GaugeRange Min="40" Max="80" Color="Yellow"/>
      <xuni:GaugeRange Min="80" Max="100" Color="Green"/>
    </xuni:XuniLinearGauge.Ranges>
  </xuni:XuniLinearGauge>
先頭に戻る

手順 2：プロジェクトの実行

  1. ソリューションエクスプローラーで、App.cs をダブルクリックして開きます。
  2. LinearGauge コントロールを表示するには、次の手順を実行します。
    • C# クラスを返すには、次の手順を実行します。 クラスコンストラクタ App() で、新しい ContentPage を MainPage として設定し、コントロールを ContentPage の Content に割り当てます。それには、メソッド GetLinearGauge() （前の手順「手順 1：LinearGauge コントロールの追加」で定義済み）を呼び出します。

      次のコードは、上記の手順を実行した後のクラスコンストラクタ App() を示します。

      C#
      コードのコピー 
      public App()
{
    // アプリケーションのルートページ
    MainPage = new ContentPage
    {
        Content = QuickStart.GetLinearGauge()
    };
}
    • Forms XAML ページを返すには、次の手順を実行します。 クラスコンストラクタ App() で、Forms XAML ページ QuickStart を MainPage として設定します。

      次のコードは、この手順を実行した後のクラスコンストラクタ App() を示します。

      C#
      コードのコピー 
      public App()
{
    // アプリケーションのルートページ
    MainPage = new QuickStart();
}
  3. iOS および Windows Phone アプリを実行するには、いくつかの追加手順が必要です。
    • iOS アプリ：:
      1. ソリューションエクスプローラーで、YourAppName.iOS プロジェクト内の AppDelegate.cs をダブルクリックして開きます。
      2. 次のコードを FinishedLaunching() メソッドに追加します。
        C#
        コードのコピー 
        Xuni.Forms.Gauge.Platform.iOS.Forms.Init();
    • Windows Phone アプリ:
      1. ソリューションエクスプローラーで、MainPage.xml を展開します。
      2. MainPage.xml.cs をダブルクリックして開きます。
      3. 次のコードをクラスコンストラクタに追加します。
        C#
        コードのコピー 
        Xuni.Forms.Gauge.Platform.WinPhone.GaugeRenderer.Init();
  4. F5 キーを押してプロジェクトを実行します。

先頭に戻る
関連トピック
Gauge のタイプ
Xuni のインストール

 

 

Copyright © GrapeCity inc. All rights reserved.