UWP 应用程序中带有 master/details 视图和可绑定对象的汉堡包菜单

Question

我正在创建一个带有汉堡菜单和 master/detail 视图的 Windows 10 UWP 应用程序。我已经完成了这部分。

现在我想在主列表窗格中有一个可观察的集合，以便我可以动态地将新项目添加到主列表。我该如何实现？

我在拆分视图内容的框架内使用了来自 Microsoft 的 hamburger menu used by Bob taylor from channel9 and added the master/detail 样本，如下所示：

<SplitView.Content><Frame x:Name="sumname"/></SplitView.Content>

然后在 MainPage 构造函数中，我将 MasterDetailPage 导航到此框架。

Answer 1

您可以将 ListView 放入 SplitView.Pane 并将 ListView 绑定到集合。

ListView 是一个 ItemsControl，因此它可以包含任何类型的项的集合。要填充视图，将项目添加到 Items 集合，或将 ItemsSource 属性设置为数据 source.For 更多信息，请参阅 ListView。

一个常见的场景是绑定到一组业务对象。在 C# 和 Visual Basic 中，泛型 ObservableCollection class 是数据绑定的良好集合选择。有关详细信息，请参阅 Binding to a collection of items。

在XAML中：

<SplitView.Pane>
 <ListView ItemsSource="{x:Bind ViewModel.Menus}" SelectionChanged="ListView_SelectionChanged">
     <ListView.ItemTemplate>
         <DataTemplate x:DataType="local:Menu">
             <TextBlock Text="{x:Bind Title}"></TextBlock>
         </DataTemplate>
     </ListView.ItemTemplate>
 </ListView>
</SplitView.Pane>

在后面的代码中：

public MainPage()
{
 this.InitializeComponent();
 ViewModel = new MainPageViewModel();
}

public MainPageViewModel ViewModel { get; set; }

private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
 Menu menu = ((sender as ListView).SelectedItem as Menu);
 MyFrame.Navigate(menu.NavigateTo);
}

Menu.cs代码：

public class Menu 
{
public string Title { get; set; }

public Type NavigateTo { get; set; }

public Menu(string title,Type navigateTo)
{
    this.Title = title;
    this.NavigateTo = navigateTo;
}

MainPageViewModel.cs代码：

public class MainPageViewModel
{
 public ObservableCollection<Menu> Menus;
 public MainPageViewModel()
 {
     Menus = new ObservableCollection<Menu>()
    {
          new Menu("Page1",typeof(Page1)),
          new Menu("Page2",typeof(Page2)),
          new Menu("Page3",typeof(Page3))
    };
 }
}

UWP 应用程序中带有 master/details 视图和可绑定对象的汉堡包菜单

Hamburger menu with master/details view and a bindable object in UWP app

windows

data-binding

observablecollection

uwp