FlexGrid for UWP
データの挿入
チュートリアル > グリッドへのデータの挿入 > データの挿入
全て展開
すべて折りたたむ

このヘルプでは、別のコードファイルにあるデータを連結することでグリッドにデータを挿入する方法について説明します。また、C1FlexGrid コントロールのフィルタ処理およびグループ化機能についても具体的に説明します。

次の手順に従います。

  1. MainPage.xaml ページをまだ開いていない場合は開きます。<Grid> タグと </Grid> タグの間をクリックし、次の XAML マークアップを挿入して、フィルタ処理とグループ化を制御する通常の ComboBox および TextBox コントロールを設定します。

    XAML でマークアップを書く場合

    XAML
    コードのコピー 
    <Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<Border BorderThickness="0,1,0,1" BorderBrush="White" Margin="5">
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style
TargetType="TextBlock">

<Setter Property="FontSize" Value="14"/>

<Setter Property="Margin" Value="10,0,6,0"/>

<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
</StackPanel.Resources>

<TextBlock Text="Group on:"
HorizontalAlignment="Right"/>
<ComboBox Name="groupComboBox"
Grid.Column="1" SelectionChanged="groupComboBox_SelectionChanged_1"

Height="30" Width="110" Margin="5"/>
<TextBlock Text="Filter on:" Grid.Row="1"
HorizontalAlignment="Right"/>
<ComboBox Name="filterComboBox" Grid.Row="1"
Grid.Column="1" SelectionChanged="filterComboBox_SelectionChanged_1"

Height="30" Width="110" Margin="5"/>
<TextBox Name="filterTextBox" Grid.Row="1"
Grid.Column="2" TextChanged="filterTextBox_TextChanged_1" Height="25"

Width="110" Margin="5"/>
</StackPanel>
</Border>
  2. Visual Studio のツールボックスでコントロールをダブルクリックするか、次の XAML マークアップをアプリケーションに追加して、C1FlexGrid コントロールをアプリケーションに追加します。
    XAML
    コードのコピー 
    <FlexGrid:C1FlexGrid x:Name="flexgrid1" AllowResizing="Both" AllowDragging="Both"
AllowDrop="True" ColumnHeaderForeground="White" />
  3. <FlexGrid:C1FlexGrid> タグと </FlexGrid: C1FlexGrid> タグの間に次の XAML マークアップを追加して、FlexGrid.Columns を設定し、マークアップで連結を作成します。
    XAML
    コードのコピー 
    <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>
  4. アプリケーション名を右クリックし、リストから［追加］→［新しい項目］を選択します。［新規ファイルの追加］ダイアログボックスで［コードファイル］を選択し、Customer.cs と名前を付けます。新しいコードファイルがすぐに表示されます。
  5. Customer.cs ファイルで次の名前空間とコードを追加して、グリッドに挿入するデータを作成します。

    C# でコードを書く場合

    C#
    コードのコピー 
    using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Reflection;

namespace FlexGridSamples
{
public class Customer :
INotifyPropertyChanged,
IEditableObject
{
// ** フィールド
int _id, _countryID;
string _first, _last;
string _father, _brother, _cousin;
bool _active;
DateTime _hired;
double _weight;

// ** データジェネレータ
static Random _rnd = new Random();
static string[] _firstNames =
"Andy|Ben|Charlie|Dan|Ed|Fred|Gil|Herb|Jack|Karl|Larry|Mark|Noah|
Oprah|Paul|Quince|Rich|Steve|Ted|Ulrich|Vic|Xavier|Zeb".Split('|');
static string[] _lastNames =
"Ambers|Bishop|Cole|Danson|Evers|Frommer|Griswold|Heath|Jammers|
Krause|Lehman|Myers|Neiman|Orsted|Paulson|Quaid|Richards|Stevens|
        Trask|Ulam".Split('|');

static string[] _countries = "China|India|United
States|Indonesia|Brazil|Pakistan|Bangladesh|Nigeria|Russia|Japan|
Mexico|Philippines|Vietnam|Germany|Ethiopia|Egypt|Iran|Turkey|
        Congo|France|Thailand|United
Kingdom|Italy|Myanmar".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;
_father = string.Format("{0} {1}", GetString(_firstNames),
Last);
_brother = string.Format("{0} {1}", GetString(_firstNames),
Last);
_cousin = GetName();
}

// ** オブジェクトモデル
public int ID
{
get { return _id; }
set
{
if (value != _id)
{
_id = value;

RaisePropertyChanged("ID");
}
}
}
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
{
if (value != _countryID && value
> -1 && value < _countries.Length)
{
_countryID =
value;


// OnPropertyChanged を Null パラメータで呼び出します。このプロパティを設定すると、
// "CountryID"
の値および "Country" の値が変更されるためです。

RaisePropertyChanged("");
}
}
}
public bool Active
{
get { return _active; }
set
{
if (value != _active)
{
_active =
value;

RaisePropertyChanged("Active");
}
}
}
public string First
{
get { return _first; }
set
{
if (value != _first)
{
_first =
value;


// OnPropertyChanged を Null パラメータで呼び出します。このプロパティを設定すると、
// "First" の値および
"Name" の値が変更されるためです。

RaisePropertyChanged("");
}
}
}
public string Last
{
get { return _last; }
set
{
if (value != _last)
{
_last = value;


// OnPropertyChanged を Null パラメータで呼び出します。このプロパティを設定すると、
// "First" の値および
"Name" の値が変更されるためです。

RaisePropertyChanged("");
}
}
}
public DateTime Hired
{
get { return _hired; }
set
{
if (value != _hired)
{
_hired =
value;

RaisePropertyChanged("Hired");
}
}
}
public double Weight
{
get { return _weight; }
set
{
if (value != _weight)
{
_weight =
value;

RaisePropertyChanged("Weight");
}
}
}

// 読み取り専用要素
public string Father
{
get { return _father; }
}
public string Brother
{
get { return _brother; }
}
public string Cousin
{
get { return _cousin; }
}

// ** ユーティリティ
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; }

#region ** INotifyPropertyChanged Members

// このインタフェースは、連結コントロールがデータオブジェクトの変更に対応できるようにします。

void RaisePropertyChanged(string propertyName)
{
OnPropertyChanged(new
PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(PropertyChangedEventArgs e)
{
if (PropertyChanged != null)
PropertyChanged(this, e);
}

#endregion

#region IEditableObject Members

// このインタフェースは、トランザクション編集を許可します（ユーザーは［Esc］キーを押して直前の値を復元できます）。

Customer _clone;
public void BeginEdit()
{
_clone = (Customer)this.MemberwiseClone();
}
public void EndEdit()
{
_clone = null;
}
public void CancelEdit()
{
if (_clone != null)
{
foreach (var p in
this.GetType().GetRuntimeProperties())
{
if (p.CanRead
&& p.CanWrite)
{

p.SetValue(this, p.GetValue(_clone, null), null);
}
}
}
}

#endregion
}
}

    Visual Basic でコードを書く場合

    Visual Basic
    コードのコピー 
    Visual Basic
Imports System
Imports System.Collections
Imports System.Collections.Generic
Imports System.Collections.ObjectModel
Imports System.ComponentModel
Imports System.Reflection

Namespace FlexGridSamples
Public Class Customer
Implements INotifyPropertyChanged
Implements IEditableObject
' ** フィールド
Private _id As Integer, _countryID As Integer
Private _first As String, _last As String
Private _father As String, _brother As String, _cousin As String
Private _active As Boolean
Private _hired As DateTime
Private _weight As Double

' ** データジェネレータ
Shared _rnd As New Random()
Shared _firstNames As String() =
"Andy|Ben|Charlie|Dan|Ed|Fred|Gil|Herb|Jack|Karl|Larry|Mark|Noah|
        Oprah|Paul|Quince|Rich|Steve|Ted|Ulrich|Vic|Xavier|Zeb".Split("|"c)
Shared _lastNames As String() =
"Ambers|Bishop|Cole|Danson|Evers|Frommer|Griswold|Heath|Jammers|
        Krause|Lehman|Myers|Neiman|Orsted|Paulson|Quaid|Richards|
        Stevens|Trask|Ulam".Split("|"c)

Shared _countries As String() = "China|India|United
States|Indonesia|Brazil|Pakistan|Bangladesh|Nigeria|Russia|Japan|
        Mexico|Philippines|Vietnam|Germany|Ethiopia|Egypt|Iran|Turkey|
        Congo|France|Thailand|United
Kingdom|Italy|Myanmar".Split("|"c)

' ** コンストラクタ
Public Sub New()
Me.New(_rnd.[Next](10000))
End Sub
Public Sub New(id__1 As Integer)
ID = id__1

First = GetString(_firstNames)
Last = GetString(_lastNames)
CountryID = _rnd.[Next]() Mod _countries.Length
Active = _rnd.NextDouble() >= 0.5
Hired = DateTime.Today.AddDays(-_rnd.[Next](1, 365))
Weight = 50 + _rnd.NextDouble() * 50
_father = String.Format("{0} {1}", GetString(_firstNames),
Last)
_brother = String.Format("{0} {1}", GetString(_firstNames),
Last)
_cousin = GetName()
End Sub

' ** オブジェクトモデル
Public Property ID() As Integer
Get
Return _id
End Get
Set(value As Integer)
If value <> _id Then
_id = value

RaisePropertyChanged("ID")
End If
End Set
End Property
Public ReadOnly Property Name() As String
Get
Return String.Format("{0} {1}", First,
Last)
End Get
End Property
Public ReadOnly Property Country() As String
Get
Return _countries(_countryID)
End Get
End Property
Public Property CountryID() As Integer
Get
Return _countryID
End Get
Set(value As Integer)
If value <> _countryID AndAlso value
> -1 AndAlso value < _countries.Length Then
_countryID =
value

'
OnPropertyChanged を Null パラメータで呼び出します。このプロパティを設定すると、
' "CountryID"
の値および "Country" の値が変更されるためです。

RaisePropertyChanged("")
End If
End Set
End Property
Public Property Active() As Boolean
Get
Return _active
End Get
Set(value As Boolean)
If value <> _active Then
_active =
value

RaisePropertyChanged("Active")
End If
End Set
End Property
Public Property First() As String
Get
Return _first
End Get
Set(value As String)
If value <> _first Then
_first = value

'
OnPropertyChanged を Null パラメータで呼び出します。このプロパティを設定すると、
' "First" の値および
"Name" の値が変更されるためです。

RaisePropertyChanged("")
End If
End Set
End Property
Public Property Last() As String
Get
Return _last
End Get
Set(value As String)
If value <> _last Then
_last = value

'
OnPropertyChanged を Null パラメータで呼び出します。このプロパティを設定すると、
' "First" の値および
"Name" の値が変更されるためです。

RaisePropertyChanged("")
End If
End Set
End Property
Public Property Hired() As DateTime
Get
Return _hired
End Get
Set(value As DateTime)
If value <> _hired Then
_hired =
value

RaisePropertyChanged("Hired")
End If
End Set
End Property
Public Property Weight() As Double
Get
Return _weight
End Get
Set(value As Double)
If value <> _weight Then
_weight =
value

RaisePropertyChanged("Weight")
End If
End Set
End Property

' 読み取り専用要素
Public ReadOnly Property Father() As String
Get
Return _father
End Get
End Property
Public ReadOnly Property Brother() As String
Get
Return _brother
End Get
End Property
Public ReadOnly Property Cousin() As String
Get
Return _cousin
End Get
End Property

' ** ユーティリティ
Private Shared Function GetString(arr As String()) As String
Return arr(_rnd.[Next](arr.Length))
End Function
Private Shared Function GetName() As String
Return String.Format("{0} {1}", GetString(_firstNames),
GetString(_lastNames))
End Function

' ** 静的リストプロバイダ
Public Shared Function GetCustomerList(count As Integer) As 
        ObservableCollection(Of
Customer)
Dim list = New ObservableCollection(Of Customer)()
For i As Integer = 0 To count - 1
list.Add(New Customer(i))
Next
Return list
End Function

' ** 静的値プロバイダ
Public Shared Function GetCountries() As String()
Return _countries
End Function
Public Shared Function GetFirstNames() As String()
Return _firstNames
End Function
Public Shared Function GetLastNames() As String()
Return _lastNames
End Function
#Region "** INotifyPropertyChanged Members"

' このインタフェースは、連結コントロールがデータオブジェクトの変更に対応できるようにします。

Private Sub RaisePropertyChanged(propertyName As String)
OnPropertyChanged(New
PropertyChangedEventArgs(propertyName))
End Sub
Public Event PropertyChanged As PropertyChangedEventHandler
Protected Sub OnPropertyChanged(e As PropertyChangedEventArgs)
RaiseEvent PropertyChanged(Me, e)
End Sub

#End Region
#Region "IEditableObject Members"

' このインタフェースは、トランザクション編集を許可します（ユーザーは［Esc］キーを押して直前の値を復元できます）。

Private _clone As Customer
Public Sub BeginEdit()
_clone = DirectCast(Me.MemberwiseClone(), Customer)
End Sub
Public Sub EndEdit()
_clone = Nothing
End Sub
Public Sub CancelEdit()
If _clone IsNot Nothing Then
For Each p In
Me.[GetType]().GetRuntimeProperties()
If p.CanRead
AndAlso p.CanWrite Then

p.SetValue(Me, p.GetValue(_clone, Nothing), Nothing)
End If
Next
End If
End Sub

#End Region
Public Sub BeginEdit1() Implements IEditableObject.BeginEdit

End Sub

Public Sub CancelEdit1() Implements IEditableObject.CancelEdit

End Sub

Public Sub EndEdit1() Implements IEditableObject.EndEdit

End Sub

Public Event PropertyChanged1(sender As Object, e As 
        PropertyChangedEventArgs) Implements
INotifyPropertyChanged.PropertyChanged
End Class
End Namespace
  6. コードビューに切り替えて、次の名前空間を追加します。

    C# でコードを書く場合

    C#
    コードのコピー 
    using C1.Xaml.FlexGrid;
using C1.Xaml;
using System.Collections.ObjectModel;

    Visual Basic でコードを書く場合

    Visual Basic
    コードのコピー 
    Imports C1.Xaml.FlexGrid
Imports C1.Xaml
Imports System.Collections.ObjectModel
  7. MainPage() コンストラクタの上に次のコードを追加して、ICollectionView インタフェースの実装を記述します。

    C# でコードを書く場合

    C#
    コードのコピー 
    private readonly C1CollectionView _c1CollectionView;
private const string NoneItem = "(None)";

    Visual Basic でコードを書く場合

    Visual Basic
    コードのコピー 
    Dim _c1CollectionView As C1CollectionView
Const NoneItem As String = "(None)"
  8. InitializeComponent() メソッドのすぐ下に次のコードを挿入して、リストと監視可能なコレクションを作成します。このコードは C1FlexGrid.ItemsSource プロパティも設定します。

    C# でコードを書く場合

    C#
    コードのコピー 
    IList<string> fieldNames = new string[] 
{ "ID", "Name", "Country", "Active", "Hired", "Father", "Weight" };

List<string> groupFields = new
List<string>(fieldNames);
groupFields.Sort();
//groupFields.Remove("Active");
List<string> filterFields = new
List<string>(groupFields);
groupFields.Insert(0, NoneItem);
groupComboBox.ItemsSource = groupFields;
groupComboBox.SelectedItem = NoneItem;
filterComboBox.ItemsSource = filterFields;
filterComboBox.SelectedIndex = 0;


ObservableCollection<Customer> customers =
Customer.GetCustomerList(50);
_c1CollectionView = new C1CollectionView();
_c1CollectionView.SourceCollection = customers;

c1FlexGrid1.ItemsSource = _c1CollectionView;
}

    Visual Basic でコードを書く場合

    Visual Basic
    コードのコピー 
    Dim fieldNames As IList(Of String) = New String() 
{"ID", "Name", "Country", "Active", "Hired", "Father", "Weight"}

Dim groupFields As New List(Of String)(fieldNames)
groupFields.Sort()
groupFields.Remove("Active")
Dim filterFields As New List(Of String)(groupFields)
groupFields.Insert(0, NoneItem)
groupComboBox.ItemsSource = groupFields
groupComboBox.SelectedItem = NoneItem
filterComboBox.ItemsSource = filterFields
filterComboBox.SelectedIndex = 0

Dim customers As ObservableCollection(Of Customer) = Customer.GetCustomerList(50)
_c1CollectionView = New C1CollectionView()
_c1CollectionView.SourceCollection = customers

flexgrid1.ItemsSource = _c1CollectionView
  9. グループ化機能を追加するには、次のコードを追加します。

    C# でコードを書く場合

    C#
    コードのコピー 
    void UpdateGrouping()
{
if (_c1CollectionView == null)
return;
using (_c1CollectionView.DeferRefresh())
{

_c1CollectionView.GroupDescriptions.Clear();
if (groupComboBox.SelectedItem !=
NoneItem)
{

_c1CollectionView.GroupDescriptions.Add(new PropertyGroupDescription
        ((string)groupComboBox.SelectedItem));
}
}
}

    Visual Basic でコードを書く場合

    Visual Basic
    コードのコピー 
    Private Sub UpdateGrouping()
If (_c1CollectionView Is Nothing) Then
Return
End If
_c1CollectionView.DeferRefresh()
_c1CollectionView.GroupDescriptions.Clear()
If (groupComboBox.SelectedItem <> NoneItem) Then
_c1CollectionView.GroupDescriptions.Add(New
PropertyGroupDescription(CType(groupComboBox.SelectedItem, String)))
End If
End Sub
  10. C1FlexGrid のフィルタ処理機能を設定および制御するには、次のコードを使用します。

    C# でコードを書く場合

    C#
    コードのコピー 
    void UpdateFiltering()
if (filterTextBox.Text.Length == 0)
_c1CollectionView.Filter = null;
else
{
if (_c1CollectionView.Filter ==
null)

_c1CollectionView.Filter = FilterFunction;
else

_c1CollectionView.Refresh();
}
}

bool FilterFunction(object customer)
{
Customer cust = customer as Customer;
if (cust == null)
return false;
object propValue = null;
switch ((string)filterComboBox.SelectedItem)
{
case "ID":
propValue =
cust.ID;
break;
case "Name":
propValue =
cust.Name;
break;
case "Country":
propValue =
cust.Country;
break;
case "Hired":
propValue =
cust.Hired;
break;
case "Father":
propValue =
cust.Father;
break;
case "Weight":
propValue =
cust.Weight;
break;
default:
return true;
}
if (propValue == null)
return false;
return propValue.ToString().StartsWith(filterTextBox.Text,
StringComparison.CurrentCultureIgnoreCase);
}

    Visual Basic でコードを書く場合

    Visual Basic
    コードのコピー 
     Private Sub UpdateFiltering()
If filterTextBox.Text.Length = 0 Then
_c1CollectionView.Filter = Nothing
Else
If _c1CollectionView.Filter Is Nothing Then
_c1CollectionView.Filter = AddressOf
FilterFunction
Else
_c1CollectionView.Refresh()
End If
End If
End Sub

Private Function FilterFunction(ByVal customer As Object) As Boolean '
Dim cust As Customer = CType(customer, Customer)
If (cust Is Nothing) Then
Return False
End If

Dim propValue As Object = Nothing
Select Case (CType(filterComboBox.SelectedItem, String))
Case "ID"
propValue = cust.ID
Case "Name"
propValue = cust.Name
Case "Country"
propValue = cust.Country
Case "Hired"
propValue = cust.Hired
Case "Father"
propValue = cust.Father
Case "Weight"
propValue = cust.Weight
Case Else
Return True
End Select
  11. 最後に、ComboBox と TextBox の SelectionChanged および TextChanged イベントを処理するコードを追加します。

    C# でコードを書く場合

    C#
    コードのコピー 
    private void groupComboBox_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
{
UpdateGrouping();
}

private void filterTextBox_TextChanged_1(object sender, TextChangedEventArgs e)
{
UpdateFiltering();
}

private void filterComboBox_SelectionChanged_1(object sender, SelectionChangedEventArgs
e)
{
filterTextBox.Text = "";
}

    Visual Basic でコードを書く場合

    Visual Basic
    コードのコピー 
    If (propValue Is Nothing) Then
Return False
End If
Return propValue.ToString.StartsWith(filterTextBox.Text,
StringComparison.CurrentCultureIgnoreCase)
End Function
Private Sub groupComboBox_SelectionChanged_1(ByVal sender As Object, ByVal e As SelectionChangedEventArgs)
UpdateGrouping()
End Sub
Private Sub filterTextBox_TextChanged_1(ByVal sender As Object, ByVal e As TextChangedEventArgs)
UpdateFiltering()
End Sub
Private Sub filterComboBox_SelectionChanged_1(ByVal sender As Object, ByVal e As SelectionChangedEventArgs)
filterTextBox.Text = ""
End Sub
  12. アプリケーションを実行すると、さまざまな方法でデータをフィルタ処理したりグループ化することができます。C1FlexGrid コントロールは次の図のようになります。

 

 

Copyright © GrapeCity, Inc. All rights reserved.