UWP DataBinding和Ordering:如何将控件绑定到ListView中的Border.child?

时间:2018-05-24 09:48:49

标签: vb.net listview uwp

这适用于UWP的VB.NET和XAML。 我正在使用ListView,MyList和DataTemplate:

 <ListView x:Name="MyList">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Button Content="{Binding button1.Content}"></Button>
                    <TextBlock Text="{Binding col2}"></TextBlock>
                    <Border Child="{Binding button2}"></Border> 
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

我有: DataList As New cObservableListBase(Of Item)

 Public Class Item
    'List Properties
    Public Property button1 As CustomButton
    Public Property col2 As String
    Public Property button2 As CustomButton
End Class

Public Class CustomButton
    Inherits Button
    Implements IComparable

    Public Function CompareTo(obj As Object) As Integer Implements IComparable.CompareTo
        CompareTo = 0
        If Content > CType(obj, CustomButton).Content Then
            CompareTo = 1
        ElseIf Content < CType(obj, CustomButton).Content Then
            CompareTo = -1
        End If
    End Function
End Class

MyList.ItemsSource = DataList

  For i = 65 To 85
      Dim b1 As New CustomButton With {.Content = Convert.ToChar(i)}
      Dim b2 As New CustomButton With {.Content = Convert.ToChar(i)}
      DataList.Add(New Item With {.button1 = b1, .col2 = Convert.ToChar(i), .button2 = b2})
   Next

ListView包含3列,当我在任何列上订购DataList时,绑定在文本上的前2列将被正确排序,但绑定在控件本身上的第3列将显示不同的结果。 注意:DataList本身正在对3列进行正确排序,但listview中的问题没有正确显示第3列。

我在这里做错了还是这个错误?以及如何正确绑定到控件?

修改

我觉得我必须添加一个小程序,以便任何人都可以轻松尝试。

    <StackPanel Orientation="Vertical">
        <Button Name="ADD" Content="Add" Click="AddClick" />
        <Button Name="Order" Content="Order" Click="OrderClick"/>

        <ListView x:Name="MyList">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Button Content="{Binding button1.Content}"></Button>
                        <TextBlock Text="{Binding col2}"></TextBlock>
                        <Border Child="{Binding button2}"></Border>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
</StackPanel>

并在代码behinde:

Public NotInheritable Class MainPage
    Inherits Page
Public DataList As New ObservableCollection(Of Item)
Public Sub AddClick()
    MyList.ItemsSource = DataList
    For i = 65 To 85
        Dim b1 As New CustomButton With {.Content = Convert.ToChar(i)}
        Dim b2 As New CustomButton With {.Content = Convert.ToChar(i)}
        DataList.Add(New Item With {.button1 = b1, .col2 = Convert.ToChar(i), .button2 = b2})
    Next
End Sub

Public Sub OrderClick()
    Static NextOrder As Boolean = False

    Dim Sorted As IOrderedEnumerable(Of Item)
    If NextOrder Then
        Sorted = DataList.OrderBy(Function(p) p.col2)
    Else
        Sorted = DataList.OrderByDescending(Function(p) p.col2)
    End If
    NextOrder = Not NextOrder

    Dim SortedList = Sorted.ToList

    DataList.Clear()
    For i = 0 To SortedList.Count - 1
        DataList.Add(SortedList(i))
    Next
End Sub
End Class
Public Class Item
        'List Properties
        Public Property button1 As CustomButton
        Public Property col2 As String
        Public Property button2 As CustomButton  'or UIElement 
    End Class
Public Class CustomButton
    Inherits Button
    Implements IComparable

    Public Function CompareTo(obj As Object) As Integer Implements IComparable.CompareTo
        Return Content.ToString.CompareTo(CType(obj, CustomButton).Content.ToString)
    End Function
End Class

首先添加列表,然后尝试使用订单按钮对其进行排序,问题在第3列中未正确排序。但是当对程序进行调整时,我发现即使在第三列中DataList也有正确的顺序,但问题是在Listview中没有正确显示!!

1 个答案:

答案 0 :(得分:0)

我无法在我身边重现您的问题,我检查了您的代码。我发现你的数据绑定不是很好的做法,我重写你的模型类和xamlto使它们看起来简洁明了。请参阅以下内容。

public class Item
{
    public string Content { get; set; }
    public string Color { get; set; }
    public UIElement BTNElement { get; set; }
}

XAML

<ListView Name="MyList">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <Button Content="{Binding Content}"></Button>
                <TextBlock Text="{Binding Color}"></TextBlock>
                <Border Child="{Binding BTNElement}"></Border>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

<强>用法

MyList.ItemsSource = new List<Item> {
    new Item { Content = "ClickMe", Color = "Red", BTNElement = new Button { Content = "Nico" } },
    new Item { Content = "ClickMe", Color = "Green", BTNElement = new Button { Content = "Kite" } },
    new Item { Content = "ClickMe", Color = "Blue", BTNElement = new Button { Content = "Chuchu" } } };