[Xuni:FlexGrid] ItemSourceに設定したデータソースを操作する方法 (Xamarin.Forms)
対象製品
Xuni
詳細
FlexGridにデータを表示する場合、データソースをItemSoureceプロパティに設定します。
このデータソースをコードで操作する場合は、FlexGridに設定されたデータを操作する以外に、データソースをCollectionViewオブジェクトとして取得して操作する方法があります。
FlexGridのItemSourceプロパティに設定したデータソースを、CollectionViewに設定するとCollectionViewで操作したデータがFlexGridにも反映できます。
以下の例では、サンプルデータをFlexGridに表示した後、ボタンを押下した際にデータが入れ替わります。
以下のサンプルコードは、製品に付属するサンプルプロジェクト「FlexGrid101」を元に作成しています。
サンプルコード
C#
画面を定義したXAMLコード
XAML
CollectionViewはデータ操作コンポーネントです。ソート、フィルタ処理、グループ化などの処理を高速に実行することができます。
Xuni > CollectionView
このデータソースをコードで操作する場合は、FlexGridに設定されたデータを操作する以外に、データソースをCollectionViewオブジェクトとして取得して操作する方法があります。
FlexGridのItemSourceプロパティに設定したデータソースを、CollectionViewに設定するとCollectionViewで操作したデータがFlexGridにも反映できます。
以下の例では、サンプルデータをFlexGridに表示した後、ボタンを押下した際にデータが入れ替わります。
以下のサンプルコードは、製品に付属するサンプルプロジェクト「FlexGrid101」を元に作成しています。
サンプルコード
C#
using System; using Xamarin.Forms; using Xuni.CollectionView; namespace Xuni_FlexGrid { public partial class Page1 : ContentPage { // CollectionView を定義 XuniCollectionViewcv = new XuniCollectionView (); public Page1() { InitializeComponent(); // グリッドのデータソースに設定 var data = Customer.GetCustomerList(10); grid.ItemsSource = data; // データソースをCollectionViewのオブジェクトに設定 cv = new XuniCollectionView (data); // ボタンに処理を設定 btn1.Clicked += btn1_Clicked; } // ボタンの処理 // CollectionViewの特定列のデータをすべて更新 public void btn1_Clicked(object sender, EventArgs e) { var idx = 0; // コレクションの先頭に移動 cv.MoveCurrentToFirst(); // コレクションに含まれるデータ件数分の処理を繰り返す while (idx < cv.Count) // コレクションの指定位置に移動 cv.MoveCurrentToPosition(idx); // 現在位置のデータ項目を変更 // 変更対象は FirstName cv.CurrentItem.FirstName = "変更" + idx.ToString(); idx += 1; } } } }
画面を定義したXAMLコード
XAML
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Xuni_FlexGrid.Page1" xmlns:xuni="clr-namespace:Xuni.Forms.FlexGrid;assembly=Xuni.Forms.FlexGrid"> <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" Android="0" WinPhone="0" /> </ContentPage.Padding> <Grid> <Grid.RowDefinitions> <RowDefinition Height="30" /> </Grid.RowDefinitions> <Button x:Name="btn1" Text="データ更新" Grid.Row="0" /> <xuni:FlexGrid x:Name="grid" Grid.Row="1" AutoGenerateColumns="False" SelectionMode="Row"> <xuni:FlexGrid.Columns> <xuni:GridColumn Binding="Id" /> <xuni:GridColumn Binding="FirstName" /> <xuni:GridColumn Binding="LastName" /> <xuni:GridColumn Binding="OrderTotal" Format="n2" /> </xuni:FlexGrid.Columns> </xuni:FlexGrid> </Grid> </ContentPage>
CollectionViewはデータ操作コンポーネントです。ソート、フィルタ処理、グループ化などの処理を高速に実行することができます。
Xuni > CollectionView