We Keep Coding

WPF MVVM Switching Between Usercontrols

I am new to MVVM. I found this artcle and it resolve my haf of problems.
https://social.technet.microsoft.com/wiki/contents/articles/30898.simple-navigation-technique-in-wpf-using-mvvm.aspx
However, I need to navigate from one usercontrol to another from the button click event of one usercontrol not from the button on the main window.
Usercontrol 1:
Usercontrol 2:
This is what I have tried sofar;
class Usercontrol1ViewModel : INotifyPropertyChanged
{
public ICommand navCommand { get; set; }
public Usercontrol1ViewModel()
{
navCommand = new BaseCommand(navigate);
}
private void navigate(object obj)
{
NavigationViewModel mainViewModel = new NavigationViewModel();
mainViewModel.SelectedViewModel = new Usercontrol2ViewModel();
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
}
}
NavigationView model class
Class NavigationViewModel : INotifyPropertyChanged
{
public ICommand btn1Command { get; set; }
public ICommand btn2Command { get; set; }
private object selectedViewModel;
public object SelectedViewModel
{
get { return selectedViewModel; }
set { selectedViewModel = value; OnPropertyChanged("SelectedViewModel"); }
}
public NavigationViewModel()
{
btn1Command = new BaseCommand(Opencontrl1);
btn2Command = new BaseCommand(Opencontrl2);
}
private void Opencontrl1(object obj)
{
SelectedViewModel = new Usercontrol1ViewModel();
}
private void Opencontrl2(object obj)
{
SelectedViewModel = new Usercontrol2ViewModel();
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
}
}
Main window code behind;
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new NavigationViewModel();
}
}
Can somebody guide me how to achieve this with MVVM?

Try the below code. I used the sample code in the article and I am the author of the MSDN article :)
MainWindow.xaml
<Window.Resources>
<DataTemplate DataType="{x:Type local:EmployeeViewModel}">
<local:EmployeeView/>
</DataTemplate>
<DataTemplate DataType="{x:Type local:DepartmentViewModel}">
<local:DepartmentView/>
</DataTemplate>
</Window.Resources>
<DockPanel LastChildFill="True">
<ContentControl x:Name="Pages" DockPanel.Dock="Right" Content="{Binding SelectedViewModel}"/>
</DockPanel>
NavigationViewModel
class NavigationViewModel : INotifyPropertyChanged
{
public EmployeeViewModel EmployeeViewModel { get; set; }
public DepartmentViewModel DepartmentViewModel { get; set; }
private object selectedViewModel;
public object SelectedViewModel
{
get { return selectedViewModel; }
set { selectedViewModel = value; OnPropertyChanged("SelectedViewModel"); }
}
public NavigationViewModel()
{
SelectedViewModel = new EmployeeViewModel(OpenEmp);
}
private void OpenEmp(object obj)
{
if (obj.ToString() == "Dept")
{
SelectedViewModel = new DepartmentViewModel();
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
}
}
EmployeeView
<Grid>
<StackPanel>
<TextBlock Text="This is employee view"/>
<Button Content="Navigate to Dept View" Command="{Binding Navigate}"/>
</StackPanel>
</Grid>
EmployeeViewModel
class EmployeeViewModel
{
private readonly Action<object> navigate;
public ICommand Navigate { get; set; }
public EmployeeViewModel(Action<object> navigate)
{
Navigate = new BaseCommand(OnNavigate);
this.navigate = navigate;
}
private void OnNavigate(object obj)
{
navigate.Invoke("Dept");
}
}

SizeToContent disables EventTrigger

I'm trying to make window size same as content, but when I use SizeToContent, it for some reason breaks my EventTrigger and it no longer invokes the command when the window is loaded.
Code sample:
WindowView:
<Window x:Class="Tasks.Views.TasksWindow"
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:local="clr-namespace:Tasks.Views"
xmlns:ViewModels="clr-namespace:Tasks.ViewModels"
xmlns:Views="clr-namespace:Tasks.Views"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
SizeToContent="WidthAndHeight"
mc:Ignorable="d"
Title="TasksWindow">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<i:InvokeCommandAction Command="{Binding LoadTasksCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Window.DataContext>
<ViewModels:TasksViewModel/>
</Window.DataContext>
<Views:TasksControl/>
</Window>
ViewModel:
public class TasksViewModel : ObservableObject
{
private readonly ObservableCollection<TaskModel> _tasks
= new ObservableCollection<TaskModel>();
public IEnumerable<TaskModel> Tasks
{
get { return _tasks; }
}
public ICommand LoadTasksCommand
{
get { return new DelegateCommand(LoadTasks); }
}
public void LoadTasks()
{
string directory = Path.GetDirectoryName(Assembly.GetEntryAssembly().Location);
string filePath = Path.Combine(directory, "Tasks.xml");
// Check if save file exists
if (!File.Exists(filePath))
return;
XmlSerializer xs = new XmlSerializer(typeof(TaskList));
using (StreamReader reader = new StreamReader("Tasks.xml"))
{
TaskList results = (TaskList)xs.Deserialize(reader);
foreach (var item in results.TasksList)
_tasks.Add(item);
}
}
}
Base:
public class ObservableObject : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChangedEvent(string propertyName)
{
var handler = PropertyChanged;
if (handler != null)
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
DelegateCommand:
public class DelegateCommand : ICommand
{
private readonly Action _action;
public DelegateCommand(Action action) { _action = action; }
public void Execute(object parameter) { _action(); }
public bool CanExecute(object parameter) { return true; }
public event EventHandler CanExecuteChanged;
}
Model:
[XmlRoot("ArrayOfTaskModel")]
public class TaskList
{
[XmlElement("TaskModel")]
public List<TaskModel> TasksList { get; set; }
}
[Serializable]
public class TaskModel : ObservableObject
{
private string _name;
[XmlElement("Name")]
public string Name
{
get { return _name; }
set
{
_name = value;
RaisePropertyChangedEvent("Name");
}
}
}

Relay command in Wpf

I'm new to c# and trying to understand how commands work in mvvm architecture. What I need to do is that updating some info when I click a button. I think I implemented the relay class fine but there is no update at all.
RelayCommand.cs
public class RelayCommand : ICommand
{
private Action<object> execute;
private Func<object, bool> canExecute;
public event EventHandler CanExecuteChanged
{
add { CommandManager.RequerySuggested += value; }
remove { CommandManager.RequerySuggested -= value; }
}
public RelayCommand(Action<object> execute, Func<object, bool> canExecute)
{
this.execute = execute;
this.canExecute = canExecute;
}
public bool CanExecute(object parameter)
{
return this.canExecute == null || this.canExecute(parameter);
}
public void Execute(object parameter)
{
this.execute(parameter);
}
}
MovieViewModel.cs
class MovieViewModel : INotifyPropertyChanged
{
Movie _movie;
private ICommand _updateCommand;
public event PropertyChangedEventHandler PropertyChanged;
public MovieViewModel()
{
_movie = new Movie
{
Title = "Unknown",
Genre = "Unknown",
Price = 11.0,
Score = 0
};
}
public Movie Movie
{
get
{
return _movie;
}
set
{
_movie = value;
}
}
public string Title
{
get
{
return Movie.Title;
}
set
{
Movie.Title = value;
RaisePropertyChanged("Title");
}
}
public string Genre
{
get
{
return Movie.Genre;
}
set
{
Movie.Genre = value;
RaisePropertyChanged("Genre");
}
}
public double Price
{
get
{
return Movie.Price;
}
set
{
Movie.Price = value;
RaisePropertyChanged("Price");
}
}
public double Score
{
get
{
return Movie.Score;
}
set
{
Movie.Score = value;
RaisePropertyChanged("Score");
}
}
private void RaisePropertyChanged(string name)
{
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
public ICommand UpdateCommand
{
get
{
if (_updateCommand == null)
{
_updateCommand = new RelayCommand(p => { updateMovie("ASD", "ZXC", 11.90, 0); }, p => true);
}
return _updateCommand;
}
set
{
_updateCommand = value;
}
}
public Movie updateMovie(string title, string genre, double price, double score)
{
_movie.Title = title;
_movie.Genre = genre;
_movie.Price = price;
_movie.Score = score;
return _movie;
}
}
Button command binding
<Button x:Name="updateBtn" Content="Update" Grid.Column="1" Grid.Row="5" Width="75" Height="30" Command="{Binding UpdateCommand}"/>

Try giving
RaisePropertyChanged("Movie");
Thanks #Maverik has given the reason statement too. You're not raising PropertyChanged event since you bypass the property and access the underlying fields directly. You should use the VM like it's meant to.
The access going through VM to model applies to you just as much as it applies to views and other bound clients to your VM.

Unsure what I'm doing wrong when trying to create / add this command:

XAML Button:
<Button Content="Test Connection" Name="btnTestConnection" Command="{Binding Path=TestCommand}" CommandParameter="{Binding ElementName=someObject}"/>
View Model:
public ICommand TestCommand
{
get;
internal set;
}
private bool CanExecuteTestCommand()
{
return !String.IsNullOrEmpty(txtControl);
}
private void CreateTestCommand()
{
TestCommand = new TestCommand(TestExecute);
}
public void TestExecute(object parameter)
{
//do stuff with parameter
obj.TestConnection(parameter);
}
I would like to point out that CreateTestCommand() is called in my VM constructor.
And finally, my implementation of TestCommand:
class TestCommand : ICommand
{
private Action<object> execute;
private Predicate<object> canExecute;
private event EventHandler CanExecuteChangedInternal;
public TestCommand(Action<object> execute)
: this(execute, DefaultCanExecute)
{
}
public TestCommand(Action<object> execute, Predicate<object> canExecute)
{
if (execute == null)
{
throw new ArgumentNullException("execute");
}
if (canExecute == null)
{
throw new ArgumentNullException("canExecute");
}
this.execute = execute;
this.canExecute = canExecute;
}
public event EventHandler CanExecuteChanged
{
add
{
CommandManager.RequerySuggested += value;
this.CanExecuteChangedInternal += value;
}
remove
{
CommandManager.RequerySuggested -= value;
this.CanExecuteChangedInternal -= value;
}
}
public bool CanExecute(object parameter)
{
return this.canExecute != null && this.canExecute(parameter);
}
public void Execute(object parameter)
{
this.execute(parameter);
}
public void OnCanExecuteChanged()
{
EventHandler handler = this.CanExecuteChangedInternal;
if (handler != null)
{
handler.Invoke(this, EventArgs.Empty);
}
}
public void Destroy()
{
this.canExecute = _ => false;
this.execute = _ => { return; };
}
private static bool DefaultCanExecute(object parameter)
{
return true;
}
}
I set a breakpoint in CreateTestCommand and it looks like it's configured properly:
But when I click on btnTestConnection, nothing happens. TestExecute in my View Model isn't called (which calls TestConnection on the actual model). I must be missing something, but I can't for the life of me figure out what...
EDIT Including the rest of my view model;
class FormProcessorViewModel
{
FormProcessorModel obj;
public FormProcessorViewModel()
{
obj = new FormProcessorModel();
CreateTestCommand();
}
public FormProcessorViewModel(string server, string database, string username, bool specifyDateRange, DateTime startDate, DateTime endDate, string operation, string preprocessed, string processed, string failed) :this()
{
txtServer = server;
txtDatabase = database;
txtUsername = username;
chkSpecifyDateRange = specifyDateRange;
dpStartDate = startDate;
dpEndDate = endDate;
txtOperation = operation;
txtPreprocessed = preprocessed;
txtProcessed = processed;
txtFailed = failed;
}
public ICommand TestCmd
{
get;
internal set;
}
private bool CanExecuteTestCommand()
{
return !String.IsNullOrEmpty(txtUsername);
}
private void CreateTestCommand()
{
TestCmd = new TestCommand(TestExecute);
}
private void TestExecute(object parameter)
{
var passwordBox = parameter as PasswordBox;
var password = passwordBox.Password;
obj.TestConnection(password);
}
}
I left out all the properties that get set in the second constructor just because they don't really do anything but refer to the corresponding values on the model object.

EDIT
View Model
class ViewModel : INotifyPropertyChanged
{
private string _test;
public string TestValue
{
get { return _test; }
set { _test = value; RaisePropertyChanged("TestValue"); }
}
public ICommand MyCommand { get; internal set; }
public ViewModel()
{
TestValue = "Test";
CreateTestCommand();
}
private void CreateTestCommand()
{
MyCommand = new TestCommand(ExecuteButton);
}
private void ExecuteButton(object obj)
{
TestValue = "Cool";
}
public event PropertyChangedEventHandler PropertyChanged;
void RaisePropertyChanged(string propName)
{
var pc = PropertyChanged;
if (pc != null)
{
pc(this, new PropertyChangedEventArgs(propName));
}
}
}
Xaml
<Button Content="{Binding TestValue}" Command="{Binding Path=MyCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Self}}"/>
Xaml Code behind.
public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel();
}

How to use the CanExecute Method from ICommand on WPF

How does one use the CanExecute Method from the ICommand interface?
In my example i have a SaveCommand which i only what to be enable when the object is saveable. The XAML Code of my Savebutton looks like this:
<Button Content="Save" Command="{Binding SaveCommand, Mode=TwoWay}" />
This is the code of my save class:
class Save : ICommand
{
public MainWindowViewModel viewModel { get; set; }
public Save(MainWindowViewModel viewModel)
{
this.viewModel = viewModel;
}
public bool CanExecute(object parameter)
{
if (viewModel.IsSaveable == false)
return false;
return true;
}
public event EventHandler CanExecuteChanged;
public void Execute(object parameter)
{
viewModel.Save();
}
}
The save property in the ViewModel looks like this:
public ICommand SaveCommand
{
get
{
saveCommand = new Save(this);
return saveCommand;
}
set
{
saveCommand = value;
}
}
This construct didn't work. The button does not enable its self when isSaveable is true.

Instead of defining your own implementation of ICommand, use a RelayCommand.
In the below sample code, the save Button is enabled when the user types something in the TextBox.
XAML:
<Window x:Class="RelayCommandDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel HorizontalAlignment="Center">
<TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" Margin="5" Width="120"/>
<Button Content="Save" Command="{Binding SaveCommand}" Margin="3"/>
</StackPanel>
</Window>
Code behind:
using System;
using System.Windows;
using System.Windows.Input;
namespace RelayCommandDemo
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new VM();
}
}
public class VM
{
public String Name { get; set; }
private ICommand _SaveCommand;
public ICommand SaveCommand
{
get { return _SaveCommand; }
}
public VM()
{
_SaveCommand = new RelayCommand(SaveCommand_Execute, SaveCommand_CanExecute);
}
public void SaveCommand_Execute()
{
MessageBox.Show("Save Called");
}
public bool SaveCommand_CanExecute()
{
if (string.IsNullOrEmpty(Name))
return false;
else
return true;
}
}
public class RelayCommand : ICommand
{
public event EventHandler CanExecuteChanged
{
add { CommandManager.RequerySuggested += value; }
remove { CommandManager.RequerySuggested -= value; }
}
private Action methodToExecute;
private Func<bool> canExecuteEvaluator;
public RelayCommand(Action methodToExecute, Func<bool> canExecuteEvaluator)
{
this.methodToExecute = methodToExecute;
this.canExecuteEvaluator = canExecuteEvaluator;
}
public RelayCommand(Action methodToExecute)
: this(methodToExecute, null)
{
}
public bool CanExecute(object parameter)
{
if (this.canExecuteEvaluator == null)
{
return true;
}
else
{
bool result = this.canExecuteEvaluator.Invoke();
return result;
}
}
public void Execute(object parameter)
{
this.methodToExecute.Invoke();
}
}
}