Remplir une zone de texte avec une propriété avec Liaison MVVM

Question

J'essaie de comprendre comment fonctionne MVVM et que je veux commencer simplement.

J'ai créé un Model, un View et un ViewModel. J'ai accroché la vue à une fenêtre. cela fonctionne plus ou moins. dans la vue j'ai une zone de texte que je veux remplir avec la valeur d'une propriété. La zone de texte reste vide !?

C'est ce que j'ai: Modèle:

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"); 
       } 
      } 
     } 

    } 
} 

La vue:

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

Dans les 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(); 
     } 
    } 
} 

Le ViewModel

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

Je peux voir quelques problèmes avec votre code.

Vous remplissez un ObservableCollection local (à l'intérieur de votre méthode loadRegistratieOnderdelen()) avec des données, mais étant donné qu'il est local, il n'est pas membre de DataContext et n'est donc pas disponible pour la vue. Vous devez utiliser des propriétés publiques comme RegistratieOnderdelen que vous avez déjà déclaré dans votre RegistratieViewModel.

Ensuite, vous utilisez une ObservableCollection alors que vous souhaitez simplement utiliser une propriété de type String. Les collections sont utilisées lorsque vous souhaitez représenter des listes, par exemple dans un ListView ou un ItemsControl. Votre vue indique que vous souhaitez lier une seule valeur de texte afin qu'une propriété publique de type String ait plus de sens.

Best, Nico

Answer 2

Le DataContext est un RegistratieViewModel. Cette classe a une propriété RegistratieOnderdelen qui renvoie une collection d'objets Registratie.

Vous pouvez lier à la propriété ProgrammaNaam d'un tel élément, mais vous devez spécifier quel élément se lier à, par exemple le premier:

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