如何使用 Expander 在 WPF 中显示来自 material 设计的多个绑定数据？

Question

上面的问题可能有点乱，我在这里解释一下。

目前我正在我的 WPF

中使用 Expander

下面是我的代码

 <materialDesign:Card Background="{DynamicResource MaterialDesignBackground}">

         <StackPanel x:Name="spItemDisplay" DataContext="{Binding itemDisplayList}">

            <Expander x:Name="expander1" HorizontalAlignment="Stretch" Header="{Binding ItemName}">

                 <StackPanel Orientation="Vertical" TextBlock.Foreground="{DynamicResource MaterialDesignBody}" Margin="24,8,24,16">
                      <Grid>
                            <Grid.ColumnDefinitions>
                               <ColumnDefinition/>
                               <ColumnDefinition/>
                             </Grid.ColumnDefinitions>
                              <Grid.RowDefinitions>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>

                                    <Label FontWeight="Bold" Content="Item Code" Grid.Column="0" Grid.Row="0" />
                                    <TextBlock Text="{Binding ItemCode}" Grid.Column="1" Grid.Row="0"/>

                                    <Label FontWeight="Bold" Content="Item Name" Grid.Column="0" Grid.Row="1" />
                                    <TextBlock Text="{Binding ItemName}" Grid.Column="1" Grid.Row="1"/>

                                    <Button Click="btnRemoveItem_Click" Grid.Row="9" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}">
                                        <materialDesign:PackIcon Background="Transparent" Foreground="#FF3580BF" Kind="RemoveShoppingCart" Width=" 30" Height="30"/>
                                    </Button>

                                </Grid>


                            </StackPanel>

                        </Expander>
                     </StackPanel>

                </materialDesign:Card>

我的界面是这样的

基本上这个界面是这样工作的：当用户插入条形码时，项目代码将显示在扩展器中。它从代码隐藏中获取绑定的详细信息。

目前这个扩展器工作正常。但我只能添加 1 项。这是当我添加第二个项目时它没有出现在扩展器中。

我想要的是当用户添加第二个项目时，扩展器将增加到 2 个扩展器。

可以这样吗？

itemDisplayList来自这段代码

cashierViewModel.AddItemToList(item);
spItemDisplay.DataContext = null;
spItemDisplay.DataContext = CashierViewModel.itemDisplayList;

我之前使用 DataGrid 完成它并且它正在工作，但我希望它显示在扩展器之类的东西中

基本上 itemDisplayList 包含所有添加的项目。

Answer 1

StackPanel 是此处使用的错误容器。您需要使用一个可以显示多个绑定数据项的容器。 ItemsControl 是一个不错的选择，但请注意，它使用 ItemsSource 作为数据，您需要将 DataContext 设置为高于该级别的级别。

<materialDesign:Card Background="{DynamicResource MaterialDesignBackground}">
        <ItemsControl x:Name="spItemDisplay" ItemsSource="{Binding itemDisplayList}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Expander x:Name="expander1" HorizontalAlignment="Stretch" Header="{Binding ItemName}">

                        <StackPanel Orientation="Vertical" TextBlock.Foreground="{DynamicResource MaterialDesignBody}" Margin="24,8,24,16">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>

                                <Label FontWeight="Bold" Content="Item Code" Grid.Column="0" Grid.Row="0" />
                                <TextBlock Text="{Binding ItemCode}" Grid.Column="1" Grid.Row="0"/>

                                <Label FontWeight="Bold" Content="Item Name" Grid.Column="0" Grid.Row="1" />
                                <TextBlock Text="{Binding ItemName}" Grid.Column="1" Grid.Row="1"/>

                                <Button Click="btnRemoveItem_Click" Grid.Row="9" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}">
                                    <materialDesign:PackIcon Background="Transparent" Foreground="#FF3580BF" Kind="RemoveShoppingCart" Width=" 30" Height="30"/>
                                </Button>

                            </Grid>


                        </StackPanel>

                    </Expander>
                </DataTemplate>

            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </materialDesign:Card>

如何使用 Expander 在 WPF 中显示来自 material 设计的多个绑定数据？

How To use Expander to display the multiple binding data from material design in WPF?

c#

wpf

material-design

expander