wpf - 将 Caliburn Micro Screen(UserControl) 添加到 WPF MVVM 中的 Canvas ？

Question

我正在使用 Caliburn Micro在我的项目中，我有许多用户控件和他们的 View 模型继承自 PropertyChangedBase ，我希望将此 UserControl 添加到我的 ShellView 中的 Canvas 中。我不想使用 IWindowManager从显示 Windows 而不是我希望它们被添加到 Canvas 中。

请帮忙。我怎样才能做到这一点。

Answer 1

如果您使用 ContentControl在您的ShellView您可以 Hook 到 Caliburn.Micro 的 View-ViewModel 绑定(bind)过程。

我假设在你的 ShellViewModel你有一堆暴露的属性类型 ViewModel .如果您放置 ContentControl在您的 ShellView (如果这是您希望用来布局您的 Shell 的容器，则它可以在/作为 Canvas 的子项)，然后用您的 ShellViewModel 中的属性名称命名该控件你希望它被绑定(bind)，然后 Caliburn 的 ViewModelBinder剩下的会为你做。

例如，假设您有一个名为 FizzViewModel 的 VM和一个名为 FizzView 的匹配 View (这只是一个 UserControl )并且你想要 FizzView出现在您的ShellView您可以执行以下操作...

脱衣舞ShellViewModel

public class ShellViewModel : Screen, IShell
{
    public ShellViewModel(FizzViewModel theFizz)
    {
        TheFizz = theFizz;
    }

    public FizzViewModel TheFizz { get; set; }
}

及其配套 ShellView

<UserControl x:Class="ANamespace.ShellView">
    <Canvas> 
        <ContentControl x:Name="TheFizz"></ContentControl>
    </Canvas> 
</UserControl>

这里因为 ContentControl被命名为 TheFizz，它将被 Caliburn 绑定(bind)到您的 VM 上具有该名称的属性(类型之一 FizzViewModel )

这样做意味着您不必放下 UserControl在您的 ShellView 上使用他们的真实类型，您让 Caliburn 通过约定为您完成工作(这意味着如果您只需添加更多接口(interface)间接，就可以轻松换出 TheFizz 类型)。

更新

从您在评论中提供的额外信息中，我现在可以看到您实际上正在查看一个需要 ItemsControl 的问题。

默认 DataTemplate Caliburn 使用如下所示

<DataTemplate xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
              xmlns:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro">  
    <ContentControl cal:View.Model="{Binding}"   
                    VerticalContentAlignment="Stretch"  
                    HorizontalContentAlignment="Stretch" />  
</DataTemplate>

您会注意到它使用了 ContentControl ，正如我上面讨论的那样，它有一些优点。基本上，这将允许 Caliburn 提供 DataTemplateSelector喜欢你的 ItemsControl 中的项目的行为.因此，您可以将不同类型的虚拟机添加到您的 ItemsControl 集合中。绑定(bind)到此默认值 DataTemplate将解析用于显示它的 View 类型。以下演示了一个非常简单的示例，说明如何实现您想要的。

首先是 ShellViewModel，注意 BindableCollection命名项目

[Export(typeof(IShell))]
public class ShellViewModel : IShell 
{
    public ShellViewModel()
    {
        Items = new BindableCollection<Screen>();
        _rand = new Random();
    }

    public BindableCollection<Screen> Items { get; set; }

    private Random _rand;

    public void AddItem()
    {
        var next = _rand.Next(3);
        var mPosition = System.Windows.Input.Mouse.GetPosition(App.Current.MainWindow);
        switch (next)
        {
            case 0:
                {
                    Items.Add(new BlueViewModel
                        {
                            X = mPosition.X,
                            Y = mPosition.Y,
                        });
                    break;
                }

            case 1:
                {
                    Items.Add(new RedViewModel
                    {
                        X = mPosition.X,
                        Y = mPosition.Y,
                    });
                    break;
                }
            case 2:
                {
                    Items.Add(new GreenViewModel
                    {
                        X = mPosition.X,
                        Y = mPosition.Y,
                    });
                    break;
                }
            default:
                break;
        }
    }
}

然后是一些您想在 Shell 中显示的虚拟 VM 类型。这些可以是/做任何你喜欢的事情:

public abstract class SquareViewModel : Screen
{
    public double X { get; set; }
    public double Y { get; set; }
}

public class BlueViewModel : SquareViewModel
{

}

public class RedViewModel : SquareViewModel
{

}

public class GreenViewModel : SquareViewModel
{

}

现在是一个 ShellView，注意绑定(bind)到 ShellViewModel 上的 Items 属性的 ItemsControl

<Window x:Class="WpfApplication2.ShellView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro">

<Grid >
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <ItemsControl x:Name="Items"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas cal:Message.Attach="[Event MouseLeftButtonUp] = [Action AddItem()]"
                            Background="Transparent"></Canvas>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="Canvas.Left" Value="{Binding Path=X}" />
                    <Setter Property="Canvas.Top" Value="{Binding Path=Y}" />
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>
</Grid>
</Window>

以及 UserControl 的示例将用于显示 GreenViewModel ，再创建 2 个，将名称更改为 RedView和 BlueView并适本地设置背景以使演示工作。

<UserControl x:Class="WpfApplication2.GreenView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Width="30"
             Height="30">
    <Grid Background="Green"></Grid>
</UserControl>

这个例子放在一起是在 Canvas 上创建彩色方 block 。根据鼠标点击的位置，你的外壳。我认为你应该能够接受这个并将其扩展到你的需要。