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

Question

我一直在使用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> 

视图模型：

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结合并从视图向视图模型？

Answer 1

看起来不错，你只需要在View和ViewModel之间建立关联。基本上，将您的视图的DataContext设置为ViewModel。 1）在视图的代码隐藏中，您可以创建viewmodel的实例（ViewModel vm = new ViewModel（）），然后将其分配给它用this.DataContext = vm; 2）您可以使用XAML数据模板。像这样，Home是视图，HomeVM是viewmodel。

在

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

第一似乎对我的正常需要更灵活的

...

Answer 2

您的文本框绑定看起来正确。没有显示的是你如何将你的ViewModel关联到页面的datacontext，最终可以被该文本框使用。我建议你在页面后面的代码中这样做。

public MyViewModel ModelView; 

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

一旦页面的DataContext设置如上述所示，控制DataContext的，如果没有设置，走到视觉树其父（多个），直到一个DataContext已被设置;这是在页面上完成的，最终的父母。

我提供我的博客上的文章Xaml: ViewModel Main Page Instantiation and Loading Strategy for Easier Binding.一个更强大的例子可以告诉你自己MVVM 如何卷（这是所有MVVM光一样）。

Answer 3

从文本框的结合删除“模式=单向”里的用户类型ProjName，这将允许您的财产收到价值。或者选择其他模式之一来做你想做的事。

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.