wpf 创建两个具有可见性的垂直ListBox

3phpmpom  于 2022-11-18  发布在  其他
关注(0)|答案(1)|浏览(133)

我需要两个创建两个列表:list1中的list1和list2我有订单列表,如果我选择订单,订单商品必须显示在list2中。有什么想法吗?

创建两个具有可见性的垂直ListBox

zf2sa74q

zf2sa74q1#

您尝试实现的是主-详细视图,请参阅:

由于您没有提供示例,让我们假设一个使用MVVM模式的非常小的示例。确保在视图模型中实现INotifyPropertyChanged接口,以便在属性更改时能够更新用户界面中的绑定。
这是orders类型,它有一个订单Id和一个Article集合。

public class Order
{
   public Order(string id, ObservableCollection<Article> articles)
   {
      Articles = articles;
      Id = id;
   }

   public string Id { get; }

   public ObservableCollection<Article> Articles { get; }
}

这是文章的类型,它有一个Name

public class Article
{
   public Article(string name)
   {
      Name = name;
   }

   public string Name { get; }
}

在视图的主视图模型中,您将公开Order的集合(我假设是一个购物车)。您需要创建视图模型的示例,并将其作为视图的数据上下文分配,可以使用代码隐藏或XAML,如下所示。

public class ShoppingCartViewModel
{
   public ShoppingCartViewModel()
   {
      Orders = new ObservableCollection<Order>
      {
         new Order("Order 1", new ObservableCollection<Article>
         {
            new Article("Article 1.1"),
            new Article("Article 1.2"),
            new Article("Article 1.3"),

         }),
         new Order("Order 2", new ObservableCollection<Article>
         {
            new Article("Article 2.1"),
            new Article("Article 2.2"),
            new Article("Article 2.3"),

         })
      };
   }

   public ObservableCollection<Order> Orders { get; }
}

该视图是一个带有GridWindow,它承载两个TextBlock作为标题和两个ListBox,一个用于Order,一个用于Article。属性IsSynchronizedWithCurrentItem设置为true,因此在视图中跟踪当前选定的Order。第二个ListBox使用/绑定语法绑定Orders集合中当前项的Articles集合。

<Window x:Class="WpfApp.ShoppingCartView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp"
        mc:Ignorable="d"
        Title="ShoppingCartView" Height="450" Width="800">
    <Window.DataContext>
       <local:ShoppingCartViewModel/>
    </Window.DataContext>
   <Border Margin="10">
      <Grid>
         <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
         </Grid.RowDefinitions>
         <TextBlock Grid.Row="0" Text="Orders" TextAlignment="Center"/>
         <ListBox Grid.Row="1" ItemsSource="{Binding Orders}" DisplayMemberPath="Id" IsSynchronizedWithCurrentItem="True"/>
         <TextBlock Grid.Row="2" Text="Articles" TextAlignment="Center"/>
         <ListBox Grid.Row="3" ItemsSource="{Binding Orders/Articles}" DisplayMemberPath="Name"/>
      </Grid>
   </Border>
</Window>

就是这样,一个简单的主-详细信息视图,如下所示:

相关问题