How to add new stackpanel when new item added?

Question

The problem that I'm facing is I want everytime user enter the item code all related details insert in a new stackpanel. that's means every item added will added a new stackpanel. 1 stackpanel will have 1 item. but I couldn't get how to do it that way.

this is the code behind when user key in barcode and press 'Enter'

private void txtItemCode_KeyDown(object sender, KeyEventArgs e)
        {
            try
            {

            string itemCode = txtItemCode.Text;
            StackPanel spItemDisplay = new StackPanel();
            spItemDisplay.Orientation = Orientation.Horizontal;

            if (e.Key == Key.Return)
            {
              spItemDisplay.Children.Add(spItemDisplay);
                SimpleItem item = cashierViewModel.validateItemOnHandCode(txtItemCode.Text, 1);

                if (item != null)
                {
                        cashierViewModel.AddItemToList(item, PosWindows2.cashier.ShopId);
                        LoadData();
                        dgItemDisplay.ItemsSource = null;
                        dgItemDisplay.ItemsSource = CashierViewModel.itemDisplayList;
                }
                else
                {
                    MessageBox.Show("Item Not Available.", "Alert", MessageBoxButton.OK, MessageBoxImage.Information);
                }

                txtItemCode.Text = null;
            }
        }

this is at .xaml

 <StackPanel x:Name="spItemDisplay" >
                     <ScrollViewer HorizontalAlignment="Right" >
                        <DataGrid CellEditEnding="DgItemDisplay_CellEditEnding" HorizontalAlignment="Center"  Width="1036" Name="dgItemDisplay" AutoGenerateColumns="False" Height="auto" >
                            <DataGrid.Columns>
                                <DataGridTextColumn IsReadOnly="True" x:Name="dgItemCode" Width="200" Header="Barcode" Binding="{Binding ItemCode}" />
                                <DataGridTextColumn IsReadOnly="True" x:Name="dgItemName" Width="350" Header="Item Name" Binding="{Binding ItemName}" />
                                <DataGridTextColumn IsReadOnly="True" x:Name="dgItemPrice" Width="150" Header="Item Price" Binding="{Binding ItemPrice}" />
                                <DataGridTextColumn x:Name="dgQuantity" Width="150" Header="Quantity" Binding="{Binding Quantity, UpdateSourceTrigger=PropertyChanged}" />
                                <DataGridTextColumn x:Name="dgDiscount" Width="150" Header="Discount" Binding="{Binding Discount, UpdateSourceTrigger=PropertyChanged}" />
                            </DataGrid.Columns>
                            <DataGrid.RowDetailsTemplate>
                                <DataTemplate  >
                                    <StackPanel Name="spItem" HorizontalAlignment="Center" >
                                        <Grid Margin="0,10"  >
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="300" />
                                                <ColumnDefinition Width="300" />
                                                <ColumnDefinition Width="100" />
                                                <ColumnDefinition Width="100" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>
                                            <TextBlock Text="Quantity: " FontWeight="Bold" Grid.Column="2" Grid.Row="0"/>
                                            <TextBox x:Name="txtQty" Text="{Binding Quantity, UpdateSourceTrigger=PropertyChanged}" Grid.Column="3" Grid.Row="0"/>
                                            <TextBlock Text="Discount: " FontWeight="Bold" Grid.Column="2" Grid.Row="1"/>
                                            <TextBox x:Name="txtDisc" Text="{Binding Discount, UpdateSourceTrigger=PropertyChanged}" Grid.Column="3" Grid.Row="1"/>
                                        </Grid>
                                    </StackPanel>
                                </DataTemplate>
                            </DataGrid.RowDetailsTemplate>
                        </DataGrid>
                    </ScrollViewer>
                </StackPanel>

can anybody help ? I really need your help. Thank you :)

You also have to add your ```spItemDisplay``` to a parent control. — devsmn, Mar 05 '19 at 07:25
@Shawn do you means I should put the name of stackpanel as spItemDisplay. I've done it but still didn't give what I want. I've updated my question. — rayna qarla, Mar 05 '19 at 07:33
Well that was a bad idea if you need many of them. See my post here https://stackoverflow.com/questions/54954594/add-multiple-xaml-based-wpf-control-to-canvas-dynamically-in-vb-net/54959580#54959580 But put them in a stackpanel or something rather than canvas... — Andy, Mar 05 '19 at 07:46
@Andy thank you for your suggestion. the things is I'm not sure about my code behind. where should I put the add stackpanel :( — rayna qarla, Mar 05 '19 at 09:24

Evaniar · Accepted Answer · 2019-03-05T09:30:00.373

Can't you go for an ItemsControl/ListView, that has an StackPanel(for spItemDisplay) as an ItemsPanelTemplate and specify the DataTemplate as your StackPanel (spItem)?

Something along these lines:

    <ItemsControl ItemsSource="{Binding DisplayItems}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel x:Name="spItem">
                    <Grid Margin="0,10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>

                        <TextBlock Text="Quantity: "/>
                        <TextBlock Text="{Binding Quantity}"/>
                        <TextBlock/>
                    </Grid>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

UPDATE:

If you're not familiar with DataTemplates please have a look at Andy's link in the comments or have a look at the following example.

Items Control + DataTemplate explained

thank you for your answer. I've tried this but still does not show any changes. the things is I'm not sure about my code behind. where should I put the add stackpanel. — rayna qarla, Mar 05 '19 at 09:22
you don't need to add a stackPanel with the above approach. you just need to add your object (that contains the data for the stackpanel) to the ObservableCollection which I named in the example as 'DisplayItems'. — Evaniar, Mar 05 '19 at 09:25

How to add new stackpanel when new item added?

1 Answers1