如何將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.