WPF MVVM 模型中的按钮命令

本文关键字：按钮 命令 MVVM 模型 WPF | 更新日期: 2023-09-27 18:37:09

我的主窗口中有两个用户控件，UserControl2有两个列表框，Texbox和Buttons.当我在文本框中编写一些文本并按按钮时，它应该添加到ListBox中。有人可以帮我编写代码吗，我是WPF和MVVM的新手

这是我的 XAML 代码

<Window x:Class="Wpf_MVVM.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Wpf_MVVM" 
    Title="Voxer" Background="SlateGray" Height="420" Width="550">

<Grid>
    <local:UserControl1 HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <local:UserControl2 HorizontalAlignment="Left" VerticalAlignment="Top" Margin="150,29,0,0"/>


</Grid>

这是我的用户控件1.Xaml代码

<UserControl x:Class="Wpf_MVVM.UserControl1"
         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" 
         mc:Ignorable="d" 
         Height="Auto" Width="Auto">
<Grid>
    <ListBox HorizontalAlignment="Left" Height="310" VerticalAlignment="Top" Width="150" Margin="0,40,0,0">
        <ListBoxItem>Name 1</ListBoxItem>
        <ListBoxItem>Name 2</ListBoxItem>
        <ListBoxItem>Name 3</ListBoxItem>
        <ListBoxItem>Name 4</ListBoxItem>
        <ListBoxItem>Name 5</ListBoxItem>
        <ListBoxItem>Name 6</ListBoxItem>
    </ListBox>
    <Label Content="Conversations" HorizontalAlignment="Left" VerticalAlignment="Top"  Height="40" Width="150" FontSize="20" Background="SkyBlue"/>
    <Button Content="Create New Chat" Height="30" HorizontalAlignment="Left" Margin="0,350,0,0" VerticalAlignment="Top" Width="150"/>
</Grid>

这是我的用户控制2.Xaml代码

<UserControl x:Class="Wpf_MVVM.UserControl2"
         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" 
         mc:Ignorable="d" 
         Height="Auto" Width="390">
<Grid>
    <ListBox Name="listbox1" HorizontalAlignment="Left" Height="310" VerticalAlignment="Top" Width="180" Margin="10,0,0,0"/>
    <ListBox Name="listbox2"  HorizontalAlignment="Left" Height="310" Margin="200,0,0,0" VerticalAlignment="Top" Width="180"/>
    <TextBox Name="tb1" HorizontalAlignment="Left" Height="40" Margin="200,310,0,0" TextWrapping="NoWrap" Text="" VerticalAlignment="Top" Width="130"/>
    <TextBox Name="tb2" Height="40" TextWrapping="NoWrap" Text="" Margin="10,310,245,0"/>
    <Button Command="{Binding ButtonCommand}" Name="btn1" Content="Send" Height="40" HorizontalAlignment="Left" Margin="330,310,0,0" VerticalAlignment="Top" Width="50" />
    <Button Command="{Binding SendControlCommand}" Name="btn2" Content="Send" Height="40" Margin="145,310,200,0"/>
</Grid>

WPF MVVM 模型中的按钮命令

在我看来，你在黑暗中刺伤......你说你正在使用MVVM和WPF，但我认为你应该先修改你对这些主题的背景......

基本上，您的视图应绑定到ViewModel上的属性。

通常，你需要一个可观察的集合，该集合将成为列表框的源，并且 XAML 上的 执行类似操作

<ListBox Name="listbox_name"  ... ItemSource="{Binding ListPropertyName}/>

（我假设您有一个名为 ListPropertyName 的 ObservableCollection 类型的属性，显然您会根据需要将其命名为其他名称）

然后，命令。一旦你拥有：

<Button Command="{Binding ButtonCommand}" Name="btn1" Content="Send"... />

这意味着您需要在视图模型代码中具有一个名为 ButtonCommand 的 ICommand 属性：

public ICommand ButtonCommand{ get; private set; }

在构造函数中，您可以编写：

ButtonCommand= new RelayCommand<object>(Execute_YourMethodHere);

现在，当您点击按钮时，您的Execute_YourMethodHere运行。

这是您可能希望将对象添加到ObservableCollection的地方（假设您使用了INotifyPropertyChanged，因此视图将知道您的集合已更改），仅此而已......

你忘了DataContext吗？在代码后面，您应该添加以下行： this.DataContext = new YourViewModel();

你能展示你的命令方法吗？

您忘记将 ItemsSource 绑定到第二个 xaml 中的列表。如果要使用 MVVM 以正确的方式执行此操作，则需要视图模型中的两个 ItemsSource 属性、两个中继命令和两个字符串属性。在命令操作中，只需将适当的文本添加到适当列表的 ItemsSource 中即可。

您还需要了解INotifyPropertyChanged，ObservableCollection和ICommand才能使其正常工作。

相关文章：