Get the value of a combo box with text block

Question

I have a combo box of patterns for a snake's color and I want to know which pattern the user chose,I added pictures to show the available patterns,but when I do pattern=combobox2.Text; It doesn't show me the text i'm looking for.

<ComboBox Name="ComboBox2" FontWeight="Bold" FontSize="15" Canvas.Left="320" Canvas.Top="222" Width="135" Height="24">
        <ComboBoxItem  
         Name="Pattern1" FontFamily="Verdana" FontSize="12" FontWeight="Bold">
            <StackPanel Orientation="Horizontal">
                <Image Source="Pics/snakepattern.jpg" Height="12" Width="19"></Image>
                <TextBlock Text=" Pattern1"></TextBlock>
            </StackPanel>
        </ComboBoxItem>
        <ComboBoxItem
        Name="Pattern2" FontFamily="Verdana" FontSize="12" FontWeight="Bold">
            <StackPanel Orientation="Horizontal">
                <Image Source="Pics/snakepattern2.jpg" Height="14" Width="20"></Image>
                <TextBlock Text=" Pattern2"></TextBlock>
            </StackPanel>
        </ComboBoxItem>
        <ComboBoxItem  
        Name="Pattern3" FontFamily="Verdana" FontSize="12" FontWeight="Bold">
            <StackPanel Orientation="Horizontal" Height="15">
                <Image Source="Pics/snakepattern3.jpg" Height="20"></Image>
                <TextBlock Text=" Pattern3"></TextBlock>
            </StackPanel>
        </ComboBoxItem>
        <ComboBoxItem 
        Name="Pattern4" FontFamily="Verdana" FontSize="12" FontWeight="Bold">
            <StackPanel Orientation="Horizontal">
                <Image Source="Pics/snakepattern4.jpg" Height="13" Width="20"></Image>
                <TextBlock Text=" Pattern4"></TextBlock>
            </StackPanel>
        </ComboBoxItem>
        <ComboBoxItem 
        Name="Pattern5" FontFamily="Verdana" FontSize="12" FontWeight="Bold">
            <StackPanel Orientation="Horizontal">
                <Image Source="Pics/snakepattern5.png" Height="17" Width="23"></Image>
                <TextBlock Text=" Pattern5"></TextBlock>
            </StackPanel>
        </ComboBoxItem>
    </ComboBox>

I want it to show me the texts "Pattern1","Pattern2" (according to what the user chose) how do I do that in the c# code?

Answer 1

You should have a view model like this:

public class SnakePattern
{
    public string Name { get; set; }
    public ImageSource Image { get; set; }
}

public class ViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<SnakePattern> Patterns { get; }
        = new ObservableCollection<SnakePattern>();

    private SnakePattern selectedPattern;
    public SnakePattern SelectedPattern
    {
        get { return selectedPattern; }
        set
        {
            selectedPattern = value;
            PropertyChanged?.Invoke(this,
                new PropertyChangedEventArgs(nameof(SelectedPattern)));
        }
    }
}

and bind the ComboBox to it like this:

<ComboBox ItemsSource="{Binding Patterns}"
          SelectedItem="{Binding SelectedPattern}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Image}" Height="12" Width="19"/>
                <TextBlock Text="{Binding Name}"/>
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

Initialize it in the constructor of your MainWindow, and assign it to the MainWindow DataContext property like this:

public MainWindow()
{
    InitializeComponent();

    var vm = new ViewModel();
    vm.Patterns.Add(new SnakePattern
    {
        Name = "Pattern 1",
        Image = new BitmapImage(new Uri("pack://application:,,,/Pics/snakepattern1.jpg"))
    });
    ...
    vm.SelectedPattern = vm.Patterns[0];

    DataContext = vm;
}

To get the selected pattern, just access the DataContext (or keep the view model in a member variable):

var vm = (ViewModel)DataContext;
var selectedPattern = vm.SelectedPattern;