MVVM：将带有集合的命令绑定到 WPF 中的列表框

Question

我有一个列表框，其中在其项目模板中有不同的控件，如按钮、文本框等，我有一个与列表框绑定的集合，它工作正常，但现在我想将我的代码移动到 MVVM，我在我的视图模型中为按钮的点击事件编写了一些命令，我​​如何将我的集合+我的命令绑定到列表框？因为命令不在集合中，这是我的列表框的数据模板

<DataTemplate x:Key="listItemTemplate">
    <Grid ShowGridLines="False">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <DockPanel Grid.Row="0" Name="commentsPanel" LastChildFill="False" MinWidth="350">
            <TextBlock  Name="txtUserName" IsEnabled="False" Text="{Binding UserName}" 
                      Width="Auto" DockPanel.Dock="Left" Foreground="GhostWhite" Margin="0,6,0,0"></TextBlock>

            <TextBlock Name="txtDate" IsEnabled="False" Text="{Binding CreateDt}"
                      Width="Auto" DockPanel.Dock="Left" Foreground="Green" Margin="4,6,0,0"></TextBlock>

            <StackPanel DockPanel.Dock="Right" Orientation="Horizontal" Width="{Binding EditPanelWidth}" x:Name="EditDeletePanel" Visibility="{Binding ButtonVisibilityText }">
                <Button Name="btnEdit" Content="Edit" Width="Auto" DockPanel.Dock="Right" Height="20"
                  Click="btnEdit_Click_1" Margin="4,4,0,4" Foreground="GhostWhite" VerticalContentAlignment="Top" Visibility="{Binding ButtonVisibilityText}"></Button>

                <Button Name="btnDelete" Content="Delete" Width="Auto" Height="20" VerticalContentAlignment="Top" DockPanel.Dock="Right" Visibility="{Binding ButtonVisibilityText}"
                Click="btnDelete_Click_1" Margin="4"></Button>

            </StackPanel>

            <StackPanel DockPanel.Dock="Right" Orientation="Horizontal" x:Name="SaveCancelPanel" Visibility="{Binding CancelSaveEnableText}">
                <Button Name="btnSave" Content="Save" Width="Auto" Height="20" DockPanel.Dock="Right" 
                Click="btnSave_Click_1" Margin="4"></Button>

                <Button Name="btnCancel" Content="Cancel" Height="20" Width="Auto" DockPanel.Dock="Right" 
                Click="btnCancel_Click_1" Margin="4"></Button>

            </StackPanel>
        </DockPanel>
        <dxe:TextEdit ShowBorder="False" Grid.Row="1" Name="txtComment" Width="Auto" Foreground="Red"  
                  TextWrapping="WrapWithOverflow" EditValue="{Binding Note}" IsEnabled="{Binding IsCommentTextEnable}">

        </dxe:TextEdit>
        <dxe:TextEdit Text=".............." Grid.Row="2" ShowBorder="False" IsEnabled="False">

        </dxe:TextEdit>
    </Grid>
</DataTemplate>

这是我想绑定到按钮的集合+我的命令，

public ICommand CancelCommand
{
    get { return _cancelCommand ?? (_cancelCommand = new CommandHandler(Cancel)); }
    set { _cancelCommand = value; }
}



public TList<ProgramNote> NotesCollection
{
    get { return _notes; }
    set
    {
        _notes = value;
        RaisePropertyChanged("NotesCollection");
    }
}

我知道我可以使用此代码将我的命令与按钮绑定

<Button Command={Binding CancelCommand}

但是这个命令不存在于集合中，我是 MVVM 的新手，请帮忙，可能是我缺少一些小东西来绑定我的命令，但我很困惑如何在我的集合中添加命令，所以我可以让它们出现在我的视野中

Answer 1

回答新用户的问题总是很困难，因为他们总是在问题中遗漏重要信息。但是，从您的问题文本来看，在我看来，您已将您的收藏属性设置为您的Window 的DataContext。如果您想将数据绑定到您的命令，那么您需要将DataContext 更改为包含集合和命令的对象...您的视图模型的实例：

DataContext = new YouViewModel();

现在DataContext 已设置为您的视图模型的一个实例，您可以像向我们展示的那样将数据绑定到它的属性：

<Button Command="{Binding CancelCommand}" />

...

<ListBox ItemsSource="{Binding NotesCollection}" />

---

啊，对不起，我误解了 - 所以你的 Button 是 inside ListBox。在这种情况下，您可以尝试以下方法：

<Button Command="{Binding DataContext.CancelCommand, 
    RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />

这应该超出集合的范围，查看Window 的DataContext，因此如果您已将视图模型的实例设置为Window.DataContext，这应该可以工作。

Answer 2

您可以通过找到合适的视图模型将命令绑定到数据模板按钮等

例子

 <DataTemplate x:Key="listItemTemplate">
    <Button Command="{Binding DataContext.CancelCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=LixtBox}}" 
            CommandParameter="{Binding}">
 </DataTemplate>

在示例中，我们将找到 LixtBox 的数据上下文，我假设它是您的视图模型，然后将绑定到命令并将当前对象作为命令参数传递以执行操作。

然后您将在执行命令时收到该项目作为参数

public void Execute(object parameter)
{
    ProgramNote note = parameter as ProgramNote;
    //your logic here, eg cancelling download etc.
}

Answer 3

感谢你们所有人，特别感谢@Sheridan 和@PushPraj，我现在可以做到，这是我有一个按钮的数据模板代码

<Button Name="btnCancel" Content="Cancel" Height="20" Width="Auto" DockPanel.Dock="Right" 
                        Command="{Binding DataContext.CancelCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=dxe:ListBoxEdit}}"
                               CommandParameter="{Binding}" Margin="4"></Button>

这是ListBox的代码

<dxe:ListBoxEdit Name="listComments" Grid.Row="1" ItemTemplate="{StaticResource  listItemTemplate}" 
                                                                                 ItemsSource="{Binding NotesCollection}"
                                                                     ScrollViewer.HorizontalScrollBarVisibility="Disabled"  ScrollViewer.VerticalScrollBarVisibility="Visible" >
                                                                </dxe:ListBoxEdit>

最后这是我的后端代码

listComments.DataContext = viewModel;