XAML 在 UWP 中绑定一个 List<> 项

Question

我在绑定列表<>中的一项时遇到问题。

我已经从 JSON 文件中导入了数据，我想遍历其中的数组并将其显示在文本框中。

数据如下所示：

{name: "ABC", Items: [ {str: "aaa"}, {str: "bbb"}, {str: "ccc"} ]}

这里有一个 C# 的例子：

public class A
{
    public string Str { get; set; }
}
public class ParentA
{
    public string Name { get; set; }
    public List<A> Items { get; set; }
}

public class MyPage : Page
{
    public ParentA ObjectParrentA { get; set; }
    public int SelectedItem { get; set; }

    public MyPage ()
    {
        ObjectParrentA = new ParentA();
        // here is binding of ObjectParrentA by JSON data.
        SelectedItem = 0;
        this.DataContext = this;
        this.InitializeComponent();
    }
    private void NextItem_Click(object sender, RoutedEventArgs e)
    {
        SelectedItem++;
    }
}

和XAML：

<TextBlock Text="{Binding ObjectParrentA.Items[SelectedItem].Str}" />
<Button Name="NextItem" Click="NextItem_Click" Content="Next Item" />

在文本框的开头应该显示 "aaa"，单击下一个项目按钮后应该显示 "bbb"，等等...

现在 TextBlock 是空白的。我觉得肯定是"Binding ObjectParrentA.Items[SelectedItem].Str"有问题，但是我没有太多的绑定经验

你有什么提示，如何实现这个？谢谢。

Answer 1

我稍微更改了一下，使其更像 MVVM。您需要将其重构为一个页面：

public class A
{
    public string Str { get; set; }
}

public class ParentAViewModel : INotifyPropertyChanged
{
    private int _currentIndex;

    public ParentAViewModel()
    {
        Items = new List<A>();
    }

    public string Name { get; set; }
    public List<A> Items { get; set; }

    public int CurrentIndex
    {
        get
        {
            return _currentIndex;
        }
        set
        {
            _currentIndex = value;
            OnPropertyChanged();
            OnPropertyChanged(nameof(CurrentItem));
        }
    }

    public string CurrentItem => Items[CurrentIndex].Str;

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public partial class MainWindow : Window
{
    public ParentAViewModel ObjectParrentA { get; set; }
    public int SelectedItem { get; set; }

    public MainWindow()
    {
        ObjectParrentA = new ParentAViewModel();
        ObjectParrentA.Items.Add(new A() { Str = "1" });
        ObjectParrentA.Items.Add(new A() { Str = "2" });
        ObjectParrentA.Items.Add(new A() { Str = "3" });
        // here is binding of ObjectParrentA by JSON data.
        SelectedItem = 0;
        this.DataContext = this;

        InitializeComponent();
    }

    private void NextItem_Click(object sender, RoutedEventArgs e)
    {
        ObjectParrentA.CurrentIndex++;
    }
}

XAML:

<StackPanel>
    <TextBlock Text="{Binding ObjectParrentA.CurrentItem}" />
    <Button Name="NextItem" Click="NextItem_Click" Content="Next Item" />
</StackPanel>

当您绑定到可观察的属性时，WPF 会发挥最佳作用 - 方法可能很棘手。添加一个 ViewModel 来促进这一点很常见，因此您不会用仅与视图相关的对象污染您的模型类。

在这里，我们正在通过绑定查看属性 CurrentItem。单击按钮时，我们通过 CurrentIndex setter 的 OnPropertyChanged(nameof(CurrentItem)) 通知 WPF CurrentItem 已更改，然后将视图重新绑定到新值。

我希望这是有道理的。祝你好运。

XAML 在 UWP 中绑定一个 List<> 项

XAML binding one List<> item in UWP

c#

xaml

uwp

windows-10-universal

uwp-xaml