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() で、新しい ContentPageMainPage として設定し、コントロールを ContentPage のに割り当てます。それには、メソッド GetGridControl() を呼び出します(前の手順「手順 2:FlexGrid コントロールの追加」で定義済み)。

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

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

      次のコードは、この手順を実行した後のクラスコンストラクタ 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.csOnLaunched メソッドに次のコードを明示的に追加する必要があります。

        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]キーを押してプロジェクトを実行します。