title: How to show data from selected item in listbox wpf using mvvm?
body: <p>I am just doing some practice on WPF &amp; MVVM forms
  So far, I have just completed the normal Listbox with data loaded from an array, that when the index changes, it loads other data into textblocks on the form</p>
  
  <p>I would like to change this example however. I want the user to select a field in the listbox, then click a button to display all the other data</p>
  
  <p>So, the form is (usercontrol):
  <img src="https://i.stack.imgur.com/DwpeV.png" alt="enter image description here">
  And when someone selects, say Cena, they will see the data on the right filled out.</p>
  
  <p>My code for the .xaml is:</p>
  
  <pre><code>&lt;UserControl x:Class="SuperstarsRoster.RosterView"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
           xmlns:local="clr-namespace:SuperstarsRoster"
           xmlns:WpfToolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
           mc:Ignorable="d" 
           d:DesignHeight="300" d:DesignWidth="600"&gt;
  
  &lt;UserControl.DataContext&gt;
      &lt;local:RosterViewModel/&gt;
  &lt;/UserControl.DataContext&gt;
  &lt;Grid x:Name="LayoutRoot" Background="White" &gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="250"/&gt;
          &lt;ColumnDefinition Width="*"/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
      &lt;!--SelectedItem="{Binding SelectedPerson}"--&gt;
      &lt;ListBox Grid.Column="0" Margin="0"
                ItemsSource="{Binding RosterList}"
                DisplayMemberPath="Name"
                Name="lstRoster"
                Height="250"
                VerticalAlignment="Top"/&gt;
      &lt;Button Content="Exit" Height="23" HorizontalAlignment="Left" VerticalAlignment="Bottom" Name="btnExit" Width="150" Command="{Binding ButtonCommand}" CommandParameter="Hai" /&gt;
      &lt;Grid x:Name="PersonDetails" Grid.Column="1" DataContext="{Binding SelectedPerson}" Margin="5"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="100"/&gt;
              &lt;ColumnDefinition Width="150"/&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="30"/&gt;
              &lt;RowDefinition Height="20"/&gt;
              &lt;RowDefinition Height="20"/&gt;
              &lt;RowDefinition Height="20"/&gt;
              &lt;RowDefinition Height="20"/&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="Person Details" FontSize="15"/&gt;
  
          &lt;TextBlock Grid.Row="1" Grid.Column="0" Text="Name"/&gt;
          &lt;TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Name,Mode=TwoWay}"/&gt;
  
          &lt;TextBlock Grid.Row="2" Grid.Column="0" Text="Brand"/&gt;
          &lt;TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Brand,Mode=TwoWay}"/&gt;
  
          &lt;TextBlock Grid.Row="3" Grid.Column="0" Text="Type"/&gt;
          &lt;TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding Type,Mode=TwoWay}"/&gt;
  
          &lt;Button Grid.Row="4" Content="Choose" Height="23" HorizontalAlignment="Left" VerticalAlignment="Bottom" Name="btnChoose" Width="90" Command="{Binding ChooseCommand}" CommandParameter="{Binding ElementName=lstRoster,Path=SelectedPerson}" /&gt;
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p>my problem is the Show button:</p>
  
  <pre><code>&lt;Button Grid.Row="4" Content="Choose" Height="23" HorizontalAlignment="Left" VerticalAlignment="Bottom" Name="btnChoose" Width="90" Command="{Binding ChooseCommand}" CommandParameter="{Binding ElementName=lstRoster,Path=SelectedPerson}" /&gt;
  </code></pre>
  
  <p>I don't know what to do here. I don't know if the CommandParameters should be empty, or have something in it.</p>
  
  <p>My ViewModel code is:</p>
  
  <pre><code>#region Show Button
  
      private ICommand m_ShowCommand;
      public ICommand ShowCommand
      {
          get
          {
              return m_ShowCommand;
          }
          set
          {
              m_ShowCommand = value;
          }
      }
  
      public void Selected(object obj)
      {
          RaisePropertyChanged("SelectedPerson");
      }
  
      #endregion
  </code></pre>
  
  <p>I have a feeling my Selected is the incorrect piece of code. On the ViewModel code there is also:</p>
  
  <pre><code> #region Roster Details
  
      public ObservableCollection&lt;Roster&gt; rosterList;
      public Roster selectedPerson;
  
  
      public RosterViewModel()
      {
  
          ButtonCommand = new RelayCommand(new Action&lt;object&gt;(ShowMessage));
          ShowCommand = new RelayCommand(new Action&lt;object&gt;(Selected));
          rosterList = new ObservableCollection&lt;Roster&gt;()
          {
              new Roster(){Name="Batista", Brand="Smackdown!", Type="Heel"},
              new Roster(){Name="The Rock", Brand="RAW", Type="Face"},
              new Roster(){Name="John Cena", Brand="RAW", Type="Face"},
              new Roster(){Name="Randy Orton", Brand="Smackdown!", Type="Heel"}
          };
  
          RaisePropertyChanged("SelectedPerson");
      }
  
      #endregion
  </code></pre>
  
  <p>With the ShowCommand being the button event, but I don't know what to put here.</p>
  
  <p>Ideally, user selects Cena, clicks show, and the textblocks will fill with the data from the array.</p>
  
  <p>My RelayCommand class (the default for all button clicks) looks like so:</p>
  
  <pre><code>class RelayCommand : ICommand
  {
      private Action&lt;object&gt; _action;
  
      public RelayCommand(Action&lt;object&gt; action)
      {
          _action = action;
      }
  
      #region ICommand Members
  
      public bool CanExecute(object parameter)
      {
          return true;
      }
  
      public event EventHandler CanExecuteChanged;
  
      public void Execute(object parameter)
      {
          _action(parameter);
      }
  
      #endregion
  </code></pre>
  
  <p>Should there be something more here? Or in the ViewModel?</p>
  
  <p>I'm using MVVM, so there is no code in my code behind class.</p>
  
  <p>The Exit button works, that's why I know the commands will work.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I changed some of the code now. Firstly, the show button was sitting in a grid that had a datacontext setting. That was taken out. Next, both buttons share the same command (ButtonCommand), but both have different parameters. Exit is "Exit", and choose is "Hai"</p>
  
  <p>In the ViewModel code, the following was added and changed</p>
  
  <pre><code> public string Name { get; set; }
      public string Brand { get; set; }
      public string Type { get; set; }
  
      #region Button Work
      private ICommand m_ButtonCommand;
      public ICommand ButtonCommand
      {
          get
          {
              return m_ButtonCommand;
          }
          set
          {
              m_ButtonCommand = value;
          }
      }
  
      public void DoAction(object obj)
      {
          if (obj.ToString() == "Hai")
          {
              if (selectedPerson != null)
              {
                  this.Name = selectedPerson.Name;
                  this.Brand = selectedPerson.Brand;
                  this.Type = selectedPerson.Type;
                  RaisePropertyChanged(null);
              }                
          }
          if (obj.ToString() == "Exit")
          {
              MessageBox.Show("This program will now close");
              Environment.Exit(0);
          }
      }
      #endregion
  </code></pre>
  
  <p>This way, data is set and I can populate the fields when wanted.</p>
  
  <p>Along with initializing it first</p>
  
  <pre><code> public RosterViewModel()
      {
          ButtonCommand = new RelayCommand(new Action&lt;object&gt;(DoAction));
  </code></pre>
  
  <p>So, it works now.</p>
  
  <p><img src="https://i.stack.imgur.com/mERk9.png" alt="enter image description here"></p>