英文:
WPF: Expandable list of item groups
问题
我是新手WPF,想知道如何创建一个包含可扩展项目组数量的视图。在项目组中,我想放置一个标签和一个RadComboBox。我想要一个按钮(+),点击该按钮会在列表中出现一个新的项目组。
所以想象一下,我们从一个空视图和一个(+)按钮开始。
点击(+)会出现一个带有下拉框的标签。然后再次点击(+),会出现另一个带有下拉框的标签。我希望这个列表可以容纳尽可能多的项目组。标签和下拉框的内容将由父列表的DataContext确定。
稍后,我还想添加一个(-)按钮,可以删除所选的项目组,但一旦我知道要使用哪些元素,我想我可以自己解决这个问题。
有人知道我该如何做吗?哪个元素可以水平堆叠这些项目组,如何将标签和下拉框放在一个“组”中?我主要关注XAML代码和(+)按钮背后的逻辑。
英文:
I am new to WPF and am wondering how can I create a view which contains an expandable number of item groups. In the group of items I want to place a Label and a RadComboBox. I want to have a button (+), on click of which a new group of items appears in the list.
So imagine we start with an empty view and a (+) button.
By clicking (+) a label with a combobox appear. Then by clicking (+) again another label with a combobox appears. And I want this list to be able to fit as many groups as I want. The content of the label and the combobox will be determined by the DataContext of the parent list.
Later I want to also add a (-) button that will remove the selected group, but I think I can figure it out myself once I know which elements to use for this.
Does someone know how can I do this? Which element can fit these groups stacked horizontally and how can I place a label and a combo box in a single "group"? I am mainly concerned about the XAML code and the logic behind the (+) button.
答案1
得分: 0
您可以使用ItemsControl来实现这一点。您可以将ItemsSource绑定到您的视图模型中的ObservableCollection。
这是一个简单的示例(受此教程启发),演示了如何构建模板以显示每个组:
<ItemsControl Height="30">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding}" />
<ComboBox Width="50" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<system:String>Item #1</system:String>
<system:String>Item #2</system:String>
<system:String>Item #3</system:String>
<system:String>Item #4</system:String>
<system:String>Item #5</system:String>
</ItemsControl>
ItemsPanel定义了控制组布局的面板。在这里,我使用了一个Orientation设置为Horizontal的StackPanel。ItemTemplate设置了用于显示每个组的DataTemplate。在这里,我使用了一个Label和一个ComboBox。ItemTemplate中的DataContext将是您设置为ItemsSource的ObservableCollection中的项。
至于(+)按钮,您可以使用一个按钮,该按钮将向ObservableCollection中添加一个元素。您应该在视图模型上为此创建一个命令,并将按钮的Command属性绑定到它。
英文:
You can do this using an ItemsControl. You would bind the ItemsSource to an ObservableCollection in your View Model.
Here's a simple example (inspired by this tutorial) that demonstrates how to build the template to display each group:
<ItemsControl Height="30">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding}" />
<ComboBox Width="50" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
<system:String>Item #1</system:String>
<system:String>Item #2</system:String>
<system:String>Item #3</system:String>
<system:String>Item #4</system:String>
<system:String>Item #5</system:String>
</ItemsControl>
The ItemsPanel defines the panel that controls the layout of groups. Here I used a StackPanel with Orientation set to Horizontal. ItemTemplate sets the DataTemplate used to display each group. Here I used a Label and a ComboBox. The DataContext in the ItemTemplate will be an item from the ObservableCollection you set as your ItemsSource.
As far as the (+) button, you can use a Button that will add an element to your ObservableCollection. You should create a Command for this on your ViewModel and bind your Button's Command property to it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论