如何在Mvvm Light中将TextBox中的值绑定到视图模型

本文关键字：绑定 模型 视图 TextBox Mvvm Light 中将 | 更新日期: 2023-09-27 18:29:14

我一直在使用MVVM Light进行一个示例项目，我想知道如何绑定TextBox Text值，并将其从视图传递到视图模型。这是我第一次使用MVVM Light，所以我是新手。

基本上，用户会在文本框名称中输入项目名称，然后单击"新建项目"按钮，该按钮将生成一个以键入项目名称文本框的内容命名的数据库。

视图：

<UserControl x:Class="Sample.Views.NavigationTree.NewProjectView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:mui="http://firstfloorsoftware.com/ModernUI"
        xmlns:ignore="http://www.ignore.com"
        mc:Ignorable="d ignore"
        DataContext="{Binding NewProjectView, Source={StaticResource Locator}}">
    <Grid>
        <StackPanel Orientation="Vertical" HorizontalAlignment="Left">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <mui:BBCodeBlock BBCode="Project Name"/>
                <Label Width="10"/>
                <TextBox Text="{Binding ProjName, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Width="120"/>
            </StackPanel>
            <Label Height="10"/>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <Label Width="85"/>
                <Button Content="New Project" Margin="0,0,3,0" Command="{Binding AddProjectCommand}" IsEnabled="{Binding IsUserAdmin}" Grid.Column="2" Grid.Row="0"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>

ViewModel:

using Sample.Model.Database;
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using System.Text;
namespace Sample.ViewModel
{
    /// <summary>
    /// This class contains properties that a View can data bind to.
    /// <para>
    /// See http://www.galasoft.ch/mvvm
    /// </para>
    /// </summary>
    public class NewProjectViewModel : ViewModelBase
    {
        private string _projName;
        //Binding AddProjectCommand
        public RelayCommand AddProjectCommand { get; set; }

        private string consoleText { get; set; }
        private StringBuilder consoleBuilder = new StringBuilder(360);
        /// <summary>
        /// Initializes a new instance of the NewProjectViewModel class.
        /// </summary>
        public NewProjectViewModel()
        {
            this.AddProjectCommand = new RelayCommand(() => AddProject());
        }
        public void AddProject()
        {
            ProjectDbInteraction.CreateProjectDb(_projName);
        }

        public string ProjName
        {
            get { return _projName; }
            set
            {
                if (value != _projName)
                {
                    _projName = value;
                    RaisePropertyChanged("ProjName");
                }
            }
        }
        public string ConsoleText
        {
            get { return consoleText; }
            set
            {
                consoleBuilder.Append(value);
                consoleText = consoleBuilder.ToString();
                RaisePropertyChanged("ConsoleText");
            }
        }
    }
}

那么，我如何将ProjName绑定传递到视图和从视图传递到视图MOdel呢？

如何在Mvvm Light中将TextBox中的值绑定到视图模型

看起来不错，您只需要在View和ViewModel之间创建一个关联。基本上，将视图的DataContext设置为ViewModel。

你可以用几种方法做到这一点，我将展示两种：1） 在视图的代码隐藏中，您可以创建视图模型的实例（viewmodel vm=new viewmodel（）），然后用它进行赋值。DataContext=vm；2） 您可以XAML数据模板。类似这样的东西，Home是一个视图，HomeVM是视图模型。

在中

<Window
.
.
.
    xmlns:HomeView="clr-namespace:Bill.Views"
    xmlns:HomeVM="clr-namespace:Bill.ViewModels"
>
    <Window.Resources>
        <!--Home User Control and View Model-->
            <DataTemplate DataType="{x:Type HomeVM:HomeVM}">
                <HomeView:Home/>
            </DataTemplate>
    </Window.Resources>

第一种似乎更适合我的正常需求。。。

您的文本框绑定看起来是正确的。没有显示的是如何将ViewModel与页面的数据上下文相关联，该数据上下文最终可以由文本框使用。我建议您在页面后面的代码中执行此操作。

public MyViewModel ModelView;
public MainWindow()
{
    InitializeComponent();
    DataContext = ModelView = new MyViewModel ();
}

一旦页面的datacontext设置如上所示，控件datacontext（如果未设置）将向上遍历其父级的可视化树，直到设置了datacontext；这是在页面上完成的，最终的父级。

我在我的博客文章Xaml:ViewModel主页实例化和加载策略中提供了一个更健壮的例子，以便于绑定。它可以向您展示如何滚动您自己的MVVM（这就是MVVM light所做的一切）。

从用户键入ProjName的文本框的绑定中删除"Mode=OneWay"，这将允许您的属性接收值。或者选择其他模式中的一种来执行您想要的操作。

OneWay: use this when you want the data in view model to modify the value in your GUI
TwoWay: use this if you want to allow view model to modify the GUI value, or if you want the GUI value changed by the user to be reflected in view model
OneTime: your view model can set the value that is shown in your GUI once, and it will never change again. Only do this if you know you're not going to need to change the value in your view model.
OneWayToSource: This is the opposite of one way -- GUI value affects view model value.
相关文章：