title: Display selected listbox items' data in wpf
body: <p>I'm in search of some help. I've created a very basic MVVM setup. My object is called VNode which has the properties Name,Age,Kids. What I want to happen is when the user selects VNodes on the left, it displays their more in depth data on the right as scene in the image below. I'm not sure how to go about doing this.</p>
  
  <p><strong>image 1: Current</strong></p>
  
  <p><a href="https://i.stack.imgur.com/B69TD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B69TD.png" alt="enter image description here"></a></p>
  
  <p><strong>Image 2: Goal</strong></p>
  
  <p><a href="https://i.stack.imgur.com/KR60q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KR60q.png" alt="enter image description here"></a></p>
  
  <p>If you don't feel like using the code below to recreate the window you can grab the project solution files from here: <a href="https://www.dropbox.com/s/k57eaaqi23u2tgz/WpfApplication1.zip?dl=0" rel="nofollow noreferrer">DropboxFiles</a></p>
  
  <p><strong>VNode.cs</strong></p>
  
  <pre><code>namespace WpfApplication1
  {
      public class VNode
      {
          public string Name { get; set; }
          public int Age { get; set; }
          public int Kids { get; set; }
      }
  }
  </code></pre>
  
  <p><strong>MainWindow.xaml</strong></p>
  
  <pre><code>&lt;Window x:Class="WpfApplication1.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:WpfApplication1"
          mc:Ignorable="d"
          Title="MainWindow" Height="350" Width="525"&gt;
  
      &lt;Window.DataContext&gt;
          &lt;local:MainViewModel/&gt;
      &lt;/Window.DataContext&gt;
      &lt;Grid&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="*" /&gt;
              &lt;ColumnDefinition Width="8" /&gt;
              &lt;ColumnDefinition Width="*" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
  
          &lt;ListBox Grid.Column="0" Background="AliceBlue" ItemsSource="{Binding VNodes}" SelectionMode="Extended"&gt;
              &lt;ListBox.ItemTemplate&gt;
                  &lt;DataTemplate&gt;
                      &lt;WrapPanel&gt;
                          &lt;TextBlock Text="Name: " /&gt;
                          &lt;TextBlock Text="{Binding Name}" FontWeight="Bold" /&gt;
                      &lt;/WrapPanel&gt;
                  &lt;/DataTemplate&gt;
              &lt;/ListBox.ItemTemplate&gt;
          &lt;/ListBox&gt;
  
          &lt;GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" /&gt;
  
          &lt;ListBox Grid.Column="2" Background="LightBlue" ItemsSource="{Binding VNodes}"&gt;
              &lt;ListBox.ItemTemplate&gt;
                  &lt;DataTemplate&gt;
                      &lt;WrapPanel&gt;
                          &lt;TextBlock Text="{Binding Name}" FontWeight="Bold" /&gt;
                          &lt;TextBlock Text=":" FontWeight="Bold" /&gt;
                          &lt;TextBlock Text=" age:"/&gt;
                          &lt;TextBlock Text="{Binding Age}" FontWeight="Bold" /&gt;
                          &lt;TextBlock Text=" kids:"/&gt;
                          &lt;TextBlock Text="{Binding Kids}" FontWeight="Bold" /&gt;
                      &lt;/WrapPanel&gt;
                  &lt;/DataTemplate&gt;
              &lt;/ListBox.ItemTemplate&gt;
          &lt;/ListBox&gt;
  
      &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p><strong>MainViewModel.cs</strong></p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Collections.ObjectModel;
  using System.Linq;
  using System.Text;
  using System.Threading.Tasks;
  
  namespace WpfApplication1
  {
      public class MainViewModel : ObservableObject
      {
          private ObservableCollection&lt;VNode&gt; _vnodes;
          public ObservableCollection&lt;VNode&gt; VNodes
          {
              get { return _vnodes; }
              set
              {
                  _vnodes = value;
                  NotifyPropertyChanged("VNodes");
              }
          }
  
          Random r = new Random();
  
          public MainViewModel()
          {
              //hard coded data for testing
              VNodes = new ObservableCollection&lt;VNode&gt;();
              List&lt;string&gt; names = new List&lt;string&gt;() { "Tammy", "Doug", "Jeff", "Greg", "Kris", "Mike", "Joey", "Leslie", "Emily","Tom" };
              List&lt;int&gt; ages = new List&lt;int&gt;() { 32, 24, 42, 57, 17, 73, 12, 8, 29, 31 };
  
              for (int i = 0; i &lt; 10; i++)
              {
                  VNode item = new VNode();
  
                  int x = r.Next(0,9);
                  item.Name = names[x];
                  item.Age = ages[x];
                  item.Kids = r.Next(1, 5);
                  VNodes.Add(item);
              }
          }
      }
  }
  </code></pre>
  
  <p><strong>ObservableObject.cs</strong></p>
  
  <pre><code>using System;
  using System.ComponentModel;
  using System.Runtime.CompilerServices;
  
  namespace WpfApplication1
  {
      public class ObservableObject : INotifyPropertyChanged
      {
          public event PropertyChangedEventHandler PropertyChanged;
  
          public void NotifyPropertyChanged([CallerMemberName] string propertyName = null)
          {
              PropertyChangedEventHandler handler = PropertyChanged;
              if (handler != null)
              {
                  handler(this, new PropertyChangedEventArgs(propertyName));
              }
          }
      }
  }
  </code></pre>
  
  <p><strong>UPDATED</strong>
  For the sake of example, how about demonstrating if the user just selects a single item in the ListBox on the right, it then displays that selected items more in-depth data on the right as shown in the image below?</p>
  
  <p><a href="https://i.stack.imgur.com/zl8aC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zl8aC.png" alt="enter image description here"></a></p>