Communicate Between Two View in WPF MVVM Only - wpf

Question

I Have two views in MVVM(WPF). First View contains two Text boxes: User Name, Password, second view is having two Buttons: Submit and Clear. Both Views now set on On Form. When I press 'Clear' button both textboxes are cleared and in Submit a message of UserName and Password is displayed. I am using only MVVM+WPF, not prism.
ModelView Of First View:
class LoginView:ViewModelBase
{
string _userName;
public string UserName
{
get {return _userName ; }
set {
if (_userName != value)
{
_userName = value;
}
base.OnPropertyChanged(UserName);
}
}
string _Pwd;
public string PWD
{
get { return _Pwd; }
set
{
_Pwd = value;
base.OnPropertyChanged(_Pwd);
}
}
}
and For Button
class ButtonHandler
{
private DelegateCommand _ClearData;
public ICommand ClearCommand
{
get
{
if (_ClearData == null)
{
_ClearData = new DelegateCommand(ClearText);
}
return _ClearData;
}
}
LoginView lg = new LoginView();
private void ClearText()
{
lg.UserName = "";
lg.PWD = "";
}
}
and View Code of First Control
<Label Content="Login" Grid.Row="0" Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left"
FontFamily="Georgia" FontSize="24" FontWeight="UltraBold" ></Label>
<Label Content="User Name" Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left"></Label>
<Label Content="Password" Grid.Row="2" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left"></Label>
<TextBox Name="username" Grid.Row="1" Grid.Column="1" Margin="100,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{Binding Path=UserName,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" ></TextBox>
<TextBox Name="pwd" Grid.Row="2" Grid.Column="1" Margin="100,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{Binding Path=PWD,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"></TextBox>
<Separator Grid.Row="0" Grid.Column="1" Height="5" Margin="0,40,0,0" Background="Green"></Separator>
and Button View
<Button x:Name="Submit" Content="Submit" Grid.Column="1"></Button>
<Button x:Name="Clear" Content="Clear" Grid.Column="2"
Command="{Binding Path=ClearCommand, Mode=OneWay,
UpdateSourceTrigger=PropertyChanged}" >
</Button>
Why it is not working?

Answer 1

You are not using the MVVM pattern correctly, with this pattern the ViewModel should not have a reference to the View. A command is part of your ViewModel, therefore your reference to LoginView violates the pattern.
So you have two input fields and a button? for this I would have a single ViewModel and a single View. The ViewModel would expose two string properties (username & password) and a command that binds to the clear button. When the command executes it would clear the username and password texts on the ViewModel. The View will then update accordingly.

Answer 2

The basic principle of MVVM is to have a class that the view can bind to that has all the application logic inside of it. One of the main reasons is to have a separation of concerns. So if you want a username you expose a property that the view binds to and then when you want to log in you create a function that uses those bound values to submit to you business logic layer of your application.
This would seem to be one way to utilize MVVM in your example:
public class LoginViewModel
{
public string UserName {get;set;}//Implement INotifyPropertyChanged
public string PWD {get;set;}
private DelegateCommand _ClearData;
public ICommand ClearCommand
{
get
{
if (_ClearData == null)
{
_ClearData = new DelegateCommand(ClearText);
}
return _ClearData;
}
}
private void ClearText()
{
UserName = "";
PWD = "";
}
}
and then in your xaml:
<TextBox Text={Binding UserName} />
<TextBox Text={Binding PWD} />
<Button Command={Binding ClearCommand}/>