如何使用mvvm顯示列表框中選定項目的數據？

Question

我只是做對WPF &一些練習MVVM形成 到目前爲止，我剛剛完成了從一個數組加載數據的正常列表框，當指數的變化，它加載其他數據導入的TextBlocks表單上

不過，我想改變這個例子。我希望用戶選擇在列表框中的字段，然後點擊一個按鈕來顯示所有的其他數據

所以，形式是（用戶控件）： 當有人選擇，說以上的價格，他們會看到右側的數據填寫完畢。

我對的.xaml代碼：

<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"> 

<UserControl.DataContext> 
    <local:RosterViewModel/> 
</UserControl.DataContext> 
<Grid x:Name="LayoutRoot" Background="White" > 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="250"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <!--SelectedItem="{Binding SelectedPerson}"--> 
    <ListBox Grid.Column="0" Margin="0" 
       ItemsSource="{Binding RosterList}" 
       DisplayMemberPath="Name" 
       Name="lstRoster" 
       Height="250" 
       VerticalAlignment="Top"/> 
    <Button Content="Exit" Height="23" HorizontalAlignment="Left" VerticalAlignment="Bottom" Name="btnExit" Width="150" Command="{Binding ButtonCommand}" CommandParameter="Hai" /> 
    <Grid x:Name="PersonDetails" Grid.Column="1" DataContext="{Binding SelectedPerson}" Margin="5"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="100"/> 
      <ColumnDefinition Width="150"/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="30"/> 
      <RowDefinition Height="20"/> 
      <RowDefinition Height="20"/> 
      <RowDefinition Height="20"/> 
      <RowDefinition Height="20"/> 
     </Grid.RowDefinitions> 
     <TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="Person Details" FontSize="15"/> 

     <TextBlock Grid.Row="1" Grid.Column="0" Text="Name"/> 
     <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Name,Mode=TwoWay}"/> 

     <TextBlock Grid.Row="2" Grid.Column="0" Text="Brand"/> 
     <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Brand,Mode=TwoWay}"/> 

     <TextBlock Grid.Row="3" Grid.Column="0" Text="Type"/> 
     <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding Type,Mode=TwoWay}"/> 

     <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}" /> 
    </Grid> 
</Grid> 

我的問題是顯示按鈕：

<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}" /> 

我不知道這裏做什麼。我不知道CommandParameters是否應該是空的，或者是否有內容。

我的視圖模型的代碼是：

#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 

我有一種感覺，我的選擇是不正確的一段代碼。在視圖模型代碼還有：

#region Roster Details 

    public ObservableCollection<Roster> rosterList; 
    public Roster selectedPerson; 


    public RosterViewModel() 
    { 

     ButtonCommand = new RelayCommand(new Action<object>(ShowMessage)); 
     ShowCommand = new RelayCommand(new Action<object>(Selected)); 
     rosterList = new ObservableCollection<Roster>() 
     { 
      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 

隨着ShowCommand是按鈕事件，但我不知道要放什麼東西在這裏。

理想情況下，用戶選擇Cena，單擊顯示，文本塊將填充數組中的數據。

我RelayCommand類（默認爲所有按鈕點擊）看起來像這樣：

class RelayCommand : ICommand 
{ 
    private Action<object> _action; 

    public RelayCommand(Action<object> 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 

如果有更多的東西嗎？或者在ViewModel中？

我使用MVVM，所以在我的代碼背後沒有代碼。

退出按鈕的作品，這就是爲什麼我知道命令將工作。

編輯

我現在改了一些代碼。首先，顯示按鈕坐在具有datacontext設置的網格中。這被取出。接下來，兩個按鈕共享相同的命令（ButtonCommand），但兩者都有不同的參數。退出是「退出」，並選擇是「海」

在視圖模型代碼，以下是添加和更改

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 

這種方式，數據設置，並希望我能填充字段。

隨着初始化它首先

public RosterViewModel() 
    { 
     ButtonCommand = new RelayCommand(new Action<object>(DoAction)); 

所以，現在它工作。

Answer 1

你有一對夫婦的選擇，真正做到：

（1）有一個綁定到你的ListBox的SelectedItem虛擬機屬性，然後你不需要發送任何參數與你的按鈕命令...你可以在當前的SelectedItem上執行你的ChooseCommand（由你所知的VM）。

或

（2）傳入SelectedItem作爲你的命令參數，像這樣...

<Button Grid.Row="4" Content="Choose" Height="23" HorizontalAlignment="Left" 
    VerticalAlignment="Bottom" Name="btnChoose" Width="90" 
    Command="{Binding ChooseCommand}" 
    CommandParameter="{Binding ElementName=MyListBox,Path=SelectedItem}" /> 

注意，你需要給你的列表框的名稱（X：名稱=「MyListBox」），並且您的CommandParameter引用該ListBox及其SelectedItem屬性。