13

I'm trying to build a small MVVM test application, but can't really figure how to display my user control in the MainWindow.

My Solution Explorer:

How my solution looks like

I got a resource dictionary:

    <ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vm="clr-namespace:MVVM.ViewModel"
    xmlns:vw="clr-namespace:MVVM.View">

    <DataTemplate DataType="{x:Type vm:ViewModel}">
        <vw:View />
    </DataTemplate>

</ResourceDictionary>

I got my view:

<UserControl x:Class="MVVM.View.View"
             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">
    <UserControl.Resources>
        <DataTemplate x:Key="PersonTemplate">
            <StackPanel>
                <TextBlock Text="{Binding FirstName}" />
            </StackPanel>
        </DataTemplate>
    </UserControl.Resources>

    <ListBox ItemsSource="{Binding Path=Persons}"
             ItemTemplate="{StaticResource PersonTemplate}" />
</UserControl>

and My MainWindow

<Window x:Class="MVVM.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:MVVM.ViewModel"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary Source="MainWindowResources.xaml" />
    </Window.Resources>

    <Grid>

    </Grid>
</Window>

2 Answers 2

13

The most obvious and easiest way is to add the ContentControl element:

<Grid>
    <ContentControl x:Name="mainContentControl" />
</Grid>

And after that set the Content property of this control to your view model, and the corresponding view will be loaded and applied automatically:

this.mainContentControl.Content = new ViewModel.ViewModel();

But I would prefer to use another way without datatemplates:

<Grid>
    <vw:View x:Name="mainView"/>
</Grid>
this.mainView.DataContext = new ViewModel.ViewModel();
0
6

Build your VS2010 solution, then, go to your MainWindow's XAML.

On the left, there is a toolbar with button "Toolbox"

Open it, it contains all the possible WPF controls you could add to your UI

Your UserControl should appear on top of the list (in a category probably named "MVVM Controls"), just drag&drop it to your UI :)

3
  • What do you mean, it is the toolbox not showing up, or the usercontrol not showing up in the list?
    – Damascus
    Mar 29, 2011 at 12:49
  • Great tip, it saved my time since usually i add user control via namespace! Thanx.
    – Jviaches
    Apr 7, 2013 at 18:19
  • Apparently VS2013 (Premium) has moved on, searching toolbox yields no usercontrol or mvvm results. Apr 15, 2014 at 15:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.