使用綁定MVVM填充文本框

Question

我試圖弄清楚MVVM是如何工作的，並希望從簡單開始。

我做了一個Model，一個View和一個ViewModel。我把視線連接到一個窗口。這或多或少起作用。 在視圖中，我有一個文本框，我想填寫一個屬性的值。文本框保持空白！？

這是我有： 型號：

namespace Qbox_0001.Model 
{ 
    public class RegistratieModel 
    { 
    } 

    public class Registratie : INotifyPropertyChanged 
    { 

     //Fields 
     private string programmaNaam; 

     //eventhandler die kijkt of een property wijzigt 
     public event PropertyChangedEventHandler PropertyChanged; 

     private void RaisePropertyChanged(string property) 
     { 
      if (PropertyChanged != null) 
      { 
       PropertyChanged(this, new PropertyChangedEventArgs(property)); 
      } 
     } 

     //Properies 
     public string ProgrammaNaam 
     { 
      get { return programmaNaam; } 
      set 
      { 
       if (programmaNaam != value) 
       { 
        programmaNaam = value; 
        RaisePropertyChanged("ProgrammaNaam"); 
       } 
      } 
     } 

    } 
} 

的觀點：

<UserControl x:Name="UserControlRegistratie" x:Class="Qbox_0001.Views.RegistratieView" 
      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" 
      xmlns:local="clr-namespace:Qbox_0001.Views" 
      mc:Ignorable="d" Height="1000" Width="860" MaxWidth="860" HorizontalContentAlignment="Left" VerticalContentAlignment="Top"> 
    <Grid x:Name="GridRegistratie"> 


     <Grid.RowDefinitions> 
      <RowDefinition x:Name="RowDef_Menu" Height="21*" MaxHeight="21" MinHeight="21"/> 
      <RowDefinition x:Name="RowDef_TabControl" Height="500*" MinHeight="500"/> 
      <RowDefinition x:Name="Rowdef_Bottom" Height="40*" MaxHeight="40" MinHeight="40"/> 
     </Grid.RowDefinitions> 

     <Grid x:Name="Grid_Registratie_WorkArea" Grid.Row="1"> 

      <TabControl x:Name="TabControl_Registratie"> 
       <TabItem Header="Registratie"> 
        <Grid x:Name="Grid_Tab_Registratie"> 
         <Border> 
          <Grid> 
           <Grid.RowDefinitions> 
            <RowDefinition x:Name="GridRowDef_Algemeen" MinHeight="68" Height="68*" MaxHeight="68"/> 
            <RowDefinition x:Name="GridRowDef_Locatie" MinHeight="120" Height="120*" MaxHeight="120"/> 
            <RowDefinition x:Name="GridRowDef_AantalDagen" MinHeight="105" Height="105*" MaxHeight="105"/> 
            <RowDefinition x:Name="GridRowDef_MaxDagen" MinHeight="105" Height="105*" MaxHeight="105"/> 
            <RowDefinition x:Name="GridRowDef_Lokaal" MinHeight="100" Height="100*" MaxHeight="100"/> 
            <RowDefinition x:Name="GridRowDef_LicBestand" Height="150*" MaxHeight="150" MinHeight="150"/> 
           </Grid.RowDefinitions> 

           <GroupBox x:Name="GroupBox_algemeen" Header="Algemeen" Margin="10,4,10,3"> 
            <Grid> 
             <Label x:Name="Label_Klant" Content="Klant:" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Padding="0,5,5,5"/> 
             <Label x:Name="Label_Programma" Content="Programma:" HorizontalAlignment="Left" Margin="356,10,0,0" VerticalAlignment="Top"/> 
             <Label x:Name="Label_Versie" Content="Versie:" HorizontalAlignment="Left" Margin="645,10,0,0" VerticalAlignment="Top"/> 
             <TextBox x:Name="textBox_KlantNaam" HorizontalAlignment="Left" Height="23" Margin="49,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="288"/> 

             <!-- the textbox keeps empty --> 
             <TextBox x:Name="TextBox_ProgrammaNaam" Text="{Binding ElementName=RegistratieViewModel, Path=ProgrammaNaam, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Left" Height="23" Margin="431,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="190" IsEnabled="False" /> 


             <TextBox x:Name="TextBox_Versie" HorizontalAlignment="Left" Height="23" Margin="695,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" IsEnabled="False" /> 

            </Grid> 
           </GroupBox> 

          </Grid> 
         </Border> 
        </Grid> 
       </TabItem> 
       <TabItem Header="Licentie(s)"> 
        <Grid x:Name="Grid_Tab_Licentie" Background="#FFE5E5E5"/> 
       </TabItem> 
      </TabControl> 
     </Grid> 

    </Grid> 
</UserControl> 

在View.cs：

namespace Qbox_0001.Views 
{ 
    /// <summary> 
    /// Interaction logic for RegistratieView.xaml 
    /// </summary> 
    public partial class RegistratieView : UserControl 
    { 
     public RegistratieView() 
     { 
      InitializeComponent(); 
      this.DataContext = new Qbox_0001.ViewModel.RegistratieViewModel(); 
     } 
    } 
} 

視圖模型

using Qbox_0001.Model;     // 
using System.Collections.ObjectModel; // 


namespace Qbox_0001.ViewModel 
{ 
    public class RegistratieViewModel 
    { 
     public RegistratieViewModel() 
     { 
      loadRegistratieOnderdelen(); 
     } 

     public ObservableCollection<Registratie> RegistratieOnderdelen //Registratie = "public class Registratie : INotifyPropertyChanged" van de Model 
     { 
      get; 
      set; 
     } 

     public void loadRegistratieOnderdelen() 
     { 
      ObservableCollection<Registratie> regOnderdelen = new ObservableCollection<Registratie>(); 

      regOnderdelen.Add(new Registratie { ProgrammaNaam = "Test" }); 

     } 
    } 
} 

Answer 1

我可以看到你的代碼有幾個問題。

您正在使用數據填充本地ObservableCollection（在您的loadRegistratieOnderdelen（）方法中），但由於其本地，它不是DataContext的成員，因此無法用於View。您必須使用公開屬性，例如RegistratieOnderdelen，您已在RegistratieViewModel中聲明瞭該屬性。

接下來，您正在使用ObservableCollection，而您可能只是想使用String類型的屬性。當您想要表示列表時使用集合，例如在ListView或ItemsControl中。您的視圖表明您想要綁定單個文本值，因此String類型的公共屬性更有意義。

最佳，尼科

Answer 2

DataContext的是RegistratieViewModel。該類有一個RegistratieOnderdelen屬性，該屬性返回Registratie對象的集合。

你可以綁定到一個這樣的項目的ProgrammaNaam財產，但你需要指定要綁定到的項目，例如第一個：

<TextBox x:Name="TextBox_ProgrammaNaam" Text="{Binding Path=RegistratieOnderdelen[0].ProgrammaNaam, UpdateSourceTrigger=PropertyChanged}" ... />