在MVVM模式下，ListBox的Command绑定

最近在学习MVVM模式，我想将ListBox的ItemTemplate中的按钮的Click事件改为用DelegateCommand实现，发现无从下手了：

View的内容：

<Grid x:Name="LayoutRoot">
        <ListBox x:Name="listBox1" Background="{x:Null}" ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemsSource="{Binding ButtonModelList}" VerticalAlignment="Center">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding Content}" Click=“Button_Click”/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

ViewModel的内容：

 private List<ToolButton1Model> buttonModelList;

        public List<ToolButton1Model> ButtonModelList
        {
            get { return buttonModelList; }
            set { buttonModelList = value; this.RaisePropertyChanged("ButtonModelList"); }
        }


        public DelegateCommand CallEachCommand { get; set; }

        public ToolUserControlViewModel()
        {
        }

        public ToolUserControlViewModel(string name)
        {  
            CallEachCommand = new DelegateCommandnew Action(CallEachHandle));
            ButtonModelList = new List<ToolButton1Model>();
　　　　　　　ToolButton1Model bm = new ToolButton1Model()
{
Content = ”Button“};

            ButtonModelList.Add(bm);
　　　　 }

　　　　private void CallEachHandle(){}

Model的内容

class ToolButton1Model : NotificationObject
    {
private object content;

        public object Content
        {
            get { return content; }
            set { content = value; this.RaisePropertyChanged("Content"); }
        }
    }

 

 

如果直接将Click="Button_Click"换成Command=”{Binding CallEachCommand}“会报错，说找不到CallEachCommand，因为ListBox已经指定了ItemsSource绑定的是ButtonModelList，在ButtonModelList这个集合中当然是不存在CallEachCommand的了。那该怎么解决呢？

    其实很简单，只要把要绑定的命令也当成是一个属性就行，在Model多加一个命令属性，修改后的代码如下：

修改后的Model：

class ToolButton1Model : NotificationObject
    {

        private object content;

        public object Content
        {
            get { return content; }
            set { content = value; this.RaisePropertyChanged("Content"); }
        }


        private DelegateCommand buttonCommand;

        public DelegateCommand ButtonCommand
        {
            get { return buttonCommand; }
            set { buttonCommand = value; this.RaisePropertyChanged("ButtonCommand"); }
        }


    }

修改后的Views：[注意，是要绑定Model中的ButtonCommand属性，而不是直接绑定CallEachCommand]

<Grid x:Name="LayoutRoot">
        <ListBox x:Name="listBox1" Background="{x:Null}" ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemsSource="{Binding ButtonModelList}" VerticalAlignment="Center">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding Content}"  Command="{Binding ButtonCommand}" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

在ViewModel中，只要将ToolButtonModel的Button1Command赋值为CallEachCommand即可。

...
...
ToolButton1Model bm = new ToolButton1Model(){Content =  "string" , ButtonCommand=CallEachCommand};
ButtonModelList.Add(bm);

　...