このトピックでは、XAML を使用してアプリに Xuni コントロールを追加する方法について説明します。これには、3 つの手順を実行します。

• 手順 1：新しい Forms XAML ページの追加
• 手順 2：コントロールの追加
• 手順 3：プログラムの実行

手順 1：新しい Forms XAML ページの追加

1. ソリューションエクスプローラーで、プロジェクト YourAppName（Portable または Shared）を右クリックします。
2. ［追加］→［新規］を選択します。［新しい項目の追加］ダイアログボックスが表示されます。
3. インストール済みテンプレートから、［C#］→［Forms XAML ページ］を選択します。
4. XAML ページの名前（例：Page1.xaml）を入力し、［OK］をクリックします。プロジェクトに新しい XAML ページが追加されます。

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

1. ソリューションエクスプローラーで、Page1.xaml をダブルクリックして開きます。
2. 次に示すように、<ContentPage> タグの要素に、Xuni参照を追加します。以下はGaugeの場合の例です。

   XAML	コードのコピー
   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="YourAppName.Page1" xmlns:xuni="clr-namespace:Xuni.Forms.Gauge;assembly=Xuni.Forms.Gauge" >

3. <ContentPage></ContentPage> タグ間の <StackLayout></StackLayout> タグ内で、コントロールを初期化します。

   次のコードは、Gauge コントロールを初期化する方法を示します。

   XAML

   コードのコピー

   <StackLayout> <xuni:XuniLinearGauge Value="35" Min="0" Max="100" Thickness="0.1" 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> </StackLayout>

先頭に戻る

手順 3：プログラムの実行

1. ソリューションエクスプローラーで、App.cs をダブルクリックして開きます。
2. クラスコンストラクタ App() で、Forms XAML ページ Page1 を MainPage として設定します。

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

   C#	コードのコピー
   public App() { // アプリケーションのルートページ MainPage = new Page1(); }

3. コントロールによっては、多少の追加手順が必要になる場合があります。たとえば、Gauge の場合、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］キーを押してプロジェクトを実行します。

Copyright © GrapeCity inc. All rights reserved.