Xamarin.Forms のドキュメント
クイックスタート：FlexGrid へのデータの追加
コントロール > FlexGrid > クイックスタート：FlexGrid へのデータの追加

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

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

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

手順 1：FlexGrid のデータソースの作成

次のクラスは、FlexGrid コントロールのデータソースとして機能します。

C#
コードのコピー 
public class Customer
    {
        int _id, _countryID;
        string _first, _last;
        bool _active;
        double _weight;
        DateTime _hired;
        static Random _rnd = new Random();
        static string[] _firstNames = "Gil|Oprah|Xavier|Herb|Charlie|Larry|Steve".Split('|');
        static string[] _lastNames = "Orsted|Frommer|Jammers|Krause|Neiman".Split('|');
        static string[] _countries = "ブラジル|コンゴ|エジプト|アメリカ|日本|タイ".Split('|');

        public Customer()
            : this(_rnd.Next(10000))
        {
        }
        public Customer(int id)
        {
            ID = id;
            First = GetString(_firstNames);
            Last = GetString(_lastNames);
            CountryID = _rnd.Next() % _countries.Length;
            Active = _rnd.NextDouble() >= .5;
            Hired = DateTime.Today.AddDays(-_rnd.Next(1, 365));
            Weight = 50 + _rnd.NextDouble() * 50;
        }
        public int ID
        {
            get { return _id; }
            set { _id = value;}
        }
        public string Name
        {
            get { return string.Format("{0} {1}", First, Last); }
        }
        public string Country
        {
            get { return _countries[_countryID]; }
        }
        public int CountryID
        {
            get { return _countryID; }
            set {_countryID = value; }
        }
        public bool Active
        {
            get { return _active; }
            set { _active = value;}
        }
        public string First
        {
            get { return _first; }
            set {_first = value; }
        }
        public string Last
        {
            get { return _last; }
            set {_last = value; }
        }
        public DateTime Hired
        {
            get { return _hired; }
            set { _hired = value;}
        }
        public double Weight
        {
            get { return _weight; }
            set {_weight = value; }
        }
        static string GetString(string[] arr)
        {
            return arr[_rnd.Next(arr.Length)];
        }
        static string GetName()
        {
            return string.Format("{0} {1}", GetString(_firstNames), GetString(_lastNames));
        }
        // 静的な一覧を指定します
        public static ObservableCollection<Customer> GetCustomerList(int count)
        {
            var list = new ObservableCollection<Customer>();
            for (int i = 0; i < count; i++)
            {
                list.Add(new Customer(i));
            }
            return list;
        }
        // 静的な値のメンバーを指定します
        public static string[] GetCountries() { return _countries; }
        public static string[] GetFirstNames() { return _firstNames; }
        public static string[] GetLastNames() { return _lastNames; }
    }

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

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

C# のコード

  1. 新しいクラス（たとえば QuickStart.cs）をプロジェクトに追加し、以下のように参照を含めます。
    C#
    コードのコピー 
    using Xamarin.Forms;
using C1.Xamarin.Forms.Grid;
  2. FlexGrid コントロールを新しいメソッド GetGridControl() でインスタンス化します。
    C#
    コードのコピー 
     public static FlexGrid GetGridControl()
        {
            // コントロールのインスタンスを作成し、そのプロパティを設定します
            FlexGrid grid = new FlexGrid();                      
            grid.ItemsSource = Customer.GetCustomerList(10);
            return grid;
        }

XAML のコード

  1. 次に示すように、プロジェクトに新しい Content Page（例：QuickStart.xaml）を追加し、<ContentPage> タグを変更して参照を追加します。
    XAML
    コードのコピー 
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Appl.QuickStart"
xmlns:c1="clr-namespace:C1.Xamarin.Forms.Grid;assembly=C1.Xamarin.Forms.Grid">
  2. FlexGrid コントロールを初期化します。それには、<ContentPage></ContentPage> タグ間の <StackLayout></StackLayout> タグ内で、次のようにマークアップを追加します。
    XAML
    コードのコピー 
    <StackLayout>   
    <Grid VerticalOptions="FillAndExpand">
      <c1:C1FlexGrid x:Name="grid"/>
    </Grid>
</StackLayout>
  3. ソリューションエクスプローラーで、QuickStart.xaml ノードを展開し、QuickStart.xaml.cs を開いて、C# コードビハインドを開きます。
  4. QuickStart() クラスコンストラクタで、FlexGrid の BindingContext を設定します。

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

    C#
    コードのコピー 
    public QuickStart()
{
    InitializeComponent();
    grid.BindingContext = new Customer();
}

 

手順 3：アプリケーションの実行

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

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

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

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

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

      4. Release モードで UWP アプリケーションをコンパイルする場合は、アプリケーションに正しいアセンブリを含めるために、App.xaml.cs の OnLaunched メソッドに次のコードを明示的に追加する必要があります。

        C#
        コードのコピー 
        var assembliesToInclude = new List<Assembly>();
assembliesToInclude.Add(typeof(C1.Xamarin.Forms.Grid.Platform.UWP.FlexGridRenderer)
.GetTypeInfo().Assembly);
assembliesToInclude.Add(typeof(C1.UWP.Grid.FlexGrid).GetTypeInfo().Assembly);
Xamarin.Forms.Forms.Init(e, assembliesToInclude);
  4. ［F5］キーを押してプロジェクトを実行します。

 

 

Copyright © GrapeCity, Inc. All rights reserved.