I've created a view with a listbox on it which shows a collection of Cars on it. If a user clicks on a specific car, he needs to be sent to a different view with some detailed information on it.
The binding properties are normal MVVM Light properties (with RaisePropertyChanged and all).
Some code snippets:
<ListBox ItemsSource="{Binding Cars}" SelectedItem="{Binding SelectedCar, Mode=TwoWay}">
While developing this application I've discovered I can register for property changed events using the Messenger object of MVVM Light, like so:
Messenger.Default.Register<PropertyChangedMessage<Car>>(this, (action) =>
{
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
DoViewDetail();
});
});
But if I'm correct, this will register for every changed Car in the whole application. It's probably possible to do something with the RaisePropertyChanged or Register so you can target a specific property, but I can't find seem to find it.
Anyone here got a clue or heads up?
In short: I want to register on a specific property, not a specific object in my MVVM Light application.
I think one alternative is to create a custom "message" to use only in connection with the desired functionality. For example declare a CarSelectedMessage and then instead of using the default broadcasting of PropertyChangedMessage<Car>, create and send the custom message from the view model:
public Car SelectedCar {
get { return _selectedCar; }
set {
_selectedCar = value;
RaisePropertyChanged("SelectedCar");
var msg = new CarSelectedMessage(value);
Messenger.Default.Send(msg);
}
}
On navigation in general
For implementing navigation in the application, I followed this blog post to make it simple to issue navigation requests from view models. I think it had to be updated a little for the latest version of MVVM Light though, see my version below.
New NavigationRequest class to be used as the message:
public class NavigationRequest
{
public NavigationRequest(Uri uri)
{
DestinationAddress = uri;
}
public Uri DestinationAddress
{
get;
private set;
}
}
Register for requests in the constructor of the application's main view:
Messenger.Default.Register<NavigationRequest>(this,
(request) => DispatcherHelper.CheckBeginInvokeOnUI(
() => NavigationService.Navigate(request.DestinationAddress)));
Finally for calling navigation from a view model
var uri = new Uri("/MyPage.xaml", UriKind.Relative);
Messenger.Default.Send(new NavigationRequest(uri));
Hope this helps,
Related
Not sure if I am just doing this wrong or am misunderstanding some of the examples already on stack overflow here and here.
I am trying to take a selected item from my first view model and pass it to another view model I am navigating to. The purpose of this is so I can display the item that has been passed and allow the user to work with it.
Passing from first view model
This is just a small snippet of the first view model. Here I am first navigating to the new page/view model. Then pass the SelectedRule object using a messenger. Navigation is done using a ViewModelLocator class / navigation service provided with MVVM Light.
private ApprovedBomRule _selectedRule = new ApprovedBomRule();
public ApprovedBomRule SelectedRule
{
get { return _selectedRule;}
set { Set(ref _selectedRule, value); }
}
private void NavigateToUpdateRule()
{
//Navigate to Update Rule page
_navigationService.NavigateTo("UpdateBomRuleView");
//Pass selected rule as a parameter using messenger service
ApprovedBomRule ruleToSend = SelectedRule; // Selected by user.
Messenger.Default.Send(ruleToSend);
}
On receiving view model
Here is my second view model where I register the same type of SelectedRule from above and set it to the public variable.
public class UpdateBomRuleViewModel : ViewModelBase
{
private ApprovedBomRule _passedRule;
public ApprovedBomRule PassedRule
{
get => _passedRule;
set => Set(ref _passedRule, value);
}
//Constructor
public UpdateBomRuleViewModel()
{
//Register message type
Messenger.Default.Register<ApprovedBomRule>(this, GetMessage);
}
//Set the property to passed object
public void GetMessage(ApprovedBomRule rule)
{
PassedRule = rule;
}
}
My constructor is reached and the register method is set, but the GetMessage() function is never called. What am I missing here?
EDIT
I narrowed down the problem to the fact that the register method is being called after the message is sent. Now the second problem I am running into is how do I have my second view model register before the send? I am using a viewmodel locator in my pages to determine the view models for each page. Even though I am doing the _navigation.NavigateTo() before sending the data, the view model is not initialized until after the send.
Example of viewmodel locator in page
<local:BasePage x:Class="YAI.BomConfigurator.Desktop.Views.Rules.UpdateBomRuleView"
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:YAI.BomConfigurator.Desktop"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="UpdateBomRuleView"
DataContext="{Binding UpdateBomRuleViewModel, Source={StaticResource Locator}}">
<Grid>
<TextBlock Text="{Binding PassedRule.Description}"
VerticalAlignment="Center"
HorizontalAlignment="Center">
</TextBlock>
</Grid>
Okay so I sort of found a solution to the problem. I used my ServiceLocator to get the instance before navigating.
var vm = ServiceLocator.Current.GetInstance<UpdateBomRuleViewModel>();
//Navigate to Update Rule page
_navigationService.NavigateTo("UpdateBomRuleView");
//Pass selected rule as a parameter using messenger service
ApprovedBomRule ruleToSend = SelectedRule; // Selected by user.
Messenger.Default.Send(ruleToSend);
This caused my register to be called before the send. I don't necessarily like this solution because the var vm is not being used for anything, but it works for now.
thank you for looking at the question.
You need to wait for the page show up before sending the message. It is weird that MVVMLight doesn't offer any NavigateAsync method like Prism, so you have to roll for your own.
await Application.Current.Dispatcher.Invoke(
() => _navigationService.NavigateTo("UpdateBomRuleView");
ApprovedBomRule ruleToSend = SelectedRule; // Selected by user.
Messenger.Default.Send(ruleToSend);
Slightly modified from my UWP code, but it should be fine for WPF.
I am trying to learn MVVM with MVVM Light Toolkit in WPF. But I am stuck on one simple problem.
I have an AddEditProfileWindow which basically has a textbox for profile name and a confirm button. It adds new profile to database table or updates name of existing profile.
In MainWindow/MainViewModel I have a list of profiles and two buttons: "Add Profile" and "Edit Selected Profile". They both open this window via commands + messages. For example here is command for the "Add Profile" button
public RelayCommand OpenAddProfileWindowCommand
{
get
{
return _openAddProfileWindowCommand ?? (_openAddProfileWindowCommand = new RelayCommand(
() => { Messenger.Default.Send(new NotificationMessage("OpenAddProfile")); }));
}
}
and it's receiver in MainWindow code behind
private void MessageReceived(NotificationMessage msg)
{
if (msg.Notification == "OpenAddProfile")
{
var window = new AddEditProfileWindow();
window.Owner = this;
window.ShowDialog();
}
}
So the problem is that I need to somehow pass a parameter to the AddEdit... Window/ViewModel (set IsEditing bool property in ViewModel for example) to change window behavior and customize it a bit (change title and the confirm button text to "Add" or "Update"). Also for updating I need Profile object (or at least Id) of selected record.
For creating ViewModels I use ViewModelLocator and Unity
public ViewModelLocator()
{
var container = new UnityContainer();
ServiceLocator.SetLocatorProvider(() => new UnityServiceLocator(container));
container.RegisterType<MainViewModel>(new ContainerControlledLifetimeManager()); // singleton
container.RegisterType<AddEditProfileViewModel>();
}
public AddEditProfileViewModel AddEditProfile
{
get
{ return ServiceLocator.Current.GetInstance<AddEditProfileViewModel>(); }
}
I have read a lot of similar threads and examples but still don't understand how should I pass parameters to view models. Some answers suggest creating view models on app startup (and make them singletons) in the ViewModelLocator and then I can send message before opening. But looks like not very clean and also I will need to reset view models before opening (via Cleanup() probably).
Is there any better/easier/cleaner approach?
In my opinion, Messenger and getting AddEditProfileViewModel from IoC are not suitable in this scenario. First you send message from a UI's DataContext to UI. Messenger works between loosely coupled components and usually on the same level, view model and view model for example. If you want view model to notify view, you can use InteractionRequest from Prism. Second, AddEditProfileViewModel can be considered as a temporary, based on its view is a modal dialog, so its creation might depend on the environment that creates it.
One approach, using shared service, maybe called IDialogService, which has a method might called ShowAddEditDialog. Your main view model gets this service from IoC and calls it when executing command, add/edit. When calling the method, main view model also creates AddEditProfileViewModel and passing states, such as add/edit, existing profile, etc.
Another approach, using application controller, if you still want to keep Messenger and IoC. You still can use Messenger here but it is not the view who listens to messages, instead it is an application controller. Now, application controller, main view model, AddEditProfileViewModel and AddEdit window are all resolved from IoC container. The application controller holds both view models and listen to the message. When it got message from main view model, it updates states on AddEditProfileViewModel, resolve dialog, set DataContext and show the dialog. You can put the application controller instance in MainWindow code behind or anywhere since once it gets resolved from IoC, it is autonomous.
I'm working on my first project in WPF/XAML, and there's a lot I've not figured out.
My problem is simple - I need a window that has a bunch of fields at the top, with which the user will enter his selection criteria, a retrieve button, and a data grid. When the user clicks on the button, a query is run, and the results are used to populate the grid.
Now the simple and obvious and wrong way to implement this is to have a single module containing a single window, and have everything contained within it - entry fields, data grid, the works. That kind of mangling of responsibilities makes for an unmaintainable mess.
So what I have is a window that is responsible for little more than layout, that contains two user controls - a criteria control that contains the entry fields and the retrieve button, and a data display control that contains the data grid.
The question is how to get the two talking to each other.
Years back, I would have added a function pointer to the criteria control. The window would have set it to point to a function in the display control, and when the button was clicked, it would have called into the display control, passing the selection criteria.
More recently, I would have added an event to the criteria control. I would have had the window set a handler in the display control to listen to the event, and when the button was clicked, it would have raised the event.
Both of these mechanisms would work, in WPF. But neither is very XAMLish. It looks to me like WPF has provided the ICommand interface specifically to accommodate these kinds of connection issues, but I've not yet really figured out how they are intended to work. And none of the examples I've seen seem to fit my simple scenario.
Can anyone give me some advice on how to fit ICommand to this problem? Or direct me to a decent explanation online?
Thanks!
MVVM is the prevalent pattern used with WPF and Silverlight development. You should have a read up on it.
Essentially, you would have a view model that exposes a command to perform the search. That same view model would also expose properties for each of your criteria fields. The view(s) would then bind to the various properties on the view model:
<TextBox Text="{Binding NameCriteria}"/>
...
<Button Command="{Binding SearchCommand}".../>
...
<DataGrid ItemsSource="{Binding Results}"/>
Where your view model would look something like:
public class MyViewModel : ViewModel
{
private readonly ICommand searchCommand;
private string nameCriteria;
public MyViewModel()
{
this.searchCommand = new DelegateCommand(this.OnSearch, this.CanSearch);
}
public ICommand SearchCommand
{
get { return this.searchCommand; }
}
public string NameCriteria
{
get { return this.nameCriteria; }
set
{
if (this.nameCriteria != value)
{
this.nameCriteria = value;
this.OnPropertyChanged(() => this.NameCriteria);
}
}
}
private void OnSearch()
{
// search logic, do in background with BackgroundWorker or TPL, then set Results property when done (omitted for brevity)
}
private bool CanSearch()
{
// whatever pre-conditions to searching you want here
return !string.IsEmpty(this.NameCriteria);
}
}
Greetings! Am enjoying using MVVM light -great framework - has made my life much easier, and has removed a number of barriers that were proving difficult to overcome....
Question:
I am attempting to setup a custom dialog box for editing messages users send to each other. I am attempting to construct a silverlight custom dialog box using the ChildWindow object using the MVVM framework.
Was wondering if there were any suggestions as to how this might be accomplished
Following the dialog MVVM sample code I found here: http://mvvmlight.codeplex.com/Thread/View.aspx?ThreadId=209338 I got stuck because the ChildWindow dialog object in Silverlight is async, and has a different Result class.
So - the Basic idea I have now is using the view model of the class (in this case the Matrix.MessageViewModel) to create an instance of the custom dialog box, send it through the Messenger.Send<>, process the registered message in the view to display the dialog, then have the ChildWindow dialog box's Save button handler fire a Messenger.Send with the modified contents that is then stored using the Save method on the viewmodel...
Seems a bit round-about - so wanted to make sure there wasn't a cleaner way....
Relevant code bits:
view model:
messageDialogBox = new MessageEditorDialog(
selectedMessage, this.SelectedSiteId, this.LoggedOnEmployee.Id, this.Projects);
DialogMessage editMessage = new DialogMessage(
this, messageDialogBox,"Edit Message", DialogMessageCallback);
Messenger.Default.Send(editMessage);
View:
public ViewHost()
{
InitializeComponent();
Loaded += new RoutedEventHandler(ViewHost_Loaded);
if (!ViewModelBase.IsInDesignModeStatic)
{
// Use MEF To load the View Model
CompositionInitializer.SatisfyImports(this);
}
ApplicationMessages.IsBusyMessage.Register(this, OnIsBusyChange);
Messenger.Default.Register<DialogMessage>(this, msg => ShowDialog(msg));
}
private void ShowDialog(DialogMessage msg)
{
MessageEditorDialog myDialog = (MessageEditorDialog) msg.Target;
myDialog.Show();
}
Dialog Save:
private void ButtonSave_Click(object sender, RoutedEventArgs e)
{
Messenger.Default.Send<Message>(
this.MessageItem, CommandMessages.MessageTypes.MessageSave);
}
This ties back into the ViewModel, that has a Messenger.Default.Register<> watching for the CommandTypes.MessageSave which routes the resulting MessageItem to the model for storage.....
That's pretty darn close to what I'd do, except there are a couple of things I do differently.
I'd have a view model for my dialog view, and move the messaging logic to it rather than the view's code behind.
I'd use a Save command in my view model, and bind the ButtonSave to that command. That moves the save logic to the view model instead of the code behind of your view.
You're using a different message when the save button is clicked. Also, you're not using the DialogMessage's callback. Assuming you change to using a Save command, you could save the message in a private member in the view model, then use message's callback when the user saves.
You may want to think about re-using the dialog view, or ensuring that the view is being cleaned up correctly so you don't end up with a memory leak.
Here's the changes I'd make to your view model following suggestions 2 & 3.
public class MessageEditorDialogViewModel : ViewModelBase
{
private DialogMessage _dialogMessage;
public RelayCommand SaveCommand { get; private set; }
public DialogMessage Message { get; set; }
public MessageEditorDialogViewModel()
{
SaveCommand = new RelayCommand(SaveCommandExecute);
}
private SaveCommandExecute()
{
Message.Execute();
}
}
I am using MVVM Light toolkit in my WPF application. I would like to know what is the best approach for opening a new window from an existing window. I have got this MainViewModel, which is responsible for MainWindow of my application. Now in the MainView, on a button click, I would like to open a second window on top of it. I have got RelayCommmand binded to the Button's Command. In the RelayCommand's method, I can create a new window object and simply call Show(), something like this:
var view2 = new view2()
view2.Show()
but I don't think the ViewModel should be responsible for creating the new view2 object. I have read this post WPF MVVM Get Parent from VIEW MODEL where Bugnion has suggested to pass message to the view1 from the viewmodel1 and then view1 should create the new view2. But I am not sure what does he actually mean by passing the message to the view1? How should the view1 handle the message? In it's code behind or what?
Regards,
Nabeel
Passing a message from ViewModel1 to View1 means to use the messaging capabilities in the MVVM Light Toolkit.
For example, your ViewModel1 could have a command called ShowView2Command, then it would send a message to display the view.
public class ViewModel1 : ViewModelBase
{
public RelayCommand ShowView2Command { private set; get; }
public ViewModel1() : base()
{
ShowView2Command = new RelayCommand(ShowView2CommandExecute);
}
public void ShowView2CommandExecute()
{
Messenger.Default.Send(new NotificationMessage("ShowView2"));
}
}
View1 would register to receive messages in its code behind and display View2 when it receives the correct message.
public partial class View1 : UserControl
{
public View1()
{
InitializeComponent();
Messenger.Default.Register<NotificationMessage>(this, NotificationMessageReceived);
}
private void NotificationMessageReceived(NotificationMessage msg)
{
if (msg.Notification == "ShowView2")
{
var view2 = new view2();
view2.Show();
}
}
}
Why do you go this route? Its simple. If you replace your button with a toggleButton, or a hyperlink, or any other number of button-like controls, you don't need to update your "code behind" - its a basic principle of the MVVM pattern. In your new toggleButton (or whatever), you still end up binding to the same exact Command.
For example, I'm creating a project for a client who wants to have 2 UI's - one is going to be fundamentally different in every way, in terms of presentation. Horizontal tabs vs Vertical RadPanelBar (think Accordion) for navigation. Both of these views can point to the same viewModel - when a user clicks the Work Order tab in View 1, it fires the same "WorkOrderCommand" that's fired in the Work Order Header in the panel bar.
In a code-behind model, you'd have to code two separate events. Here you only have to code one.
Furthermore, it allows a designer using Blend to create any layout they want. As long as they have the hooks (EventToCommand control) in place, myself (as a developer) couldn't care less what the final product looks like.
Loose coupling is incredibly powerful.
You can do in this way like you need to create some events and register those in view and call these in view model.and open that pop up window.
Like This example
public class Mainclass : MainView
{
public delegate abc RegisterPopUp(abc A);
public RegisterPopUp POpUpEvent ;
public RelayCommand ShowCommand { private set; get; }
public void ShowCommand()
{
ShowCommand("Your parameter");
}
}
inside the view MainView mn=new MainView();
Register the event here like thake mn.POpUpEvent += than click on tab button double time
and in registers popup method right the code for opening the pop up window.
Unless I am missing the point here - if I were to use the code behind, then why not directly implement button_click event and open the second view?
What Bugnion seems to be suggesting is view1 -> button click -> relay command -> viewmodel1 -> message -> view1 -> view1.cs -> open view 2.
You are going to sacrifice testability anyhow by writing code-behind, so why take such a long route?
You can abstract the view specific features into services using generic interface. In the view layer you can provide concrete instances of these services and build view models using the IoC container and Dependency Injection technique.
In your case you can build an interface IWindowManager or something similar which has the required method. This can be implmented in your view layer. I wrote a small blog post recently demonstrating how to abstract the dialog behaviour out of view model. Similar apporach can be used for any user interface related service like Navigation, MessageBoxes etc.
This link might be helpful for you http://nileshgule.blogspot.com/2011/05/silverlight-use-dialogservice-to.html
Many people also use the approach of firing events from view models which are subscribed on the view.cs file and from there the MessageBox or any other UI related action is performed. I personally like the approach of injecting services because then you can provide multiple implementations of the same service. A simple example would be how navigation is handled in Silverlight and Windows Phone 7 applications. You can use the same view model but inject different implementations of the Navigation service based on the application type.
I find the best way to approach this, is opening and closing the window from the ViewModel. As this link suggests,
Create a DialogCloser class
public static class DialogCloser
{
public static readonly DependencyProperty DialogResultProperty = DependencyProperty.RegisterAttached("DialogResult", typeof(bool?), typeof(DialogCloser), new PropertyMetadata(DialogResultChanged));
private static void DialogResultChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var window = d as Window;
if (window != null) window.Close();
}
public static void SetDialogResult(Window target, bool? value)
{
target.SetValue(DialogResultProperty, value);
}
}
Create a Base ViewModel inheriting from GalaSoft.MvvmLight.ViewModelBase with there additional members. Once done, use this viewmodel as base for other viewmodels.
bool? _closeWindowFlag;
public bool? CloseWindowFlag
{
get { return _closeWindowFlag; }
set
{
_closeWindowFlag = value;
RaisePropertyChanged("CloseWindowFlag");
}
}
public virtual void CloseWindow(bool? result = true)
{
Application.Current.Dispatcher.BeginInvoke(DispatcherPriority.Background,
new Action(() =>
{
CloseWindowFlag = CloseWindowFlag == null ? true : !CloseWindowFlag;
}));
}
In the view, Bind the DialogCloser.DialogResult dependency property with the CloseWindowFlag property in the base viewmodel.
Then you can open/close/hide the window from the viewmodel.