How can I display my user control in the MainWindow?

问题:

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:

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> 

回答1:

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(); 

回答2:

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 :)

文章来源: How can I display my user control in the MainWindow?