Develop Reference

Main structure for a MVVM WPF

In one hand I have my model which had to collect data from several files and build a oriented object database, and in another I have my interface in which I want to display data from my database . So I use binding but my ComboBox, etc.. remain empty. I have the feeling that my database is built then erased when the interface is launched. Here's the code of my Main defined in the App.xaml.cs:
public partial class App : Application
{
[STAThread]
public static void Main()
{
var application = new App();
application.InitializeComponent();
DirectoryInfo dir = new DirectoryInfo("P:\\....");
Model model = new Model(dir);
model.entityBox.initialize();
application.Run();
}
}
Code for binding in MainWindow.xaml:
<Window.DataContext>
<local:EntityBox></local:EntityBox>
</Window.DataContext>
<Grid>
<ComboBox x:Name="critereComboBox" ItemsSource="{Binding Criteres}"/>
In EntityBox.cs:
private List<string> _criteres = new List<string>();
public void initialize()
{
_criteres.Add("TXC");
_criteres.Add("TYC");
_criteres.Add("TZC");
_criteres.Add("MXC");
_criteres.Add("MYC");
_criteres.Add("MZC");
}
public List<string> Criteres
{
get{ return _criteres; }
}

You need to initialize combobox inside context class, because when you use XAML to bind your data context, the context class is created independently by XAML, the model creation in Main function has literally no effect to your Control.
You also need to implement INotifyPropertyChanged to your Model (ViewModel?) class. I am also suggest you to step into MVVM approach.

I suppose it's a one-way binding. A short answer is to use ObservableCollection
private ObservableCollection<string> _criteres = new ObservableCollection<string>();
As it will notify when you call Add, but you might need to call them in UIDispatcher.

Conversion of XAML to PNG in MVVM

How to perform XAML conversion (eg whole grid or viewbox) to png file?
I need to do this from the ViewModel level.
Link to the example function that I can not call in ViewModel because I do not have access to the object.
Is there a simple and pleasant way?

The view will be responsible for actually exporting the elements that you see on the screen according to the answer you have linked to.
The view model should initialize the operation though. It can do so in a number of different ways.
One option is to send a loosely coupled event or message to the view using an event aggregator or a messenger. Please refer to the following blog post for more information on subject: http://blog.magnusmontin.net/2014/02/28/using-the-event-aggregator-pattern-to-communicate-between-view-models/.
Another option is to inject the view model with a loose reference to the view. The view implements an interface and uses either constructor injection or property injection to inject itself into the view model, e.g.:
public interface IExport
{
void Export(string filename);
}
public partial class MainWindow : Window, IExport
{
public MainWindow()
{
InitializeComponent();
DataContext = new ViewModel(this);
}
public void Export(string filename)
{
//export...
}
}
public class ViewModel
{
private readonly IExport _export;
public ViewModel(IExport export)
{
_export = export;
}
public void DoExport()
{
//...
_export.Export("pic.png");
}
}
This way the view model only knows about and have a depdenceny upon an interface. It's has no dependency upon the view and in your unit tests you could easily provide a mock implementation of the IExport interface.
The view model will and should never have any access to the actual elements to be exported though. These belong to the view.

You need something like Interaction - a way for VM to take something from view. If you don't want to install a whole new framework for that, just use Func property:
Your VM:
public Func<string, Bitmap> GetBitmapOfElement {get;set;}
...
//in some command
var bmp = GetBitmapOfElement("elementName");
Then, in your view you have assign something to that property:
ViewModel.GetBitmapOfElement = elementName =>
{
var uiElement = FindElementByName(elementName); // this part you have figure out or just always use the same element
return ExportToPng(FrameworkElement element); // this is the function form the link form your answer modified to return the bitmap instead of saving it to file
}
If you need it async, just change property type to Func<string, Task<Bitmap>> and assign async function in your view

What about dependency properties? Consider the following class that is used to passing data (the data may be a stream or whatever you want):
public class Requester
{
public event Action DataRequested;
public object Data { get; set; }
public void RequestData() => DataRequested?.Invoke();
}
Then you create a usercontrol and register a dependency property of type Requester:
public partial class MyUserControl : UserControl
{
public static readonly DependencyProperty RequesterProperty
= DependencyProperty.Register("Requester", typeof(Requester), typeof(MainWindow),
new PropertyMetadata(default(Requester), OnRequesterChanged));
public MyUserControl()
{
InitializeComponent();
}
public Requester Requester
{
get => (Requester) GetValue(RequesterProperty);
set => SetValue(RequesterProperty, value);
}
private static void OnRequesterChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
=> ((Requester) e.NewValue).DataRequested += ((MyUserControl) d).OnDataRequested;
private void OnDataRequested()
{
Requester.Data = "XD";
}
}
And your view model would look something like this:
public class MainWindowViewModel
{
public Requester Requester { get; } = new Requester();
public void RequestData() => Requester.RequestData();
}
In XAML you simply bind the dependency property from your control to the property in your view model:
<Window x:Class="Test.MainWindow"
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:Test"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
<local:MainWindowViewModel/>
</Window.DataContext>
<Grid>
<local:MyUserControl Requester="{Binding Requester}"/>
</Grid>
</Window>

Getting result from ShowDialog without resorting to code behind

I'm implementing code from the excellent answer to this question WPF + Castle Windsor + MVVM: Locator-DataContext. I'm not sure how to get the value from ShowDialog() though without resorting to code behind (which breaks testability), anyone have any ideas?
I was using this class with the MVVM Light Messenger class and it was working fine, but entails using the Service Locator anti-pattern.
EDIT
The current code I have that isn't working is
DataSourcePicker.xaml.cs
public DataSourcePicker(IDataSourcePickerViewModel viewModel)
{
InitializeComponent();
_viewModel = viewModel;
DataContext = viewModel;
Closed += (s, a) => RaiseDismissed();
}
public event Action OnDismissed;
private void RaiseDismissed()
{
if (OnDismissed != null)
OnDismissed()
}
in DataSourcePicker.xaml
<Button IsDefault="True" .../>
in MainViewModel.cs
public void NewDataSource()
{
var viewModel = _dspViewModelFactory.ResolveDataSourcePickerViewModel();
var view = _dspFactory.ResolveDataSourcePicker(viewModel);
view.OnDismissed += () => NewDataSourceImplementation(viewModel);
view.ShowDialog();
}
I need some way to set the IsAccepted property on the DataSourcePickerViewModel to true when the user clicks the button

Because you have neglected to show your implementation of "ShowDialog" or explain how your DataSourcePicker shows up in the application, it is difficult to give you a clear solution; So, here are two options depending on your implementation of DataSourcePicker:
In the unlikely event that your DataSourcePicker.ShowDialog method simply invokes MessageBox.Show, your solution is simple.
public void NewDataSource()
{
var viewModel = _dspViewModelFactory.ResolveDataSourcePickerViewModel();
var view = _dspFactory.ResolveDataSourcePicker(viewModel);
var result = view.ShowDialog();
if (result.HasValue)
{
viewModel.IsAccepted = result.Value;
}
}
However, if you have implemented your DataSourcePicker as a custom Modal dialog window, or you do not close the dialog window immediately after ShowDialog has executed, the solution becomes more complex.
In this scenario, you will have to add an ICommand to your viewmodel.
class DataSourcePickerViewModel : IDataSourcePickerViewModel
{
public bool IsAccepted { get; set; }
public ICommand NewDataSourceCommand { get; private set; }
public DataSourcePickerViewModel()
{
NewDataSourceCommand = new RelayCommand(() =>
{
IsAccepted = true;
});
}
}
Then, you will have to update your DataSourcePickerView with:
<Button Command="{Binding NewDataSourceCommand}"
Content="Close"/>
Otherwise, you will need to Use one of the following solutions for binding commands to events:
MVVM Light - EventToCommand
MSDN - EventToCommand
Marlon Grechs AttachedCommandBehavior
Then, you would update the view like so (If using the AttachedCommandBehavior library):
<ModalControl x:Class="_24318313.DataSourcePicker"
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:_24318313"
mc:Ignorable="d" d:DataContext="{d:DesignInstance local:DataSourcePickerViewModel}"
local:CommandBehavior.Event="Close"
local:CommandBehavior.Command="{Binding NewDataSourceCommand}"
d:DesignHeight="300" d:DesignWidth="300"/>
If you feel this doesn't solve you issue, please let me know and I will update in response to your feedback; Otherwise, please mark an answer as accepted.

Lack of knowledge to initializing viewmodel

Okay. So what I need to do is to initialize a ViewModel using a constructor. The problem is I can't create the constructor due lack of knowledge. I'm new to MVVM (or c# in general for that matter) and had to get some help to implement this code:
public class ViewModel
{
private static ViewModel instance = new ViewModel();
public static ViewModel Instance
{
get
{
return instance;
}
}
}
However, I fail to create a constructor to place this code.
DataContext = ViewModel.Instance
It is meant to go into two different pages to pass a value between TextBoxes.
I'm also confused as to whether I should put the ViewModel in both the main window and the page or in just one of the two.
So, anyone can help?

Follow this pattern:
This part is how your model classes should look like,
Even if you use entity framework to create your model they inherit INPC.. so all good.
public class Model_A : INotifyPropertyChanged
{
// list of properties...
public string FirstName {get; set;}
public string LastName {get; set;}
// etc...
}
each view model is a subset of information to be viewed, so you can have many view models for the same model class, notice that in case your make the call to the parameter-less c-tor you get auto instance of a mock model to be used in the view model.
public class ViewModel_A1 : INotifyPropertyChanged
{
public Model_A instance;
public ViewModel()
{
instance = new instance
{ //your mock value for the properties..
FirstName = "Offer",
LastName = "Somthing"
};
}
public ViewModel(Model_A instance)
{
this.instance = instance;
}
}
And this is for your view, if you view in the ide designer you will have a mock view model to show.
public class View_For_ViewModelA1
{
public View_For_ViewModel_A1()
{
//this is the generated constructor already implemented by the ide, just add to it:
DataContext = new ViewModel_A1();
}
public View_For_ViewModel_A1(ViewModel_A1 vm)
{
DataContext = vm;
}
}
XAML Side:
<Window x:Class="WpfApplication1.View_For_ViewModel_A1"
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:ViewModel="clr-namespace:WpfApplication1"
mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"
d:DataContext="{d:DesignInstance ViewModel:ViewModel_A1, IsDesignTimeCreatable=True}"
Title="Window1" Height="300" Width="300">
<Grid>
<TextBox Text="{Binding FirstName}" />
<TextBox Text="{Binding LastName}" />
</Grid>
</Window>
In a more advanced scenario you would want to have a single view model class to relate to several model classes.. but you always should set a view to bind to a single view model.
if you need to kung-fu with your code - make sure you do that in your view model layer.
(i.e. creating a view-model that have several instances of different model types)
Note: This is not the complete pattern of mvvm.. in the complete pattern you can expose command which relate to methods in your model via your view-model and bind-able to your view as well.
Good luck :)

I basically follow this pattern:
public class ViewModelWrappers
{
static MemberViewModel _memberViewModel;
public static MemberViewModel MemberViewModel
{
get
{
if (_memberViewModel == null)
_memberViewModel = new MemberViewModel(Application.Current.Resources["UserName"].ToString());
return _memberViewModel;
}
}
...
}
To bind this to a page is:
DataContext = ViewModelWrappers.MemberViewModel;
And if I'm using more than 1 ViewModel on the page I just bind to the wrapper.
DataContext = ViewModelWrappers;

If you or anybody else, who's new to the MVVM, gets stuck here, for example at the "INotifyPropertyChanged could not be found". I recommend trying some example-MVVM's or tutorials.
Some I found useful:
http://www.codeproject.com/Articles/165368/WPF-MVVM-Quick-Start-Tutorial
https://www.youtube.com/watch?v=EpGvqVtSYjs&index=1&list=PL356CA0B2C8E7548D

Setting Caliburn.Micro ControlContent from another ViewModel

I'm new to Caliburn.Micro (and MVVM for that matter) and I'm trying to Activate a screen with my conductor located in ShellViewModel from a button within a sub-viewmodel (one called by the conductor). All the tutorials I've seen have buttons in the actual shell that toggle between so I'm a little lost.
All the ViewModels share the namespace SafetyTraining.ViewModels
The ShellViewModel (first time ever using a shell so I might be using it in the wrong manner)
public class ShellViewModel : Conductor<object>.Collection.OneActive, IHaveDisplayName
{
public ShellViewModel()
{
ShowMainView();
}
public void ShowMainView()
{
ActivateItem(new MainViewModel());
}
}
ShellView XAML
<UserControl x:Class="SafetyTraining.Views.ShellView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel>
<ContentControl x:Name="ActiveItem" />
</DockPanel>
MainViewModel - the main screen (does correctly display).
public class MainViewModel : Screen
{
public void ShowLoginPrompt()
{
LoginPromptViewModel lg = new LoginPromptViewModel();//This does happen
}
}
MainView XAML
<Button cal:Message.Attach="[Event Click] = [ShowLoginPrompt]">Login</Button>
LoginPromptViewModel
public class LoginPromptViewModel : Screen
{
protected override void OnActivate()
{
base.OnActivate();
MessageBox.Show("Hi");//This is for testing - currently doesn't display
}
}
EDIT Working Code:
Modified Sniffer's code a bit to properly fit my structure. Thanks :)
var parentConductor = (Conductor<object>.Collection.OneActive)(this.Parent);
parentConductor.ActivateItem(new LoginPromptViewModel());

You are doing everything correctly, but you are missing one thing though:
public void ShowLoginPrompt()
{
LoginPromptViewModel lg = new LoginPromptViewModel();//This does happen
}
You are creating an instance of LoginPromptViewModel, but you are not telling the conductor to activate this instance, so it's OnActivate() method is never called.
Now before I give you a solution I should suggest a couple of things:
If you are using the MainViewModel to navigate between different view-models then it would be appropriate to make MainViewModel a conductor itself.
If you aren't using it like that, then perhaps you should put the button that navigates to the LoginPromptViewModel in the ShellView itself.
Now back to your problem, since your MainViewModel extends Screen then it has a Parent property which refers to the Conductor, so you can do it like this:
public void ShowLoginPrompt()
{
LoginPromptViewModel lg = new LoginPromptViewModel();//This does happen
var parentConductor = (Conductor)(lg.Parent);
parentConductor.Activate(lg);
}