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

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

手順 1：新しい Content Page の追加

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

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

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

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

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

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

   XAML	コードのコピー
   <StackLayout> <c1:C1LinearGauge Value="35" Min="0" Max="100" Thickness="0.1" HeightRequest="50" WidthRequest="50" PointerColor="Blue" Direction="Right"> <c1:C1LinearGauge.Ranges> <c1:GaugeRange Min="0" Max="40" Color="Red"/> <c1:GaugeRange Min="40" Max="80" Color="Yellow"/> <c1:GaugeRange Min="80" Max="100" Color="Green"/> </c1:C1LinearGauge.Ranges> </c1:C1LinearGauge> </StackLayout>

先頭に戻る

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

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

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

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

3. コントロールによっては、多少の追加手順が必要になる場合があります。たとえば、Gauge の場合、iOS アプリおよび UWP アプリを実行するには、次の手順を実行する必要があります。
   • iOS アプリ：:
     1. ソリューションエクスプローラーで、YourAppName.iOS プロジェクト内の AppDelegate.cs をダブルクリックして開きます。
     2. 次のコードを FinishedLaunching() メソッドに追加します。

        C#	コードのコピー
        C1.Xamarin.Forms.Gauge.Platform.iOS.C1GaugeRenderer.Init();

   • UWP アプリ:
     1. ソリューションエクスプローラーで、MainPage.xaml を展開します。
     2. MainPage.xaml.cs をダブルクリックして開きます。
     3. 次のコードをクラスコンストラクタに追加します。

        C#	コードのコピー
        C1.Xamarin.Forms.Gauge.Platform.UWP.C1GaugeRenderer.Init();

4. ［F5］キーを押してプロジェクトを実行します。