I have a MVVM view and viewmodel. In the constructor of my viewmodel I pass a list of IObservable messages and subscribe to them through a simple class sitting outide of my viewmodel and view
Outside class
{
viewModel =
new ViewModelClass(
responseHandler.AsObservable());
viewModel.PropertyChanged += ViewModel_PropertyChanged;
}
private void ViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
if (e.PropertyName == nameof(ViewModelClass.MyProperty))
{
// Error here
view = new MyViewClass() { DataContext = viewModel };
}
}
In the view model constructor
subscription = receiveMessages.Subscribe(MessageReceived);
private void MessageReceived(GvsMessage message)
{
MyProperty = true;
}
On receiving a message I want to create my view not before that. Although the viewmodel is created before to handle property change etc
The problem is that I get "the calling thread must be sta because many ui components require this". Could someone please help
As we spoke in the comments you need to use a Dispatcher which can be acquired from different parts of the app.
To initialize the dispatcher you can use this snippet:
protected static Dispatcher _d;
if (Application.Current != null)
{
_d = Application.Current.Dispatcher;
}
else
{
_d = Dispatcher.CurrentDispatcher;
}
Explanation:
The first dispatcher is done when the application has UnitTests when you run the tests this dispatcher will not be null,
The second one is the current Dispatcher used by your application.
After you have this in your code when initializing your VM now you can send messages Actions, Events to the UI Thread.
I have a little method just for that:
public static void UIThread(Action action)
{
if (_d == null)
{
if (Application.Current != null)
{
_d = Application.Current.Dispatcher;
}
else
{
_d = Dispatcher.CurrentDispatcher;
}
}
_d.Invoke(action);
}
This function will accept lambda, like so:
UIThread(() =>
{
Processing = true;
Message = "Working ...";
//in your case you would raise the Loaded event here
});
This way you EventHandler in your view will have no problem showing that view.
If you need any more info let us know.
HTH
I resolved this by creating the view and the viewmodel in the constructor. In the propertychanged event I just set a property IsVisible to 'true' binds the window visibility
<Window.Visibility>
<Binding Path="IsVisible" Converter="{StaticResource BoolToVisibilityConverter}" Mode="TwoWay"/>
</Window.Visibility>
This is my viewmodel where I have the command, that changes the value of an int. I want to bind this command to a Button.
public SharedViewModel()
{
ClickCommand = new Command (() => CurrentValue = CurrentValue + 1);
}
public ICommand ClickCommand
{
get { return clickCommand; }
set
{
clickCommand = value;
OnPropertyChanged("ClickCommand");
}
}
And this is my ContentPage where I have a button named click1:
public MenuPage ()
{
var ourSharedView = new SharedViewModel ();
ourSharedView.ClickCommand; //and this is the command, I have no idea how I should connect this with my existing button below though. This
}
void click1 (object s, EventArgs a)
{
// how can I connect this clickbutton to my command?
}
From the code behind, you can do this
myButton.Command = ourSharedView.ClickCommand;
you should remove the Button's Click handler - you do not need it if you are using a Command
First of all creating a View Model from the View(Page) is not a good idea. Page should be created after VM is exist and use it's data.
I recomend you to read the Data binding basics, MVVM binding.
As for your question assume you have View Model with ICommand property, set binding of the button command in page to it:
public class CustomPage : ContentPage
{
private Button btn {get;set;}
public CustomPage()
{
if(btn == null)
btn = createButtonFunction();
btn.SetBinding<ViewModelClassName>(Button.CommandProperty, vm => vm.CommandFromViewModel)
//btn.SetBinding(Button.CommandProperty, "CommandFromViewModel")//other way to set binding
}
}
Commented line does same work as privious, use one of them.
P.S. Forget to mention that to work propertly BindingContext property of page has to be set to the View Model of this page.
I want to open a new modal window using the MVVM pattern in a Xamarin Forms app. I have researched opening a new window with the MVVM pattern, which has got me this far, but the thing about windows in Xamarin forms, is they need a reference to the current page (view) to open a new window (new view) from. This forces me to pass a reference to the current page (view) from my viewModel, to my window factory, to launch the new window from. This is a violation of MVVM. My goal is to get rid of any references to views from within my viewModel. That is my question, how do I do that? My code here happens to be a modal window, but normal windows also need a reference to the page it is launching from. Here is my code and you will see what I mean:
Window Factory (look at the CreateNewWindow method):
public interface IWindowFactory
{
void CreateNewWindow();
}
public class ProductionWindowFactory: IWindowFactory
{
Page launchFromPage;
BackLogViewModel viewModel;
public ProductionWindowFactory(BackLogViewModel ViewModel, Page page)
{
viewModel = ViewModel;
launchFromPage = page;
}
public void CreateNewWindow()
{
AddStoryPage window = new AddStoryPage (new AddStoryViewModel (viewModel));
launchFromPage.Navigation.PushModalAsync (window);
}
}
}
ViewModel that opens a new modal window (look particularly at the AddTask Command):
public class BackLogViewModel : INotifyPropertyChanged
{
private IWindowFactory m_windowFactory;
public void DoOpenNewWindow()
{
m_windowFactory.CreateNewWindow();
}
public ObservableCollection<Story> AllMyStories { get; set; }
private string _updated;
public string Updated
{
get
{
return _updated;
}
set
{
_updated = value;
OnPropertyChanged ();
}
}
public Page mypage;
public BackLogViewModel (Page page)
{
Updated = DateTime.Now.ToString();
mypage = page;
AllMyStories = new ObservableCollection<Story> ();
}
public ICommand Save
{
get {
return new Command (() => {
Updated = DateTime.Now.ToString();
});
}
}
public ICommand AddTask
{
get {
return new Command ( () => {
m_windowFactory = new ProductionWindowFactory(this, mypage);
DoOpenNewWindow();
});
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
var handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs (propertyName));
}
}
private Command selectCmd;
public Command Select {
get {
this.selectCmd = this.selectCmd ?? new Command<Story>(p =>
{
var monkey = p as Story;
if (monkey == null) return;
Page z = new Views.StoryPage(p);
mypage.Navigation.PushAsync(z);
}
);
return this.selectCmd;
}
}
}
}
How do I get rid of the reference to the current page (view) within my viewModel?
I have since found This tutorial on navigating views from the ViewModel in Xamarin
It basically does what I was already doing but instead of passing the full view to the ViewModel, it passes only the INavigation interface of the view, and uses that to navigate from. It states that it can be argued that it is violating MVVM, but has the attitude of "so be it", I suspect because no obvious and easy alternatives exist. There may be alternatives that do not reference any part of the view from the ViewModel, but in order to keep moving forward I have opted for this easy solution. I have kept my window factory in order to not specify a concrete window to build in my ViewModel.
I am using wpf event to show popup window.
As my event method 'AddToBasketClicked' is executing twice, the popup window is loaded two times.
After popup window is opened first time, after performing operations and closing the window, the window is loaded again after executing the event method 'AddToBasketClicked' again.
[Export(typeof(IFigureDetailView))]
public partial class FigureDetailsView : IFigureDetailView
{
protected IEventAggregator EventAggregator
{
get { return MefFactory.CompositionContainer.GetExportedValueOrDefault<IEventAggregator>(); }
}
public FigureDetailsView()
{
LoggingManager.Debug("Entered into FigureDetails of FigureDetails.xaml.cs-TMSSS.PIT.Modules.Tempo.Views");
InitializeComponent();
var viewModel = MefFactory.CompositionContainer.GetExportedValueOrDefault<IFigureDetailViewModel>();
ViewModel = viewModel;
viewModel.EventAggregator.GetEvent<AddToBasketClickedEvent>().Subscribe(AddToBasketClicked);
LoggingManager.Debug("Exited from FigureDetails of FigureDetails.xaml.cs-TMSSS.PIT.Modules.Tempo.Views");
}
private void AddToBasketClicked(Guid figureItem)
{
LoggingManager.Debug("Entered into AddToBasketClicked of FigureDetails.xaml.cs-TMSSS.PIT.Modules.Tempo.Views");
var addToBasketView = new AddToBasketView();
var viewModel = ViewModel as IFigureDetailViewModel;
if (viewModel != null)
{
addToBasketView.LoadSelectedPart(viewModel.Asset, viewModel.FigureId, figureItem, viewModel.EventAggregator);
}
addToBasketView.WindowStartupLocation = WindowStartupLocation.CenterScreen;
if (addToBasketView.ShowDialog() != true)
{
}
LoggingManager.Debug("Exited from AddToBasketClicked of FigureDetails.xaml.cs-TMSSS.PIT.Modules.Tempo.Views");
}
public bool IsFrontView
{
get { return true; }
set { }
}
public IViewModel ViewModel
{
get { return DataContext as IViewModel; }
set { DataContext = value; }
}
}
As mentioned in the comments by #argaz, the possibility is that you are creating two instances of FigureDetailsView, hence two subscriptions and two dialogs (easiest way would be to check your log).
From general understanding, it's okay to allow creating two instances of FigureDeailsView and in that case your 'AddToBasket' subscription shouldn't be there in this class. It should rather be in a single instance window, like 'Shell'. If nothing specific in your project, then 'FigureDetailsView' shouldn't actually have he code to show "AddToBasket" dialog.
Hope that helps.
So my first attempt did everything out of the code behind, and now I'm trying to refactor my code to use the MVVM pattern, following the guidance of the MVVM in the box information.
I've created a viewmodel class to match my view class, and I'm moving the code out of the code behind into the viewmodel starting with the commands.
My first snag is trying to implement a 'Close' button that closes the window if the data has not been modified. I've rigged up a CloseCommand to replace the 'onClick' method and all is good except for where the code tries to run this.Close(). Obviously, since the code has been moved from a window to a normal class, 'this' isn't a window and therefore isn't closeable. However, according to MVVM, the viewmodel doesn't know about the view, so i can't call view.Close().
Can someone suggest how I can close the window from the viewmodel command?
I personally use a very simple approach: for every ViewModel that is related to a closeable View, I created a base ViewModel like this following example:
public abstract class CloseableViewModel
{
public event EventHandler ClosingRequest;
protected void OnClosingRequest()
{
if (this.ClosingRequest != null)
{
this.ClosingRequest(this, EventArgs.Empty);
}
}
}
Then in your ViewModel that inherits from CloseableViewModel, simply call this.OnClosingRequest(); for the Close command.
In the view:
public class YourView
{
...
var vm = new ClosableViewModel();
this.Datacontext = vm;
vm.ClosingRequest += (sender, e) => this.Close();
}
You don't need to pass the View instance to your ViewModel layer. You can access the main window like this -
Application.Current.MainWindow.Close()
I see no issue in accessing your main window in ViewModel class as stated above. As per MVVM principle there should not be tight coupling between your View and ViewModel i.e. they should work be oblivious of others operation. Here, we are not passing anything to ViewModel from View. If you want to look for other options this might help you - Close window using MVVM
My solution to close a window from view model while clicking a button is as follows:
In view model
public RelayCommand CloseWindow;
Constructor()
{
CloseWindow = new RelayCommand(CloseWin);
}
public void CloseWin(object obj)
{
Window win = obj as Window;
win.Close();
}
In View, set as follows
<Button Command="{Binding CloseWindowCommand}" CommandParameter="{Binding ElementName=WindowNameTobeClose}" Content="Cancel" />
I do it by creating a attached property called DialogResult:
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 && (bool?)e.NewValue == true)
window.Close();
}
public static void SetDialogResult(Window target, bool? value)
{
target.SetValue(DialogResultProperty, value);
}
}
then write this to you XAML, in the window tag
WindowActions:DialogCloser.DialogResult="{Binding Close}"
finally in the ViewModel
private bool _close;
public bool Close
{
get { return _close; }
set
{
if (_close == value)
return;
_close = value;
NotifyPropertyChanged("Close");
}
}
if you change the Close to true, the window will be closed
Close = True;
Here is the simplest and pure MVVM solution
ViewModel Code
public class ViewModel
{
public Action CloseAction { get; set; }
private void CloseCommandFunction()
{
CloseAction();
}
}
Here is XAML View Code
public partial class DialogWindow : Window
{
public DialogWindow()
{
ViewModel vm = new ViewModel();
this.DataContext = vm;
vm.CloseAction = Close;
}
}
This solution is quick and easy. Downside is that there is some coupling between the layers.
In your viewmodel:
public class MyWindowViewModel: ViewModelBase
{
public Command.StandardCommand CloseCommand
{
get
{
return new Command.StandardCommand(Close);
}
}
public void Close()
{
foreach (System.Windows.Window window in System.Windows.Application.Current.Windows)
{
if (window.DataContext == this)
{
window.Close();
}
}
}
}
MVVM-light with a custom message notification to avoid the window to process every notificationmessage
In the viewmodel:
public class CloseDialogMessage : NotificationMessage
{
public CloseDialogMessage(object sender) : base(sender, "") { }
}
private void OnClose()
{
Messenger.Default.Send(new CloseDialogMessage(this));
}
Register the message in the window constructor:
Messenger.Default.Register<CloseDialogMessage>(this, nm =>
{
Close();
});
This is very similar to eoldre's answer. It's functionally the same in that it looks through the same Windows collection for a window that has the view model as its datacontext; but I've used a RelayCommand and some LINQ to achieve the same result.
public RelayCommand CloseCommand
{
get
{
return new RelayCommand(() => Application.Current.Windows
.Cast<Window>()
.Single(w => w.DataContext == this)
.Close());
}
}
using MVVM-light toolkit:
In the ViewModel:
public void notifyWindowToClose()
{
Messenger.Default.Send<NotificationMessage>(
new NotificationMessage(this, "CloseWindowsBoundToMe")
);
}
And in the View:
Messenger.Default.Register<NotificationMessage>(this, (nm) =>
{
if (nm.Notification == "CloseWindowsBoundToMe")
{
if (nm.Sender == this.DataContext)
this.Close();
}
});
This is taken from ken2k answer (thanks!), just adding the CloseCommand also to the base CloseableViewModel.
public class CloseableViewModel
{
public CloseableViewModel()
{
CloseCommand = new RelayCommand(this.OnClosingRequest);
}
public event EventHandler ClosingRequest;
protected void OnClosingRequest()
{
if (this.ClosingRequest != null)
{
this.ClosingRequest(this, EventArgs.Empty);
}
}
public RelayCommand CloseCommand
{
get;
private set;
}
}
Your view model, inherits it
public class MyViewModel : CloseableViewModel
Then on you view
public MyView()
{
var viewModel = new StudyDataStructureViewModel(studyId);
this.DataContext = viewModel;
//InitializeComponent(); ...
viewModel.ClosingRequest += (sender, e) => this.Close();
}
Given a way, Please check
https://stackoverflow.com/a/30546407/3659387
Short Description
Derive your ViewModel from INotifyPropertyChanged
Create a observable property CloseDialog in ViewModel, Change CloseDialog property whenever you want to close the dialog.
Attach a Handler in View for this property change
Now you are almost done. In the event handler make DialogResult = true
first of all give your window a name like
x:Name="AboutViewWindow"
on my close button I've defined Command and Command Parameter like
CommandParameter="{Binding ElementName=AboutViewWindow}"
Command="{Binding CancelCommand}"
then in my view model
private ICommand _cancelCommand;
public ICommand CancelCommand
{
get
{
if (_cancelCommand == null)
{
_cancelCommand = new DelegateCommand<Window>(
x =>
{
x?.Close();
});
}
return _cancelCommand;
}
}
Most MVVM-compliant solution using HanumanInstitute.MvvmDialogs
Implement ICloseable interface in your ViewModel and that's it!
No code in your view whatsoever.