Develop Reference

How to switch contenttemplate dependent which view model object?

How to settings which view showup when specific viewmodel set? i read this explain with data template but i still dont understand. cause it dont show all code that use data template as switch view. https://learn.microsoft.com/en-us/archive/msdn-magazine/2009/february/patterns-wpf-apps-with-the-model-view-viewmodel-design-pattern
<Window x:Class="Pandora.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:Pandora.ViewModels"
Title="Pandora" Height="350" Width="525">
<Window.ContentTemplate>
<DataTemplate DataType="{x:Type vm:IndexViewModel}">
<TextBlock>Index Content</TextBlock>
</DataTemplate>
<DataTemplate DataType="{x:Type vm:DashboardViewModel}">
<TextBlock>Dashboard Content</TextBlock>
</DataTemplate>
</Window.ContentTemplate>
</Window>
C#
using Pandora.ViewModels;
namespace Pandora.Views;
public partial class MainWindow
{
public MainWindow()
{
InitializeComponent();
DataContext = new IndexViewModel();
}
}

For Window to show anything it should have some Content (empty Window template contains <Grid></Grid> element). Simply copy Content from DataContext by using binding.
In your case you want to show elements, which don't have visual representation of their own (IndexViewModel, DashboardViewModel), so they require a custom DataTemplate. You already have, just put them in Resources.
<Window x:Class="Pandora.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:Pandora.ViewModels"
Title="Pandora"
Content="{Binding}"
Height="350" Width="525">
<Window.Resources>
<DataTemplate DataType="{x:Type vm:IndexViewModel}">
<TextBlock>Index Content</TextBlock>
</DataTemplate>
<DataTemplate DataType="{x:Type vm:DashboardViewModel}">
<TextBlock>Dashboard Content</TextBlock>
</DataTemplate>
</Window.Resources>
</Window>
or more common method which uses a separate element to insert custom content:
<Window x:Class="Pandora.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:Pandora.ViewModels"
Title="Pandora"
Height="350" Width="525">
<Window.Resources>
<DataTemplate DataType="{x:Type vm:IndexViewModel}">
<TextBlock>Index Content</TextBlock>
</DataTemplate>
<DataTemplate DataType="{x:Type vm:DashboardViewModel}">
<TextBlock>Dashboard Content</TextBlock>
</DataTemplate>
</Window.Resources>
<Grid>
<ContentPresenter Content="{Binding}"/>
<TextBlock Text="Demo watermark" VerticalAlignment="Center" HorizontalAlignment="Center" IsHitTestVisible="False"/>
</Grid>
</Window>

You must assign the IndexViewModel or DashboardViewModel instance to the Window.Content property. The ContentTemplate applies to the data object that is the current value of the Content property:
public partial class MainWindow
{
public MainWindow()
{
InitializeComponent();
this.Content = new IndexViewModel();
}
}

Can't fire commands in window with frame

I have a WPF window with a grid containing 4 rectangles. One of these has a <frame> for showing pages, which is used in my application. I want to add commands to these buttons on my windows as well as to the pages.
Things I use: MVVM, Window as Mainwindow and Pages as contentpublisher in a frame.
For example, I want to login applicationwide with a button and command. While doing this on the page in my frame there are no errors, but I can't do the same in the window.
I was wondering if the windows lose focus so it can't fire that event while navigating to a page in the frame. So I tried to get the window with following command binding:
<Button Content="" FontFamily="Segoe UI Symbol"
Command="{Binding CommandWhichDoesNotFire, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type vw:MainViewModel}}}"
Width="32">
In my ViewModel "MainViewModel" I have a public ICommand Property and I initialize it at the constructor:
public ICommand CommandWhichDoesNotFire;
public MainViewModel()
{
MessageBox.Show("VM is real");
CommandWhichDoesNotFire= new TestCommand();
}
The DataContext of my MainView is set in the behind-code BEFORE InitilizeComponents();
Clicking on the button does not start ANY call of my command. It simply does not fire at all. What am I missing guys?

You should have :
public ICommand CommandWhichDoesNotFire{get;set;}
public MainViewModel()
{
MessageBox.Show("VM is real");
CommandWhichDoesNotFire= new TestCommand(MyCommand);
}
private void MyCommand(object obj){
//Whatever you want to do
}

I think I have found a solution to your problem.
The Frame for some reason doesn't inherit the DataContext of it's parent, even if you set the DataContext explicitly like so:
DataContext="{Binding DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MainWindow}}}"
it still doesn't work. What it does it only sets the DataContext of the frame but not child elements:
And here is the DataContext of a child element:
Now this made me think that whatever we have always loved about WPF and it's controls was the ability to inherit the DataContext from it's parent, with exception of ContextMenu and now the Frame. Here is the approach I took when I had a frist look at oyur problem:
<Window x:Class="WpfApplication1.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:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:MainVM/>
</Window.DataContext>
<Window.Resources>
<!--<local:MainVM x:Key="mainVM"/>-->
<local:LoginPage x:Key="login" />
<!--DataContext="{StaticResource mainVM}"-->
<ControlTemplate x:Key="ctrlTmpl">
<local:LoginPage/>
</ControlTemplate>
</Window.Resources>
<Grid>
<!--<Button x:Name="button" Content="Do something" Click="btnDoSomething" HorizontalAlignment="Left" Margin="221,60,0,0" VerticalAlignment="Top" Width="75"/>-->
<!--<Control Template="{StaticResource ctrlTmpl}"/> This works-->
<Frame Content="{StaticResource login}" DataContext="{Binding DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MainWindow}}}" />
</Grid>
Then I thought you can do this another way:
<Window x:Class="WpfApplication1.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:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<!--<Window.DataContext>
<local:MainVM/>
</Window.DataContext>-->
<Window.Resources>
<local:MainVM x:Key="mainVM"/>
<local:LoginPage x:Key="login" DataContext="{StaticResource mainVM}"/>
<!---->
<ControlTemplate x:Key="ctrlTmpl">
<local:LoginPage/>
</ControlTemplate>
</Window.Resources>
<Grid>
<!--<Button x:Name="button" Content="Do something" Click="btnDoSomething" HorizontalAlignment="Left" Margin="221,60,0,0" VerticalAlignment="Top" Width="75"/>-->
<!--<Control Template="{StaticResource ctrlTmpl}"/> This works-->
<Frame Content="{StaticResource login}"/>
</Grid>
Notice how I included the VM in the resources and then used that instance to be the Controls DataContext. At this point when I click the button in my LoginPage.xaml which by the way is a UserControl it triggers the Command located in my MainVM. At this point you would have to assign the Window DataContext in the code behind like so:
public MainWindow()
{
InitializeComponent();
var vm = this.TryFindResource("mainVM");
if(vm != null)
{
this.DataContext = vm;
}
}
Now at this point you can use some sort of triggers to navigate through pages and use different Pages or UserControls. HTH
P.S. When I get a chance I will update some information about Context Menu and Frame from MSDN. Happy Coding

Why tabitem do not show view

I am workign on MVVM, and i have Main View in which i have a tabcontrol and 3 tabitems. Now on click to each tabitems i want to display a new view. (I have three Views).
My try to do that is :
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm1="clr-namespace:WpfApplication1"
xmlns:vm2="clr-namespace:WpfApplication1"
xmlns:vm3="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<vm1:View1 x:Key="View1Display1"></vm1:View1>
<vm2:View2 x:Key="ViewDisplay2"></vm2:View2>
<vm3:View3 x:Key="ViewDisplay3"></vm3:View3>
</Window.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<TabControl Background="Green">
<TabItem Height="20" Width="100" Header="Tab1" DataContext="{Binding Path=View1Display1}"></TabItem>
<TabItem Height="20" Width="100" Header="Tab2" DataContext="{Binding Path=View1Display2}"></TabItem>
<TabItem Height="20" Width="100" Header="Tab3" DataContext="{Binding Path=View1Display3}"></TabItem>
</TabControl>
</Grid>
</Window>
Where View1 is : (Similar is View2 and View3)
<UserControl x:Class="WpfApplication1.View1"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">I am from View1</TextBlock>
</Grid>
</UserControl>
MainWindow.xaml.cs is :
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel();
}
}
This is ViewModel:
class ViewModel
{
public ViewModel()
{
}
}
Why TabItem do not show the respective views on clicking to them even i have set datacontext corresponding to their View.

Instead of binding the DataContext on each TabItem, you need to bind the Content, and then you can bind each TabItem to an instance of its ViewModel, of Do that in the UserControls them selfs
<TabControl Background="Green">
<TabItem Height="20" Width="100" Header="Tab1" Content="{StaticResource View1Display1}"></TabItem>
<TabItem Height="20" Width="100" Header="Tab2" Content="{StaticResource ViewDisplay2}"></TabItem>
<TabItem Height="20" Width="100" Header="Tab3" Content="{StaticResource ViewDisplay3}"></TabItem>
</TabControl>
since your views are defined as static resource use StaticResource instead of binding

WPF Binding inner control with parent data context

I made a user control
<UserControl x:Class="MyApp.MyControl"
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"
mc:Ignorable="d" x:Name="uc">
<Grid Width="Auto" Height="Auto">
<TextBlock Text="{Binding Path=DataContext.TextContent, ElementName=uc}"/>
<TextBlock Text="{Binding Path=DataContext.TextContent2, ElementName=uc}"/>
</Grid>
I want the sub-controls in the defined control(uc) will bind to the properties of uc.DataContext. I used the defined control as follows:
<Window x:Class="Tms.TMSClient.Views.MainWindow" Name="window"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:control="clr-namespace:MyApp"
xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary">
<control:MyControl DataContext="{Binding Path=MyControlVM}"/>
The DataContext which is assigned to the window has this structure: WindowVM.MyControlVM.TextContent.
The given code does not work because the textbox's DataContext is bound to WindowVM instead. I think the problem may be because the inner textbox is bound before the defined control (uc) is, thus the bounded DataContext for uc does not take effect yet.
What I want is: the custom control (MyControl) will be bound to its corresponding viewmodel (MyControlVM), and the inner elements of MyControl will be bound to the properties of MyControlVM.
Do you have any solutions for this problem?

If I understand you correctly, you want to data bind a property from your MyControl view model to a TextBox.Text property inside the MyControl UserControl. If that is correct, then you can use a RelativeSource Binding, or the ElementName syntax that you are already using.
First, make sure that your view model is set as the DataContext for the UserControl:
public MyControl()
{
DataContext = new YourControlViewModel();
}
As child controls automatically inherit their parent's DataContext objects, you can now reference this view model from the TextBox through the MyControl.DataContext property from the UserControl's XAML:
<TextBlock Text="{Binding DataContext.TextContent,
RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />
That's all you need.

<TextBlock Text="{Binding Path=TextContent}"/>
works for me in my test-application.
MainWindow.xaml
<Window x:Class="DataContextTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:DataContextTest"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<my:MyOuterDataContext />
</Window.DataContext>
<Grid>
<my:MyControl DataContext="{Binding Path=MyInnerDataContext}" />
</Grid>
MyControl.xaml
<UserControl x:Class="DataContextTest.MyControl"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<TextBlock Text="{Binding Path=TextContent}" />
</Grid>
DataContexts:
public class MyOuterDataContext
{
public MyInnerDataContext MyInnerDataContext { get; set; }
public MyOuterDataContext()
{
MyInnerDataContext = new MyInnerDataContext();
}
}
public class MyInnerDataContext
{
public string TextContent { get { return "foo"; } }
}

By default every control inherits its DataContext from its parent control. Thus there is no need to explicitly bind to it.
Indeed, when you want to bind a control's DataContext to a nested property then you have to specifiy this:
<control:MyControl DataContext="{Binding Path=TextContent}"/>

Set the datacontext of a usercontrol within a usercontrol no matter how many layers of usercontrol

I'm currently creating an application that would test the flexibility of WPF. I have some usercontrols that were intended to be quite transparent when it comes to its ViewModel. What I mean by transparent is that the usercontrol can use any type of ViewModel provided that the ViewModel has all the required properties that would be binded to the controls within that usercontrol. I do this by assigning the ViewModel as datacontext for the certain usercontrol.
This works when there are only two usercontrols (one has access to ViewModelLocator, one requires a datacontext declaration from the former). I don't know what to do when it reaches 3 layers of usercontrols or more. Is there a way to set a datacontext of a usercontrol within a usercontrol which resides in a usercontrol that has access to the ViewModelLocator?
Below are some code that would clarify my question.
This code is the parent usercontrol. It was intended to be used on an application that utilizes MAF. I used a non-static ViewModelLocator to make sure that each plugin instance uses a different instance of ViewModelLocator and because the plugin would not have its own app.xaml (thus no global resource). As you can see, I placed a usercontrol from a separate assembly in the grid, then declared its datacontext so that the said usercontrol would interact with the parent usercontrol's ViewModelLocator.
<UserControl x:Class="TestApp.Inventory.Common.Views.MaterialsNewView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:vm="clr-namespace:TestApp.Inventory.Common.ViewModel"
xmlns:views="clr-namespace:TestApp.Inventory.Common.Views"
xmlns:viewsSupp="clr-namespace:TestApp.Supplier.Common.Views;assembly=TestApp.Supplier.Common"
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"
mc:Ignorable="d" Height="607" Width="616" Loaded="UserControl_Loaded">
<UserControl.Resources>
<vm:ViewModelLocator x:Key="Locator" />
</UserControl.Resources>
<UserControl.DataContext>
<Binding Path="MaterialsNewView" Source="{StaticResource Locator}" />
</UserControl.DataContext>
<Grid>
<views:SupplierView x:Name="supplierView" Margin="145,306,0,0" HorizontalAlignment="Left" Width="328" Height="258" VerticalAlignment="Top" DataContext="{Binding Source={StaticResource Locator}, Path=SupplierView}" />
</Grid>
</UserControl>
Then I have the code for the child usercontrol. Like what I said earlier, the child usercontrol was intended to be transparent in terms of the ViewModel. That's why the datacontext should be declared in the parent usercontrol every time.
<UserControl x:Class="TestApp.Supplier.Common.Views.SupplierView"
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:ignore="http://www.ignore.com"
mc:Ignorable="d ignore" Height="289" Width="352"
xmlns:my="clr-namespace:TestApp.Lookup.Common.Views;assembly=TestApp.Lookup.Common">
<Grid>
<my:MaterialTypeListView Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Grid, AncestorLevel=1}, Path=ActualHeight}" HorizontalAlignment="Left" Name="materialTypeListView1" VerticalAlignment="Top" Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Grid, AncestorLevel=1}, Path=ActualWidth}" />
</Grid>
</UserControl>
My problem is when the child usercontrol has its own child usercontrol. I don't know how to declare its datacontext from the parent usercontrol. The objective is no matter how many layers of usercontrol are there, they should interact with the ViewModelLocator of the parent usercontrol.

Add a DependencyProperty to the UserControl SupplierView named MaterialTypeList.
public partial class SupplierView
{
public List<string> MaterialTypeList
{
get { return (List<string>)GetValue(MaterialTypeListProperty); }
set { SetValue(MaterialTypeListProperty, value);}
}
public static readonly DependencyProperty MaterialTypeListProperty =
DependencyProperty.Register("MaterialTypeList", typeof(string), typeof(SupplierView),
new PropertyMetadata(null));
}
Add binding on UserControl MaterialNewView on SupplierView to MaterialTypeList
<UserControl x:Class="TestApp.Supplier.Common.Views.SupplierView"
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:ignore="http://www.ignore.com"
mc:Ignorable="d ignore" Height="289" Width="352"
xmlns:my="clr-namespace:TestApp.Lookup.Common.Views;assembly=TestApp.Lookup.Common">
<Grid>
<my:MaterialTypeListView
DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl, AncestorLevel=1}, Path=MaterialTypeList}"
Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Grid, AncestorLevel=1}, Path=ActualHeight}" HorizontalAlignment="Left" Name="materialTypeListView1" VerticalAlignment="Top" Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Grid, AncestorLevel=1}, Path=ActualWidth}" />
</Grid>
</UserControl>
Add binding on UserControl SupplierView on MaterialTypeListView to MaterialTypeList.
<UserControl x:Class="TestApp.Inventory.Common.Views.MaterialsNewView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:vm="clr-namespace:TestApp.Inventory.Common.ViewModel"
xmlns:views="clr-namespace:TestApp.Inventory.Common.Views"
xmlns:viewsSupp="clr-namespace:TestApp.Supplier.Common.Views;assembly=TestApp.Supplier.Common"
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"
mc:Ignorable="d" Height="607" Width="616" Loaded="UserControl_Loaded">
<UserControl.Resources>
<vm:ViewModelLocator x:Key="Locator" />
</UserControl.Resources>
<UserControl.DataContext>
<Binding Path="MaterialsNewView" Source="{StaticResource Locator}" />
</UserControl.DataContext>
<Grid>
<views:SupplierView x:Name="supplierView" Margin="145,306,0,0"
MaterialTypeList="{Binding [HERE YOUR LIST OF MATERIALTYPE]}"
HorizontalAlignment="Left" Width="328" Height="258" VerticalAlignment="Top" DataContext="{Binding Source={StaticResource Locator}, Path=SupplierView}" />
</Grid>
</UserControl>