WPF:可展开的项目组列表

huangapple go评论62阅读模式
英文:

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:

&lt;ItemsControl Height=&quot;30&quot;&gt;
            
    &lt;ItemsControl.ItemsPanel&gt;
        &lt;ItemsPanelTemplate&gt;
            &lt;StackPanel Orientation=&quot;Horizontal&quot; /&gt;
        &lt;/ItemsPanelTemplate&gt;
    &lt;/ItemsControl.ItemsPanel&gt;
            
    &lt;ItemsControl.ItemTemplate&gt;
        &lt;DataTemplate&gt;
            &lt;StackPanel Orientation=&quot;Horizontal&quot;&gt;
                &lt;Label Content=&quot;{Binding}&quot; /&gt;
                &lt;ComboBox Width=&quot;50&quot; /&gt;
            &lt;/StackPanel&gt;
        &lt;/DataTemplate&gt;
    &lt;/ItemsControl.ItemTemplate&gt;

    &lt;system:String&gt;Item #1&lt;/system:String&gt;
    &lt;system:String&gt;Item #2&lt;/system:String&gt;
    &lt;system:String&gt;Item #3&lt;/system:String&gt;
    &lt;system:String&gt;Item #4&lt;/system:String&gt;
    &lt;system:String&gt;Item #5&lt;/system:String&gt;
            
&lt;/ItemsControl&gt;

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.

huangapple
  • 本文由 发表于 2023年6月8日 23:51:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/76433654.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定