如何在主窗口中显示用户控件?

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

我正在尝试构建一个小型的MVVM测试应用程序，但实际上无法在主窗口中显示我的用户控件。

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>

2 个解决方案

#1

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

最明显最简单的方法是添加ContentControl元素:

<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.

构建您的VS2010解决方案，然后，转到主窗口的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

打开它，它包含所有可能添加到UI的WPF控件

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

您的UserControl应该出现在列表的顶部(在一个可能名为“MVVM控件”的类别中)，只需拖放它到您的UI:)