グリッドへのデータの挿入

C1CollectionView を実装して C1FlexGrid コントロールにデータを挿入する方法の詳細なウォークスルーについては、「データの挿入」を参照してください。

他の多くのグリッドと同様に、グリッドをアプリケーションに追加したら、IEnumerable インタフェースを実装するオブジェクトを受け取る ItemsSource プロパティを使用して、そのグリッドにデータを挿入します。ただし、通常はより高いレベルで作業するため、C1CollectionView インタフェースを実装するオブジェクトを使用します。

C1CollectionView クラスには、UWP ICollectionView にはないソート、フィルタ処理、グループ化、編集などの機能が用意されています。C1CollectionView は、使い慣れたオブジェクトモデルを提供する一方で、ICollectionView との差異を豊富なインタフェースで解消しています。

たとえば、C1FlexGrid for UWPアプリケーションに顧客オブジェクトのリストを表示するには、次のようなコードを使用します。

C#	コードのコピー
List<Customer> customers = await GetCustomerData(); var view = new C1.Xaml.C1CollectionView(customers);

次に、これを C1FlexGrid コントロールに連結します。

C#	コードのコピー
c1FlexGrid1.ItemsSource = view;

また、グリッドを顧客リストに直接連結することもできます。ただし、通常は C1CollectionView に連結することをお勧めします。これは、C1CollectionView がアプリケーションのデータ構成を数多く保持していること、および C1CollectionView はコントロール間で共有できるためです。

さまざまなコントロールを同じ C1CollectionView オブジェクトに連結した場合、コントロールは同じビューに表示されます。１つのコントロールで１つの項目を選択すると、他のコントロールでも同じ項目が自動的に選択されます。同じビューに連結されたすべてのコントロール間で、フィルタ処理、グループ化、またはソートを共有することもできます。

前述のコードを使用した場合、グリッドは、データソースをスキャンし、データソース項目のパブリックプロパティごとに列を自動的に生成します。自動的に作成される列は、コードを使用してカスタマイズできます。また、列の自動生成を完全に無効にしたり、コードまたは XAML を使用して独自の列を作成することもできます。

たとえば、次の XAML では、列の自動生成が無効に設定され、代わりに次のように列が指定されます。

XAML	コードのコピー
<FlexGrid:C1FlexGrid x:Name="flexgrid1" AllowResizing="Both" AllowDragging="Both" AllowDrop="True" AutoGenerateColumns="false" ColumnHeaderForeground="White" > <FlexGrid:C1FlexGrid.Columns> <FlexGrid:Column Binding="{Binding Active, Mode=TwoWay}" /> <FlexGrid:Column Binding="{Binding ID, Mode=TwoWay}" /> <FlexGrid:Column Binding="{Binding Name, Mode=TwoWay}" Width=""/> <FlexGrid:Column Binding="{Binding Country, Mode=TwoWay}" Width=""/> <FlexGrid:Column Binding="{Binding Hired, Mode=TwoWay}" Format="d" Width="" /> <FlexGrid:Column Binding="{Binding Father, Mode=TwoWay}" Width=""/> <FlexGrid:Column Binding="{Binding Weight, Mode=TwoWay}" Width="*"/> </FlexGrid:C1FlexGrid.Columns> </FlexGrid:C1FlexGrid>

XAML

コードのコピー

<FlexGrid:C1FlexGrid x:Name="flexgrid1" AllowResizing="Both" AllowDragging="Both" AllowDrop="True" AutoGenerateColumns="false" ColumnHeaderForeground="White" >
<FlexGrid:C1FlexGrid.Columns>
   <FlexGrid:Column Binding="{Binding Active, Mode=TwoWay}" />
   <FlexGrid:Column Binding="{Binding ID, Mode=TwoWay}" />
   <FlexGrid:Column Binding="{Binding Name, Mode=TwoWay}" Width="*"/>
   <FlexGrid:Column Binding="{Binding Country, Mode=TwoWay}" Width="*"/>
   <FlexGrid:Column Binding="{Binding Hired, Mode=TwoWay}" Format="d" Width="*" />
   <FlexGrid:Column Binding="{Binding Father, Mode=TwoWay}" Width="*"/>
   <FlexGrid:Column Binding="{Binding Weight, Mode=TwoWay}" Width="*"/>
</FlexGrid:C1FlexGrid.Columns>
</FlexGrid:C1FlexGrid>

これは、Microsoft DataGrid コントロールまたは元の C1DataGrid コントロールを使用して同じタスクを実行する際に使用する XAML に似ています。

XAML	コードのコピー
<!-- create columns on an MSDataGrid (or C1DataGrid) --> <ms:DataGrid Name="_msSongs" AutoGenerateColumns="False" > <ms:DataGrid.Columns> <ms:DataGridTextColumn Binding="{Binding Name}" Header="Title" CanUserReorder="False" Width="300" /> <ms:DataGridTextColumn Binding="{Binding Duration}" /> <ms:DataGridTextColumn Binding="{Binding Size}" /> <ms:DataGridTextColumn Binding="{Binding Rating}" Width="200" /> </ms:DataGrid.Columns> </ms:DataGrid>

XAML

コードのコピー

<!-- create columns on an MSDataGrid (or C1DataGrid) -->
 <ms:DataGrid Name="_msSongs"
   AutoGenerateColumns="False" >
   <ms:DataGrid.Columns>
     <ms:DataGridTextColumn Binding="{Binding Name}" Header="Title"
         CanUserReorder="False" Width="300" />
     <ms:DataGridTextColumn Binding="{Binding Duration}" />
     <ms:DataGridTextColumn Binding="{Binding Size}" />
     <ms:DataGridTextColumn Binding="{Binding Rating}" Width="200" />
   </ms:DataGrid.Columns>
 </ms:DataGrid>

このように、マークアップは実質的に同じです。

連結は、グリッドの Columns コレクションへのインデクサとして使用することができます。たとえば、コードを使用して "Rating" 列の幅を 300 ピクセルに設定するには、次のように記述します。

C#	コードのコピー
flexgrid1.Columns["Rating"].Width = new GridLength(300);

この構文は、C1FlexGrid ユーザーであれば使用経験があるはずです。これは、WPF バージョンのコントロールで作業する際に使用するコマンドと同じです。