StackPanel in ComboBox to ListBoxItem

Question

I am making a WPF application for school, and I need to get the content of the ComboBoxItem to the ListBox. I did this with just a regular TextBlock in a ComboBoxItem, but I need to add a button to it to be able to delete that item in the ListBox, so I decided to make a StackPanel in every ComboBoxItem, but I can't figure out how to show the content of the StackPanel in the ListBox, I only see: System.Windows.Controls.StackPanel in the ListBox. Can someone help me?

XAML:

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DeFluitendeFietser"
        mc:Ignorable="d"
        Title="Fietsverhuur De Fluitende Fietser - Facturering" Height="450" Width="800"
        FontFamily="Bahnschrift">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
        </Grid.RowDefinitions>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>

            <TextBlock FontSize="26px"
                       Grid.Column="0"
                       Grid.Row="0"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Center"
                       Margin="10, 0, 0, 0">
                Fietsen:
            </TextBlock>

            <TextBlock FontSize="26px"
                       Grid.Column="0"
                       Grid.Row="1"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Center"
                       Margin="10, 0, 0, 0">
                Verzekeringen:
            </TextBlock>

            <TextBlock FontSize="26px"
                       Grid.Column="0"
                       Grid.Row="2"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Center"
                       Margin="10, 0, 0, 0">
                Services:
            </TextBlock>

            <ComboBox Height="40px"
                      Grid.Column="1"
                      Grid.Row="0"
                      VerticalAlignment="Center"
                      x:Name="cmbFietsen"
                      Margin="0, 0, 10, 0"
                      SelectedValuePath="Content"
                      MouseEnter="cmbFietsen_MouseEnter">
                <ComboBoxItem x:Name="cmbFiets1">Aanhangfiets €20,00 / dag</ComboBoxItem>
                <ComboBoxItem x:Name="cmbFiets2">Bakfiets €35,00 / dag</ComboBoxItem>
                <ComboBoxItem x:Name="cmbFiets3">Driewielfiets €30,00 / dag</ComboBoxItem>
                <ComboBoxItem x:Name="cmbFiets4">Elektrische fiets €30,00 / dag</ComboBoxItem>
                <ComboBoxItem x:Name="cmbFiets5">Kinderfiets €15,00 / dag</ComboBoxItem>
                <ComboBoxItem x:Name="cmbFiets6">Ligfiets €45,00 / dag</ComboBoxItem>
                <ComboBoxItem x:Name="cmbFiets7">Oma fiets €12,50 / dag</ComboBoxItem>
                <ComboBoxItem x:Name="cmbFiets8">Racefiets €15,00 / dag</ComboBoxItem>
                <ComboBoxItem x:Name="cmbFiets9">Speed pedelec €15,00 / dag</ComboBoxItem>
                <ComboBoxItem x:Name="cmbFiets10">Stadsfiets €12,50 / dag</ComboBoxItem>
                <ComboBoxItem x:Name="cmbFiets11">Vouwfiets €10,00 / dag</ComboBoxItem>
                <ComboBoxItem x:Name="cmbFiets12">Zitfiets €15,00 / dag</ComboBoxItem>
                <ComboBoxItem x:Name="cmbFiets13">
                    <StackPanel>
                        <TextBlock>Aanhangfiets</TextBlock>
                        <TextBlock>€20,00</TextBlock>
                        
                    </StackPanel>
                </ComboBoxItem>
            </ComboBox>

            <ComboBox Height="40px"
                      Grid.Column="1"
                      Grid.Row="1"
                      VerticalAlignment="Center"
                      x:Name="cmbVerzekeringen"
                      Margin="0, 0, 10, 0"
                      SelectedValuePath="Content"
                      MouseEnter="cmbVerzekeringen_MouseEnter">
                <ComboBoxItem>Beschadigingen €5,00 / dag</ComboBoxItem>
                <ComboBoxItem>Diefstal €10,00 / dag, eigen risico</ComboBoxItem>
                <ComboBoxItem>Rechtsbijstand €5,00 / dag</ComboBoxItem>
                <ComboBoxItem>Ongevallen €2,50 / dag</ComboBoxItem>
            </ComboBox>

            <ComboBox Height="40px"
                      Grid.Column="1"
                      Grid.Row="2"
                      VerticalAlignment="Center"
                      x:Name="cmbServices"
                      Margin="0, 0, 10, 0"
                      SelectedValuePath="Content"
                      MouseEnter="cmbServices_MouseEnter">
                <ComboBoxItem>Ophaalservice €15,00 / dag</ComboBoxItem>
                <ComboBoxItem>Regenpak €10,00 / dag</ComboBoxItem>
                <ComboBoxItem>Lunchpakket basis €12,50 / dag</ComboBoxItem>
                <ComboBoxItem>Lunchpakket uitgebreid €20,00 / dag</ComboBoxItem>
            </ComboBox>

            <Grid Grid.Column="1"
                  Grid.Row="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
            <Button x:Name="btnBestelArtikel"
                    Click="btnBestelArtikel_Click"
                    MouseEnter="btnBestelArtikel_MouseEnter"
                    Grid.Column="1"
                    Grid.Row="0"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Right"
                    Margin="0, 0, 10, 0"
                    Height="30px"
                    Background="Green">
                Bestel artikel
            </Button>

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0"
                               Grid.Row="0"
                               TextWrapping="Wrap"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center">
                        Aantal dagen:
                    </TextBlock>

                    <ComboBox x:Name="cmbAantalDagen"
                    Grid.Column="1"
                    Grid.Row="0"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Right"
                    Margin="0, 0, 10, 0"
                    MouseEnter="cmbAantalDagen_MouseEnter">
                        <ComboBoxItem IsSelected="True">1</ComboBoxItem>
                        <ComboBoxItem>2</ComboBoxItem>
                        <ComboBoxItem>3</ComboBoxItem>
                        <ComboBoxItem>4</ComboBoxItem>
                        <ComboBoxItem>5</ComboBoxItem>
                        <ComboBoxItem>6</ComboBoxItem>
                        <ComboBoxItem>7</ComboBoxItem>
                        <ComboBoxItem>8</ComboBoxItem>
                        <ComboBoxItem>9</ComboBoxItem>
                        <ComboBoxItem>10</ComboBoxItem>
                        <ComboBoxItem>11</ComboBoxItem>
                        <ComboBoxItem>12</ComboBoxItem>
                        <ComboBoxItem>13</ComboBoxItem>
                        <ComboBoxItem>14</ComboBoxItem>
                        <ComboBoxItem>15</ComboBoxItem>
                    </ComboBox>
                </Grid>
            </Grid>
        </Grid>

        <Grid Grid.Column="1"
              Grid.Row="0"
              Margin="10, 10, 10, 10">
            <ListBox x:Name="lbArtikelen"
                     Width="200px"
                     HorizontalAlignment="Left"
                     MouseEnter="lbArtikelen_MouseEnter">
                
            </ListBox>
            <TextBlock HorizontalAlignment="Right"
                       Margin="0, 0, 40, 0">Te betalen: €</TextBlock>
            <TextBlock HorizontalAlignment="Right"
                       x:Name="tbBetalen">0,00 </TextBlock>
        </Grid>

        <ProgressBar Grid.Row="1"
                     VerticalAlignment="Bottom"
                     HorizontalAlignment="Center"
                     Height="30px"
                     Width="200px"
                     Margin="0, 0, 0, 20"
                     Minimum="0"
                     Maximum="60"
                     x:Name="pbInactief"></ProgressBar>

        <Image Source="Assets/logo.png"
               Grid.Row="1"
               Grid.Column="1"
               Height="100px"
               Width="150px"
               VerticalAlignment="Bottom"
               HorizontalAlignment="Right"
               Margin="0, 0, 20, 20"></Image>
        
        <Button x:Name="btnVolgendeKlant"
                Click="btnVolgendeKlant_Click"
                Grid.Row="1"
                Grid.Column="1"
                Height="40px"
                Width="100px"
                VerticalAlignment="Bottom"
                HorizontalAlignment="Left"
                Margin="20, 0, 0, 20">
            Volgende klant
        </Button>
    </Grid>
</Window>

C#:

using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Text.RegularExpressions;
using System.Windows.Threading;

namespace DeFluitendeFietser
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        DispatcherTimer inactiveTimer = new DispatcherTimer();
        public MainWindow()
        {
            InitializeComponent();
            inactiveTimer.Interval = TimeSpan.FromSeconds(1);
            inactiveTimer.Tick += inactiveTimer_Tick;
            inactiveTimer.Start();
        }

        void inactiveTimer_Tick(object sender, EventArgs e)
        {
            pbInactief.Value++;

            if (pbInactief.Value == pbInactief.Maximum)
            {
                MessageBoxResult inactief = MessageBox.Show("U bent te lang inactief geweest. Begin opnieuw als u toch wilt bestellen.", "Waarschuwing", MessageBoxButton.OK, MessageBoxImage.Warning);
                switch(inactief)
                {
                    case MessageBoxResult.OK:
                        pbInactief.Value = 0;
                        lbArtikelen.Items.Clear();
                        return;
                }
            }
        }
        
        private void btnBestelArtikel_Click(object sender, RoutedEventArgs e)
        {
            pbInactief.Value = 0;

            Button delete = new Button();
            delete.Content = "X";

            if (cmbFietsen.SelectedItem == null && cmbVerzekeringen.SelectedItem == null && cmbServices.SelectedItem == null)
            {
                MessageBox.Show("Er moet iets geselecteerd worden om toe te kunnen voegen.");
                return;
            }
            if (cmbFietsen.SelectedItem != null && cmbVerzekeringen.SelectedItem == null && cmbServices.SelectedItem == null)
            {
                lbArtikelen.Items.Add(cmbFietsen.SelectedValue.ToString());
                cmbFietsen.SelectedItem = null;
                cmbVerzekeringen.SelectedItem = null;
                cmbServices.SelectedItem = null;
            }
            else if (cmbFietsen.SelectedItem == null && cmbVerzekeringen.SelectedItem != null && cmbServices.SelectedItem == null)
            {
                lbArtikelen.Items.Add(cmbVerzekeringen.SelectedValue.ToString());
                cmbFietsen.SelectedItem = null;
                cmbVerzekeringen.SelectedItem = null;
                cmbServices.SelectedItem = null;
            }
            else if (cmbFietsen.SelectedItem == null && cmbVerzekeringen.SelectedItem == null && cmbServices.SelectedItem != null)
            {
                lbArtikelen.Items.Add(cmbServices.SelectedValue.ToString());
                cmbFietsen.SelectedItem = null;
                cmbVerzekeringen.SelectedItem = null;
                cmbServices.SelectedItem = null;
            }

            if(cmbFietsen.SelectedItem != null && cmbVerzekeringen != null || cmbServices != null)
            {
                MessageBox.Show("Je kan niet meerdere keuzes tegelijk invoeren, probeer opnieuw.");
                cmbFietsen.SelectedItem = null;
                cmbVerzekeringen.SelectedItem = null;
                cmbServices.SelectedItem = null;
                return;
            }
            else if(cmbVerzekeringen != null && cmbFietsen.SelectedItem != null || cmbServices.SelectedItem != null)
            {
                MessageBox.Show("Je kan niet meerdere keuzes tegelijk invoeren, probeer opnieuw.");
                cmbFietsen.SelectedItem = null;
                cmbVerzekeringen.SelectedItem = null;
                cmbServices.SelectedItem = null;
                return;
            }
            else if (cmbServices.SelectedItem != null && cmbFietsen.SelectedItem != null || cmbVerzekeringen.SelectedItem != null)
            {
                MessageBox.Show("Je kan niet meerdere keuzes tegelijk invoeren, probeer opnieuw.");
                cmbFietsen.SelectedItem = null;
                cmbVerzekeringen.SelectedItem = null;
                cmbServices.SelectedItem = null;
                return;
            }
        }

        private void cmbFietsen_MouseEnter(object sender, MouseEventArgs e)
        {
            pbInactief.Value = 0;
        }

        private void cmbVerzekeringen_MouseEnter(object sender, MouseEventArgs e)
        {
            pbInactief.Value = 0;
        }

        private void cmbServices_MouseEnter(object sender, MouseEventArgs e)
        {
            pbInactief.Value = 0;
        }

        private void lbArtikelen_MouseEnter(object sender, MouseEventArgs e)
        {
            pbInactief.Value = 0;
        }

        private void cmbAantalDagen_MouseEnter(object sender, MouseEventArgs e)
        {
            pbInactief.Value = 0;
        }

        private void btnBestelArtikel_MouseEnter(object sender, MouseEventArgs e)
        {
            pbInactief.Value = 0;
        }

        private void btnVolgendeKlant_Click(object sender, RoutedEventArgs e)
        {
            if (lbArtikelen.Items.IsEmpty)
            {
                MessageBox.Show("U heeft niks besteld.");
            }
            else
            {
                MessageBoxResult volgendeKlant = MessageBox.Show("Heeft u betaald?", "Waarschuwing", MessageBoxButton.YesNo);
                if (volgendeKlant == MessageBoxResult.Yes)
                {
                    MessageBox.Show("Bedankt voor uw bestelling! Wij zien u graag een volgende keer!");
                    lbArtikelen.Items.Clear();
                }
                else if(volgendeKlant == MessageBoxResult.No)
                {
                    MessageBox.Show("Controleer uw bestelling, en reken af.");
                }
            }
        }
    }
}

could be worse: I have read your question, and don't even see System.Windows.Controls.StackPanel, or a ListBox aka [mcve] — ASh, Apr 21 '22 at 13:58
I can paste the code, to see if you can reproduce it if you want to. — Riload, Apr 21 '22 at 14:05
Share your code please. `System.Windows.Controls.StackPanel` in the ListBox means, that your binding may be not correct — Demetrius Axenowski, Apr 21 '22 at 14:26
I have added the code to the post in an edit, maybe this will help out. — Riload, Apr 21 '22 at 14:39

Demetrius Axenowski · Answer 1 · 2022-04-21T16:12:04.997

What you are doing is defining the Values in UI. There is not realy a SelectedValue. SelectedValue is the UI element.

What you should do is to look at MVVM Pattern. How to Bind Data, how to Style with DataTemplates and so on.

If you don't want to do that, you can try to bring the Delete button outside the ComboBox and delete selected item. But I'm not sure it will work

Edit: Here is the example of ComboBox with Delete Button

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        xmlns:system="clr-namespace:System;assembly=System.Runtime"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <DataTemplate DataType="{x:Type local:Article}" >
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}"/>
                <TextBlock Text="{Binding Price, StringFormat={}{0:c}}"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <StackPanel Orientation="Vertical">
            <ComboBox x:Name="MyComboBox" ItemsSource="{Binding Articles}" VerticalAlignment="Top">
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <ContentControl Content="{Binding}"/>
                            <Button Content="Delete" 
                                    Command="{Binding ElementName=MyComboBox, Path=DataContext.DeleteArticle}"
                                    CommandParameter="{Binding}"/>
                        </StackPanel>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
            <ListBox ItemsSource="{Binding Articles}"/>

        </StackPanel>
    </Grid>
</Window>

And the code behind (I have used Microsoft.Toolkit.Mvvm as NuGet library)

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Input;
using Microsoft.Toolkit.Mvvm.ComponentModel;
using Microsoft.Toolkit.Mvvm.Input;

namespace WpfApp1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var articles = new List<Article>()
            {
                new Article("Apple", 7.2m),
                new Article("Radio", 199.8m),
                new Article("Car", 19999m),
                new Article("Something", 5.33m),
                new Article("Other", 33.02m),
            };
            this.DataContext = new MainViewModel(articles);
        }
    }

    public class MainViewModel : ObservableObject
    {
        public MainViewModel(IEnumerable<Article> articles)
        {
            Articles = new ObservableCollection<Article>(articles);
            DeleteArticle = new RelayCommand<Article>(article =>
            {
                Articles.Remove(article!);
            });
        }

        public ObservableCollection<Article> Articles { get; set; }

        public ICommand DeleteArticle { get; set; }
    }

    public class Article
    {
        public Article(string name, decimal price)
        {
            Name = name;
            Price = price;
        }
        public string Name { get; }
        public decimal Price { get; }
    }
}

I could try this, but the problem is, for the assignment it needs to be inside of the ListBoxItem that is added when pressing the button. Thanks for the info though, I'll see what I can do with this :) — Riload, Apr 21 '22 at 15:38
You have to separate `Data` and `UI`. This is how it works. I will try to give you a sample — Demetrius Axenowski, Apr 21 '22 at 15:40
@Riload please let me know if this helped you solving the problem. If so, please mark this as correct answer — Demetrius Axenowski, May 02 '22 at 07:36

StackPanel in ComboBox to ListBoxItem

1 Answers1