如何使用mvvm显示列表框wpf中所选项目的数据?

时间:2014-02-10 09:27:54

标签: c# wpf xaml mvvm listbox

我正在WPF上做一些练习MVVM表单 到目前为止,我刚刚完成了从数组加载数据的普通Listbox,当索引发生变化时,它会将其他数据加载到表单上的文本块中

我想改变这个例子。我希望用户在列表框中选择一个字段,然后单击一个按钮以显示所有其他数据

所以,表单是(usercontrol): enter image description here 当有人选择Cena时,他们会看到右边的数据填写完毕。

.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是否应为空,或者是否有内容。

我的ViewModel代码是:

#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

我有一种感觉我的选择是不正确的代码。在ViewModel代码上还有:

 #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,点击show,文本块将填充数组中的数据。

My 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,所以我的代码后面没有代码。

退出按钮有效,这就是我知道命令可以工作的原因。

修改

我现在改变了一些代码。首先,show按钮位于具有datacontext设置的网格中。那被拿走了。接下来,两个按钮共享相同的命令(ButtonCommand),但两者都有不同的参数。退出是“退出”,选择“海”

在ViewModel代码中,添加并更改了以下内容

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

所以,它现在有效。

enter image description here

1 个答案:

答案 0 :(得分:1)

你真的有几个选择:

(1)拥有绑定到SelectedItem的{​​{1}}的VM属性,然后您不需要使用按钮命令发送任何参数...您只需执行您当前ListBox上的ChooseCommand(由您知道的VM)。

(2)传递SelectedItem作为命令的参数,就像这样......

SelectedItem

请注意,您需要为ListBox命名(x:Name =“MyListBox”),并且CommandParameter指的是ListBox及其SelectedItem属性。

相关问题