Mvvm Light에서 TextBox의 값을 viewmodel에 바인딩하는 방법

Question

MVVM Light를 사용하는 샘플 프로젝트에서 작업 중이며 TextBox Text 값을 바인딩하고 View에서 전달하는 방법이 궁금합니다. 보기 모델에. 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

좋아요.보기와 ViewModel 사이의 연결을 만들어야합니다. 기본적으로 뷰의 DataContext를 ViewModel로 설정하십시오.

두 가지 방법으로 표시 할 수 있습니다. 1)보기의 코드 숨김에서 뷰 모델 (ViewModel vm = new ViewModel())의 인스턴스를 만든 다음 할당 할 수 있습니다. with this.DataContext = vm; 2) XAML 데이터 템플릿을 사용할 수 있습니다. Home이 view이고 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을 연결하는 방법입니다. 페이지의 코드 뒤에이 작업을 수행하는 것이 좋습니다. 상술 한 바와 같이, 페이지의 데이터 컨텍스트가 설정되면

는

public MyViewModel ModelView; 

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

, 설정되지 않은 경우, 제어는 데이터 컨텍스트, 는 데이터 컨텍스트가 설정 될 때까지 부모 (들)의 비주얼 트리 걸어; 궁극적 인 부모 인 페이지에서 수행됩니다.

나는 자신의 MVVM (모든 MVVM의 빛 않습니다) 방법 롤 당신에게 보여줄 수있는 내 블로그 기사 Xaml: ViewModel Main Page Instantiation and Loading Strategy for Easier Binding.에보다 강력한 예제를 제공합니다.

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.