Search code examples
c#wpfmaterial-designexpander

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

the question above might be a little bit messy so I'll explain it here.

currently I'm using Expander in my WPF

below is my code

 <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>

my interface look like this

enter image description here

basically this interface working like this : when user insert the barcode the item code will show in the expander. it get the details from binding from code behind.

currently this expander is working properly. but I can only add 1 item. which is when I add second item it didn't appear in the expander.

what I want is when user add second item the expander will increase into 2 expander.

is it possible to make it like that ?

the itemDisplayList come from this code

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

I've done it using DataGrid before and its working but I want it to display in something like expander

basically the itemDisplayList contains all the added item.

Solution

  • StackPanel is the wrong container to use here. You need to use a container that can display multiple bound data items. ItemsControl is a good choice but note that it uses ItemsSource for the data and you will need to set the DataContext at a level above that.

    <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>