I have a doubt; How to implement the MVVM pattern correctly?
I have a model; User, with the properties; Name, password.
In the ViewModel I create the full Users property in an observable collection
, here I inherit the bindablebase
with its InotifyPropertyChange
In the view
I do Binding
in two TextBox
; User.name and User.password.
But the change is not notified when writing in textbox
.
Where do I have to notify the changes in the Model or VisualModel
?
How should I do this correctly?
This is the code
Model
public class UsuarioModel
{
public string Nombre{get;set;}
public string Password { get; set; }
}
ViewModel
public DelegateCommand MouseLeftButtonDown { get;private set; }
public DelegateCommand Salir { get; private set; }
public DelegateCommand Login { get; private set; }
public DelegateCommand PasswordChanged {get;set;}
private UsuarioModel _usuario;
public UsuarioModel Usuario
{
get { return _usuario; }
set {SetProperty(ref _usuario, value); }
}
public LoginVM()
{
MouseLeftButtonDown = new DelegateCommand(MouseLeftButtonDownExecute,MouseLeftButtonDownCanExecute);
Salir = new DelegateCommand(SalirExecute, SalirCanExecute);
Login = new DelegateCommand(LoginExecute, LoginCanExecute);
PasswordChanged = new DelegateCommand(PasswordChangedExecute, PasswordChangedCanExecute);
Usuario = new UsuarioModel();
}
View
<Label Content="Usuario:" Grid.Row="0" FontSize="16" FontWeight="Bold" Foreground= "#FFFF5254" Margin="15,0,0,0"></Label>
<Border Grid.Row="1" Margin="15,0,15,0" Background="#FFDCD4D4" CornerRadius="10">
<TextBox Background="#FFDCD4D4" Margin="10,0,10,0" FontSize="15" Foreground="#FFA82020" BorderBrush="{x:Null}" SelectionBrush="{x:Null}" TabIndex="1" BorderThickness="0" Text="{Binding Usuario.Nombre,Mode=TwoWay}"/>
</Border>
<Label Content="Contraseña:" Grid.Row="2" FontSize="16" FontWeight="Bold" Foreground="#FFFF5254" Margin="15,0,0,0"></Label>
<Border Grid.Row="3" Background="#FFDCD4D4" Margin="15,0,15,0" CornerRadius="10">
<PasswordBox Margin="10,0,10,0" Background="#FFDCD4D4" FontSize="15" Foreground="#FFA82020" BorderBrush="{x:Null}" SelectionBrush="{x:Null}" TabIndex="2" BorderThickness="0">
<i:Interaction.Triggers>
<i:EventTrigger EventName="PasswordChanged">
<i:InvokeCommandAction Command="{Binding PasswordChangedCommand}" CommandParameter="{Binding ElementName=txtPassword}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</PasswordBox>
</Border>