InputPanel for UWP
InputPanel と CollectionView の連結
データ連結 > InputPanel と CollectionView の連結

InputPanel では、レコード管理、フィルタ処理、グループ化、ソートの各機能を備えたインタフェース ICollectionView を使用して、コレクション連結を実装できます。InputPanel を ObservableCollection に連結するために、ICollectionView インタフェースを実装するオブジェクトに InputPanel を連結できます。以下の例では、ObservableCollection<T> クラスを連結ソースとして使用してコレクションを取得し、ICollectionView インタフェースを実装する CollectionView クラスを使用してソースコレクションを表示しています。 その後、C1InputPanel クラスの ItemsSource プロパティを使用して、InputPanel コントロールを ICollectionView に連結しています。

ICollectionView を使用してデータ連結を行うには、次の手順を実行します。

  1. アプリケーションの設定
  2. InputPanel 用データソースの作成
  3. ICollectionView への InputPanel の連結

アプリケーションの設定

  1. UWP アプリケーションを作成します。
  2. アプリケーションに InputPanel コントロールを追加し、「InPanel」 という名前を付けます。
先頭に戻る

InputPanel 用データソースの作成

  1. 新しいクラス Product をアプリケーションに追加します。
  2. このクラスに次のフィールドを追加します。 
    Shared lines As String() = "コンピュータ|ワッシャ|ストーブ".Split("|"c)
Shared colors As String() = "赤|緑|青|白".Split("|"c)

    static string[] product = "コンピュータ|ワッシャ|ストーブ".Split('|');
static string[] colors = "赤|緑|青|白".Split('|');
  3. 次のプロパティとメソッドをクラスに追加します。 
        <Display(Name:="製品")>
    Public Property Line() As String
        Get
            Return DirectCast(GetValue("Line"), String)
        End Get
        Set
            SetValue("Line", Value)
        End Set
    End Property

    <Display(Name:="色")>
    Public Property Color() As String
        Get
            Return DirectCast(GetValue("Color"), String)
        End Get
        Set
            SetValue("Color", Value)
        End Set
    End Property

    <Display(Name:="名前")>
    Public Property Name() As String
        Get
            Return DirectCast(GetValue("Name"), String)
        End Get
        Set
            SetValue("Name", Value)
        End Set
    End Property

    <Display(Name:="価格")>
    Public Property Price() As Double
        Get
            Return CDbl(GetValue("Price"))
        End Get
        Set
            SetValue("Price", Value)
        End Set
    End Property

    <Display(Name:="重量")>
    Public Property Weight() As Double
        Get
            Return CDbl(GetValue("Weight"))
        End Get
        Set
            SetValue("Weight", Value)
        End Set
    End Property

    <Display(Name:="原価")>
    Public Property Cost() As Double
        Get
            Return CDbl(GetValue("Cost"))
        End Get
        Set
            SetValue("Cost", Value)
        End Set
    End Property

    <Display(Name:="量")>
    Public Property Volume() As Double
        Get
            Return CDbl(GetValue("Volume"))
        End Get
        Set
            SetValue("Volume", Value)
        End Set
    End Property

    <Display(Name:="廃止")>
    Public Property Discontinued() As Boolean
        Get
            Return CBool(GetValue("Discontinued"))
        End Get
        Set
            SetValue("Discontinued", Value)
        End Set
    End Property

    <Display(Name:="評価")>
    Public Property Rating() As Integer
        Get
            Return CInt(GetValue("Rating"))
        End Get
        Set
            SetValue("Rating", Value)
        End Set
    End Property

    ' 取得/設定の値
    Private values As New Dictionary(Of String, Object)()
    Private Function GetValue(p As String) As Object
        Dim value As Object
        values.TryGetValue(p, value)
        Return value
    End Function
    Private Sub SetValue(p As String, value As Object)
        If Not Object.Equals(value, GetValue(p)) Then
            values(p) = value
            OnPropertyChanged(p)
        End If
    End Sub
    Protected Overridable Sub OnPropertyChanged(p As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(p))
    End Sub

    Public Shared Function GetLines() As String()
        Return lines
    End Function


#Region "INotifyPropertyChanged Members"

    Public Event PropertyChanged As PropertyChangedEventHandler _
        Implements INotifyPropertyChanged.PropertyChanged

    [Display(Name = "製品")]
public string Line
{
    get { return (string)GetValue("product"); }
    set { SetValue("product", value); }
}

[Display(Name = "色")]
public string Color
{
    get { return (string)GetValue("Color"); }
    set { SetValue("Color", value); }
}

[Display(Name = "名前")]
public string Name
{
    get { return (string)GetValue("Name"); }
    set { SetValue("Name", value); }
}

[Display(Name = "価格")]
public double Price
{
    get { return (double)GetValue("Price"); }
    set { SetValue("Price", value); }
}

[Display(Name = "重量")]
public double Weight
{
    get { return (double)GetValue("Weight"); }
    set { SetValue("Weight", value); }
}

[Display(Name = "原価")]
public double Cost
{
    get { return (double)GetValue("Cost"); }
    set { SetValue("Cost", value); }
}

[Display(Name = "量")]
public double Volume
{
    get { return (double)GetValue("Volume"); }
    set { SetValue("Volume", value); }
}

[Display(Name = "廃止")]
public bool Discontinued
{
    get { return (bool)GetValue("Discontinued"); }
    set { SetValue("Discontinued", value); }
}

[Display(Name = "評価")]
public int Rating
{
    get { return (int)GetValue("Rating"); }
    set { SetValue("Rating", value); }
}

// 取得/設定の値
Dictionary<string, object> values = new Dictionary<string, object>();
object GetValue(string p)
{
    object value;
    values.TryGetValue(p, out value);
    return value;
}
void SetValue(string p, object value)
{
    if (!object.Equals(value, GetValue(p)))
    {
        values[p] = value;
        OnPropertyChanged(p);
    }
}
protected virtual void OnPropertyChanged(string p)
{
    if (PropertyChanged != null)
        PropertyChanged(this, new PropertyChangedEventArgs(p));
}

public static string[] GetLines()
{
    return product;
}


#region INotifyPropertyChanged Members

public event PropertyChangedEventHandler PropertyChanged;
  4. 次のコードを使用して、IEnumerable インタフェースのメソッド GetProducts を作成します。 
    Public Shared Function GetProducts(count As Integer) As IEnumerable
    Dim list = New ObservableCollection(Of Products)()

    Dim rnd = New Random(0)
    For i As Integer = 0 To count - 1
        Dim p = New Products()
        p.Line = lines(rnd.[Next]() Mod lines.Length)
        p.Color = colors(rnd.[Next]() Mod colors.Length)
        p.Name = String.Format("{0} {1}{2}",
                 p.Line.Substring(0, p.Line.Length - 1),
                 p.Line(0), i)
        p.Price = (rnd.[Next](1, 1000) + rnd.[Next](1, 1000) _
                  + rnd.[Next](1, 1000)) / 3
        p.Weight = (rnd.[Next](1, 100) + rnd.[Next](1, 100) _
                   + rnd.[Next](1, 300)) / 5
        p.Cost = rnd.[Next](1, 600)
        p.Volume = rnd.[Next](500, 5000)
        p.Discontinued = rnd.NextDouble() < 0.1
        p.Rating = rnd.[Next](0, 5)
        list.Add(p)
    Next
    Return list
End Function

    public static IEnumerable GetProducts(int count)
{
    var list = new ObservableCollection<Products>();

    var rnd = new Random(0);
    for (int i = 0; i < count; i++)
    {
        var p = new Products();
        p.Line = product[rnd.Next() % product.Length];
        p.Color = colors[rnd.Next() % colors.Length];
        p.Name = string.Format("{0} {1}{2}",
                 p.Line.Substring(0, p.Line.Length - 1),
                 p.Line[0], i);
        p.Price = (rnd.Next(1, 1000) + rnd.Next(1, 1000) +
                  rnd.Next(1, 1000)) / 3;
        p.Weight = (rnd.Next(1, 100) + rnd.Next(1, 100) +
                   rnd.Next(1, 300)) / 5;
        p.Cost = rnd.Next(1, 600);
        p.Volume = rnd.Next(500, 5000);
        p.Discontinued = rnd.NextDouble() < .1;
        p.Rating = rnd.Next(0, 5);
        list.Add(p);
    }
    return list;
}
  5. 次のコードを追加して、ICollectionView インタフェースのプロパティ CustomerCollectionView を作成します。これは、C1CollectionView クラスを使用してソースコレクションを表示します。 
    Private Shared view As ICollectionView
Public Shared ReadOnly Property CustomerCollectionView() As ICollectionView
    Get
        If view Is Nothing Then
            Dim products__1 = Products.GetProducts(50)
            view = New C1CollectionView(products__1)
        End If
        Return view
    End Get
End Property

    private static ICollectionView view;
public static ICollectionView CustomerCollectionView
{
    get
    {
        if (view == null)
        {
            var products = Products.GetProducts(50);
            view = new C1CollectionView(products);
        }
        return view;
    }
}
先頭に戻る

ICollectionView への InputPanel の連結

  1. 次のコードを追加して、ItemsSource プロパティを使用して InputPanel コントロールをデータと連結します。 
    InPanel.ItemsSource = CustomerCollectionView

    InPanel.ItemsSource = CustomerCollectionView;
  2. ［F5］キーを押してアプリケーションを実行します。
先頭に戻る
関連トピック
データ連結
InputPanel と ObservableCollection の連結

 

 

Copyright © MESCIUS, Inc. All rights reserved.