I am currently developing a WPF App in C#. I am using Caliburn Micro as Framework. The MainWindow (ShellView) consists mainly of a left and a right part. Both parts are TabControls. On the left side I have 3 tabs and on the right side I have 6 tabs.
Currently I'm instantiating the 9 ViewModels of the 9 views with the constructor of the ShellViewModel, and then I bind the View with a ContentControl to the TabControl.
Normally with Caliburn Micro that could be handled better with the Conductor-class. I could create a list and bind that list to the TabControl and that's it.
But the problem is I have the Items-Collection only once, because it's inherited from the Conductor-class. So if I bind the left TabControl to the same Items as the right TabControl I will have the same tabs on both sides, which is not what I want to have.
Is there a way to have 2 independent Items-collections?
Thank you
You need to create a separate view model for each side of your main screen. Each of these view models can then inherit from the Conductor<object>.Collection.OneActive class. Your shell view model would then be composed of two sub-view models. Your shell view would also be composed of two content controls where each of the sub-view models and sub views are to be displayed.
public class ShellViewModel : Conductor<object>.Collection.AllActive {
public LeftSideViewModel LeftSide { get; set; }
public RightSideViewModel RightSide { get; set; }
public ShellViewModel(LeftSideViewModel leftSide, RightSideViewModel rightSide) {
LeftSide = leftSide;
RightSide = rightSide;
ActivateItem(leftSide);
ActivateItem(rightSide);
}
}
<UserControl x:Class="Workbench.Views.ShellView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel LastChildFill="True">
<ContentControl x:Name="LeftSide" DockPanel.Dock="Top"/>
<ContentControl x:Name="RightSide"/>
</DockPanel>
</UserControl>
public class LeftSideViewModel : Conductor<object>.Collection.OneActive {
public LeftSideViewModel(...) {
ActivateItem(yourTabViewModel);
ActivateItem(anotherTabViewModel);
...
}
}
public class RightSideViewModel : Conductor<object>.Collection.OneActive {
public RightSideViewModel(...) {
ActivateItem(yourTabViewModel);
ActivateItem(anotherTabViewModel);
...
}
}
<UserControl x:Class="Workbench.Views.LeftSideView"
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:cal="http://www.caliburnproject.org"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<TabControl x:Name="Items" BorderThickness="0" TabStripPlacement="Bottom">
<TabControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding TabText}" />
<!-- The grid will not appear (collapsed) if the tab cannot be closed -->
<Grid Visibility="{Binding CloseTabIsVisible, Converter={StaticResource BoolToVisibilityConverter}}">
<!-- The tab close button -->
<Button x:Name="CloseTab" Cursor="Hand" Focusable="False" Content="X" cal:Message.Attach="[Click] = [CloseTab($this)]" />
</Grid>
</StackPanel>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
</Grid>
</UserControl>
Related
In my project, I wanted a UserControl that can display different formats of an image (bitmap, svg), selected from a ListBox. The SelectedItem of the ListBox is bound to the appropriate view model, which in turn changes the DataContext of the UserControl, and what I want to achieve is for it to change the displaying control (an Image for bitmaps, a SharpVectors.SvgViewBox for svg files) through data templates. It does so, but raises data binding errors, as if the templates were still intact whilst the UserControl's DataContext has already been changed.
I should like to a) avoid any data binding errors even if they cause no visible problems b) understand what is happening, so I prepared a MWE, which, to my surprise, displays the same behaviour, so I can present it here.
My minimal UserControl is as follows:
<UserControl x:Class="BindingDataTemplateMWE.VersatileControl"
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:system="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Resources>
<DataTemplate DataType="{x:Type system:String}">
<TextBlock Text="{Binding Content.Length, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ContentControl}}" />
</DataTemplate>
<DataTemplate DataType="{x:Type system:DateTime}">
<TextBlock Text="{Binding Content.DayOfWeek, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ContentControl}}" />
</DataTemplate>
</UserControl.Resources>
<Grid>
<ContentControl
Content="{Binding .}" />
</Grid>
</UserControl>
The MainWindow that references this UserControl has the following XAML:
<Window x:Class="BindingDataTemplateMWE.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:BindingDataTemplateMWE"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ListBox
Grid.Column="0"
SelectedItem="{Binding Selected}"
ItemsSource="{Binding Items}" />
<local:VersatileControl
Grid.Column="1"
DataContext="{Binding Selected}" />
</Grid>
</Window>
with the following code-behind (to make the MWE indeed minimal, I made the window its own DataContext, but originally there is a dedicated view model):
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Windows;
namespace BindingDataTemplateMWE
{
public partial class MainWindow : Window, INotifyPropertyChanged
{
private object selected;
public event PropertyChangedEventHandler PropertyChanged;
public List<object> Items { get; }
public object Selected {
get { return selected; }
set {
selected = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Selected)));
}
}
public MainWindow()
{
InitializeComponent();
DataContext = this;
Items = new List<object>() { "a string", DateTime.Now, "another string" };
}
}
}
When I select a different item in the list, the desired effect takes place: the UserControl displays the length if a string is selected and the day of week when a DateTime. Still, I get the following binding error when selecting a DateTime after a string:
Length property not found on object of type DateTime.
and conversely, selecting a string after a DateTime yields
DayOfWeek property not found on object of type String.
It is clear that what I am doing is not meant to be done, but I do not know what the correct paradigm is and what happens in the background. Please advise me. Thank you.
I've seen this problem often when creating complex data templates (several levels of nesting) when views are loaded/unloaded. Honestly, some of such errors I am ignoring completely.
In your case something similar happens because you are manipulating DataContext directly. At the moment the new value is set, the previous value is still used in bindings, which monitor for source change and will try to update the target.
In your scenario you don't need this constant monitoring, so an easy fix is to use BindingMode.OneTime:
<DataTemplate DataType="{x:Type system:String}">
<TextBlock Text="{Binding Content.Length, RelativeSource={RelativeSource AncestorType=ContentControl}, Mode=OneTime}" />
</DataTemplate>
Evidently using "Resources" to set an control's DataContext does not do what I think. I'm trying to stick close to MVVM. The following is an experiment in setting DataContext.
The MainWindow has a TabControl with two tabs, each displaying my pet's name, initally "Sam". Clicking the "ChangeName" button on Tab 1 changes the pet's name (to "Daisy") as expected. It does not change on Tab 2.
The content of Tab 2 is a Page, with its own DataContext, SecondTabViewModel. So I need to adjust the DataContext in the TextBlock in order to get at MyPet's name. This compiles ok, and Intellisense brings up the right things, so somehow within the control is being set. But the pet's name does not change.
Does the "StaticResource" generate instantiate a new copy of MainWindow or something? Can someone help me out? I'd love to know why this doesn't work, and what would work. This strategy for setting local DataContext is supposed to work according to the docs at https://learn.microsoft.com/en-us/dotnet/desktop/wpf/data/?view=netdesktop-5.0 but I must be misreading.
To abbreviate I've omitted some of the code (the pet class. But everything seems to be ok there, in I'm able to change the name on the first tab The Pet class implements INotifyPropertyChanged, I'm using the right handler etc.)
MainWindow.xmal
<Window x:Class="WpfApp9.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:WpfApp9"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
<local:MainWindowViewModel/>
</Window.DataContext>
<Grid>
<TabControl>
<TabItem Header="First Tab" Height="50">
<StackPanel>
<TextBlock Text="{Binding MyPet.Name}"/>
<Button Content="Change Name"
Command="{Binding ChangePetNameCommand}"/>
</StackPanel>
</TabItem>
<TabItem Header="Second Tab" Height="50">
<Frame Source="SecondTab.xaml"/>
</TabItem>
</TabControl>
</Grid>
</Window>
MainWindowViewModel
public class MainWindowViewModel
{
public Pet MyPet { get; set; }
public ICommand ChangePetNameCommand { get; set; }
public MainWindowViewModel()
{
MyPet = new Pet();
ChangePetNameCommand =
new RelayCommand(ChangePetName, (Object o) => true);
}
public void ChangePetName(object o)
{
MyPet.Name = "Daisy";
}
}
SecondTab.xmal
<Page x:Class="WpfApp9.SecondTab"
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:WpfApp9"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="SecondTab">
<Page.DataContext>
<local:SecondTabViewModel/>
</Page.DataContext>
<Page.Resources>
<local:MainWindowViewModel x:Key="M"/>
</Page.Resources>
<Grid>
<StackPanel>
<TextBlock Text="{Binding Source={StaticResource M},
Path = MyPet.Name}"/>
</StackPanel>
</Grid>
</Page>
SecondTabviewModel
namespace WpfApp9
{
public class SecondTabViewModel
{
public SecondTabViewModel()
{
}
}
}
The lines
<Page.Resources>
<local:MainWindowViewModel x:Key="M"/>
</Page.Resources>
in SecondTab.xaml are creating a second MainWindowViewModel instance.
In other words, SecondTab does not operate on the original MainWindowViewModel.
You would somehow have to pass a reference to the original MainWindowViewModel instance to SecondTabViewModel.
Instead of using a Frame and a Page, SecondTab could perhaps be a UserControl that simply inherits the DataContext from its parent element, and you could pass a view model object like
<TabItem Header="Second Tab" Height="50">
<local:SecondTab DataContext="{Binding SecondTabVM}"/>
</TabItem>
where SecondTabVM is a property of MainWindowViewModel that holds a SecondTabViewModel instance.
Learning C#, specifically WPF, and the MVVM framework. I'm creating a basic project that presents a MainWindow with a contentcontrol binding. Straightforward.
I have 2 views, each with a textbox. I have 2 buttons on the MainWindow, each allow me to toggle between views. However, when I enter data in a textbox, switch views, and come back, the data is gone. How can I persist that data to be consumed later?
Relevant code:
MainWindow.xaml
<Window x:Class="TestDataRetention.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:TestDataRetention"
xmlns:views="clr-namespace:TestDataRetention.Views"
xmlns:viewmodels="clr-namespace:TestDataRetention.ViewModels"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<DataTemplate DataType="{x:Type viewmodels:View1ViewModel}">
<views:View1View DataContext="{Binding}"/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewmodels:View2ViewModel}">
<views:View2View DataContext="{Binding}"/>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Right">
<Button x:Name="View1Button" Margin="10" Width="80" Content="View1" Click="View1Button_Click"/>
<Button x:Name="View2Button" Margin="10" Width="80" Content="View2" Click="View2Button_Click"/>
</StackPanel>
<ContentControl x:Name="Content" Grid.Row="0" Content="{Binding}"/>
</Grid>
</Window>
MainWindow.xaml.cs
using System.Windows;
using TestDataRetention.ViewModels;
namespace TestDataRetention
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void View1Button_Click(object sender, RoutedEventArgs e)
{
DataContext = new View1ViewModel();
}
private void View2Button_Click(object sender, RoutedEventArgs e)
{
DataContext = new View2ViewModel();
}
}
}
View1View.xaml
<UserControl x:Class="TestDataRetention.Views.View1View"
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:TestDataRetention.Views"
xmlns:vm="clr-namespace:TestDataRetention.ViewModels"
mc:Ignorable="d"
FontSize="24"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.DataContext>
<vm:View1ViewModel/>
</UserControl.DataContext>
<Grid Background="AliceBlue">
<StackPanel>
<Label HorizontalAlignment="Center" Content="Enter View1 Stuff"/>
<TextBox x:Name="View1TextBox" Width="400" Height="50" Text="{Binding View1Words}" />
</StackPanel>
</Grid>
</UserControl>
View1View.xaml.cs
using System.Windows.Controls;
using TestDataRetention.ViewModels;
namespace TestDataRetention.Views
{
public partial class View1View : UserControl
{
public View1View()
{
InitializeComponent();
this.DataContext = new View1ViewModel();
}
}
}
View2 is obviously the same as View1 but with corresponding variables.
While there might also be a way to just have wpf cache it for you, you can just as easily save it properly and then have the input available at will.
Look here for two methods on how to:
How to save user inputed value in TextBox? (WPF, XAML)
At quick glance, you create new ViewModel each time your button is clicked, this will always create new ViewModel for your DataContext not using the original one.
Also this snippet from your code will create new ViewModel for your Control's DataContext regardless of the one the parent control has:
<UserControl.DataContext>
<vm:View1ViewModel/>
</UserControl.DataContext>
And I am not sure how you use your DataTemplate here:
<DataTemplate DataType="{x:Type viewmodels:View1ViewModel}">
<views:View1View DataContext="{Binding}"/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewmodels:View2ViewModel}">
<views:View2View DataContext="{Binding}"/>
</DataTemplate>
But generally, as a guidance for you to model your MVVM project, always keep in mind that XAML code is translated to C# while compiling. So when writing something like <vm:View1ViewModel/> you actually do new View1ViewModel().
So for you to use the DataContext your control inherited from its parent, you just use <UserControl DataContext="{binding}" for your UserControl.
And for your button click, you have to keep a pointer for your previously created ViewModel and assign it to the DataContext when needed, I suggest you to create these ViewModels only when needed to minimize memory consumption in large applications, like:
private View1ViewModel m_View1VM = null;
private void View1Button_Click(object sender, RoutedEventArgs e)
{
if (m_View1VM is null)
m_View1VM = new View1ViewModel();
this.DataContext = m_View1VM;
}
Hello stackoverflowers.
I would like to display dynamically some elements on the screen. I have a OverlayElement base class, and some children classes. The OverlayElement base class contains a FrameworkElement that correspond to a small usercontrol that defines how to draw my OverlayElement.
I have an OverlayViewModel which contain a collection of OverlayElements, binded to an Itemcontrol in the View.
Here are excerpts of OverlayElement and a child.
public abstract class OverlayElement : INotifyPropertyChanged
{
public UserControl View;
}
public class ImageOverlayElement : OverlayElement
{
public ImageOverlayElement(Point start, Point end)
{
View = new ImageOverlayElementView();
}
}
Here is an exemple of ImageOverlayElementView
<UserControl x:Class="Client.ImageOverlayElementView"
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:Client"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
d:DataContext="{d:DesignInstance local:ImageOverlayElement}">
<Grid>
<Image
Source="{Binding ImageSource}"
Height="{Binding Height}"
Width="{Binding Width}"/>
</Grid>
</UserControl>
And this is how i try to use these elements. My problem is that i don't know how to insert my UserControl View from OverlayElement (initialized in the child class) :
<ItemsControl
ItemsSource="{Binding OverlayElementsList}"
Background="Transparent">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type elements:OverlayElement}">
<!-- Need help for here, how can I insert my UserControl View from OverlayElement ? (initialized in the child class) -->
</DataTemplate>
</ItemsControl.Resources>
</ItemsControl>
You can simply put the view in ContentControl:
<DataTemplate DataType="{x:Type local:OverlayElement}">
<ContentControl Content="{Binding View}" />
</DataTemplate>
But make sure View is a property, otherwise it won't work with data binding.
i know that there a many articles about my problem but i cant find a solution.
I am new in WPF - MVVM and i try to understand the MVVM-Logic.
So i made a little project to understand that.
For my later apps i want to load UserControls dynamicly to my Window.
In my StartView i have a Binding to the StartViewModel.
(The Binding is in the APP.xaml)
StartView app = new StartView();
StartViewModel context = new StartViewModel();
The StartView
<Window x:Class="test.Views.StartView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:views="clr-namespace:test.ViewModel"
Title="Window1" Height="300" Width="516">
<Grid>
<Menu IsMainMenu="True" Margin="0,0,404,239">
<MenuItem Header="_Einstellungen">
<MenuItem Header="Server" />
</MenuItem>
</Menu>
<ContentControl Content="{Binding LoadedControl}" Margin="0,28,0,128" />
</Grid>
</Window>
the StartViewModel
namespace test.ViewModel
{
public class StartViewModel : ViewModelBase
{
#region Fields
private UCStastistikViewModel _loadedControl;
#endregion
public StartViewModel()
{
LoadedControl = new UCStastistikViewModel();
}
#region Properties / Commands
public UCStastistikViewModel LoadedControl
{
get { return _loadedControl; }
set
{
if (value == _loadedControl)
return;
_loadedControl = value;
OnPropertyChanged("LoadedControl");
}
}
#endregion
#region Methods
#endregion
}
}
UCStatistikView
<UserControl x:Class="test.Views.UCStatistik"
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:vm="clr-namespace:test.ViewModel"
mc:Ignorable="d"
d:DesignHeight="188" d:DesignWidth="508">
<UserControl.DataContext>
<vm:UCStastistikViewModel />
</UserControl.DataContext>
<Grid Background="red">
</Grid>
</UserControl>
UCStatistikViewModel
namespace test.ViewModel
{
public class UCStastistikViewModel : ViewModelBase
{
#region Fields
#endregion
public UCStastistikViewModel()
{
}
#region Properties / Commands
#endregion
#region Methods
#endregion
}
}
Now i want to load my UCStatistikView in the ContentControl of my StartView.
But in the Startview only the Path test.UCStatistikViewModel is shown instead of the whole UC
Can anybody give me some Ideas where my problem is / where im am going wrong ?
Bye j
Your ViewModels should not care about UserControls. Instead, have them hold ViewModels, and let WPF resolve how to draw the ViewModel with a DataTemplate.
For example,
<Window x:Class="test.Views.StartView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:views="clr-namespace:test.Views"
xmlns:viewmodels="clr-namespace:test.ViewModel"
Title="Window1" Height="300" Width="516">
<Window.Resources>
<DataTemplate DataType="{x:Type viewmodels:UCStastistikViewModel}">
<views:UCStastistikView />
</DataTemplate>
</Window.Resources>
<Grid>
<Menu IsMainMenu="True" Margin="0,0,404,239">
<MenuItem Header="_Einstellungen">
<MenuItem Header="Server" />
</MenuItem>
</Menu>
<ContentControl Content="{Binding LoadedControl}" Margin="0,28,0,128" />
</Grid>
</Window>
Also, get rid of the <UserControl.DataContext> in your UserControl. The DataContext should be passed in by whatever is using the control, not defined in the UserControl :)
Edit
Based on your comment to an earlier answer about switching out the content of the StartPage by switching a ViewModel, you may be interested in looking at this post of mine. It's titled Navigation with MVVM, however the same concept applies for switching Views or UserControls
Basically, you'd make the property LoadedControl of type ViewModelBase instead of hard-coding it's type, and then set it to whatever object you want displayed in your ContentControl. WPF's DataTemplates will take care of hooking up the correct View for the ViewModel.
WPF doesn't support automatic resolution of the view for a given view model. The naive solution to your problem would be to directly add the UCStatistikView to your StartView and bind the VM to it
<Window x:Class="test.Views.StartView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:views="clr-namespace:test.ViewModel"
Title="Window1" Height="300" Width="516">
<Grid>
<Menu IsMainMenu="True" Margin="0,0,404,239">
<MenuItem Header="_Einstellungen">
<MenuItem Header="Server" />
</MenuItem>
</Menu>
<UCStatistikView DataContext="{Binding LoadedControl}" Margin="0,28,0,128" />
</Grid>
A more elaborated approach would be to implement a ViewLocator (view model first approach) or a ViewModelLocator (view first approach). The locator automatically locates and binds the view(s) to a view model. There are some MVVM frameworks/toolkits out there which implement such a locator.
Caliburn.Micro: Offers a flexible ViewLocator and ViewModelLocator based on naming conventions. Here is an article about them
MVVM Light: Offers a ViewModelLocator. Here is an introduction
With Caliburn.Micro you start view would look like this
<Window x:Class="test.Views.StartView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:views="clr-namespace:test.ViewModel"
Title="Window1" Height="300" Width="516">
<Grid>
<Menu IsMainMenu="True" Margin="0,0,404,239">
<MenuItem Header="_Einstellungen">
<MenuItem Header="Server" />
</MenuItem>
</Menu>
<ContentControl cm:View.Model="{Binding LoadedControl}" Margin="0,28,0,128" />
</Grid>
The cm:View.Model="{Binding LoadedControl}" attached property tells caliburn to locate the view for the view model which is bound and set the Content property of the ContentControl to it.
Here's what you should do:
The StartView:
<Window x:Class="test.Views.StartView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:views="clr-namespace:test.ViewModel"
Title="Window1" Height="300" Width="516">
<Grid>
<Menu IsMainMenu="True" Margin="0,0,404,239">
<MenuItem Header="_Einstellungen">
<MenuItem Header="Server" />
</MenuItem>
</Menu>
<UCStatistikView x:Name="myUCStatistikView" Margin="0,28,0,128" />
</Grid>
</Window>
the StartViewModel:
namespace test.ViewModel
{
public class StartViewModel : ViewModelBase
{
private UCStastistikViewModel _myControlViewModel;
public StartViewModel()
{
_myControlViewModel = new UCStastistikViewModel();
}
public UCStastistikViewModel MyControlViewModel
{
get { return _myControlViewModel; }
set
{
if (value == _myControlViewModel)
return;
_myControlViewModel = value;
OnPropertyChanged("MyControlViewModel");
}
}
}
}
UCStatistikView:
<UserControl x:Class="test.Views.UCStatistik"
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:vm="clr-namespace:test.ViewModel"
mc:Ignorable="d"
d:DesignHeight="188" d:DesignWidth="508">
<Grid Background="red">
</Grid>
</UserControl>
Code behind of your StartView:
this.myUCStatistikView.DataContext = ((StartViewModel)this.DataContext).MyControlViewModel;
After having tested different approaches, my conclusion is that the best way for datacontext bindings is the code-behind of the parent view in case you have userControls.
EDIT: ViewModel locators are fine for trivial examples but if your ViewModel must be instantiated dynamically (it's mostly the case when its constructor requires parameters), the you can't use it.
I personally stopped using locators because of this.
Review :- http://patelrocky1608.wordpress.com/2013/12/26/how-to-add-custom-control-dynamically-in-wpf/
Which Contain Whole Code For Understand UserControl Dynamically..