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.");
                }
            }
        }
    }
}

Answer 1

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