Caliburn.Micro：如何将 Conductor.Collection.AllActive 的特定项绑定到 ContentControl

Question

我的目标是在 ShellView 的网格中显示 4 个不同的活动 ViewModel。问题是我无法弄清楚如何将 ContentControl 连接到导体项目中的特定项目。他的事怎么办？

这是我正在尝试做的简化版本。

SolutionExplorer

ShellViewModel：

namespace ContentControlTest.ViewModels
{
    public class ShellViewModel : Conductor<object>.Collection.AllActive
    {
        public ShellViewModel()
        {
            ActivateItem(new UC1ViewModel());
            ActivateItem(new UC2ViewModel());
            ActivateItem(new UC3ViewModel());
            ActivateItem(new UC4ViewModel());
        }
    }
}

ShellView：

<Window x:Class="ContentControlTest.Views.ShellView"
        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:ContentControlTest.Views"
        xmlns:cal="http://www.caliburnproject.org"
        mc:Ignorable="d"
        Title="ShellView" Height="450" Width="800"
        >

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <ScrollViewer Grid.Row="0" Grid.Column="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <ContentControl cal:View.Model="{Binding UC1ViewModel}" cal:View.Context="{Binding Items[0]}"/>
        </ScrollViewer>
        <ScrollViewer Grid.Row="0" Grid.Column="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <ContentControl cal:View.Model="{Binding UC2ViewModel}" cal:View.Context="{Binding Items[1]}"/>
        </ScrollViewer>
        <ScrollViewer Grid.Row="1" Grid.Column="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <ContentControl cal:View.Model="{Binding UC3ViewModel}" cal:View.Context="{Binding Items[2]}"/>
        </ScrollViewer>
        <ScrollViewer Grid.Row="1" Grid.Column="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <ContentControl cal:View.Model="{Binding UC4ViewModel}" cal:View.Context="{Binding Items[3]}"/>
        </ScrollViewer>        
    </Grid>
</Window>

为简化起见，每个 UserControl ViewModel 和 View 都是相同的：

UC#ViewModel：

namespace ContentControlTest.ViewModels
{
    public class UC1ViewModel : Screen
    {
        private string id;
        public string ID
        {
            get { return id; }
            set
            {
                id = value;
                NotifyOfPropertyChange(() => ID);
            }
        }


        public UC1ViewModel()
        {
            ID = Guid.NewGuid().ToString();
        }

    }
}

UC#视图：

<UserControl x:Class="ContentControlTest.Views.UC1View"
             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" 
             xmlns:local="clr-namespace:ContentControlTest.Views"
             xmlns:cal="http://www.caliburnproject.org"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             >
    <Border BorderBrush="Black"  BorderThickness="1"> 
        <StackPanel >
            <TextBlock Text="{Binding DisplayName}"/>
            <TextBlock Text="{Binding ID}"/>
        </StackPanel>
    </Border>
</UserControl>

为了进行测试，我尝试使用 ItemControl，它可以工作，但不能完全满足我的需求。

<ItemsControl x:Name="Items">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel></StackPanel>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

Answer 1

您需要在ShellViewModel 中创建属性，例如UC1、UC2、UC3 等。然后您需要更改ShellView 以绑定到UC1 属性。

            <ContentControl x:Name="UC1" />
            ...

Caliburn Micro 应该为您做管道。

namespace ContentControlTest.ViewModels
{
    public class ShellViewModel : Conductor<object>.Collection.AllActive
    {
        // Modify to implement INotifyPropertyChanged event...
        public UC1ViewModel UC1 { get; set }

        public ShellViewModel()
        {
            UC1 = new UC1ViewModel();
            ActivateItem(UC1);
            ActivateItem(new UC2ViewModel());
            ActivateItem(new UC3ViewModel());
            ActivateItem(new UC4ViewModel());
        }
    }
}

Answer 2

Context 的 Caliburn 概念用于将视图模型映射到多个视图，通常通过约定和映射命名空间。但是，在这种情况下，您的每个视图模型都映射到一个视图。因此，您不需要/不应该提供上下文。

其次，如果不将它们公开为公共道具（如@Jack 建议的那样），则无法解决您的视图模型绑定。具有讽刺意味的是，您用于 Context 的绑定是视图模型绑定的正确绑定。

更换

<ContentControl cal:View.Model="{Binding UC1ViewModel}" cal:View.Context="{Binding Items[0]}"/>

有

<ContentControl cal:View.Model="{Binding Items[0]}"/>

应该做的伎俩。

鉴于项目的数量是固定的，最好遵循@Jack 的方法并以强类型的方式引用视图模型。而不是依赖它们在项目集合中的索引。您可以使用：

<ContentControl cal:View.Model="{Binding UC1ViewModel}" />

或者

<ContentControl x:Name="UC1ViewModel" />

这是同义词。

正如您所注意到的，当与 ItemControl 结合使用时，Caliburn Conductor 确实会发光。您通常不需要对每个 Items 进行强类型引用。这并不意味着您不能像以前那样使用导体，您仍然可以享受托管生命周期的所有好处。

Answer 3

如果有人在实施 [完全没问题] 接受的答案时遇到问题，这里有一个更深入的答案：

1. 包含两个（甚至两个以上）用户控件的主窗口必须继承自 Caliburn.Micro.Conductor<Screen>.Collection.AllActive；
2. 您的用户控件必须继承自 Caliburn.Micro.Screen；
3. 您还必须牢记命名约定。如果您在 View 中使用 MenuUC 作为 ContentControl 的名称，还要在 ViewModel 中创建一个名为 MenuUC 的属性；
4. 像我在 Constructor 中一样初始化您的 UserControl；
5. 现在您可以在代码中的任何位置使用ActivateItem(MenuUC) 和DeactivateItem(MenuUC)。 Caliburn.Micro 会自动检测您要使用哪一个。

示例 XAML 查看代码：

<Window x:Class="YourProject.Views.YourView"
        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"
        mc:Ignorable="d"
        Title="YourViewTitle" Width="900" Height="480">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="4*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Menu Side Bar -->
        <ContentControl Grid.Row="0" Grid.Column="0" x:Name="MenuUC" />

        <!-- Panel -->
        <Border Grid.Column="1" Grid.RowSpan="2" BorderThickness="1,0,0,0" BorderBrush="#FF707070" >
            <ContentControl x:Name="PanelUC" />
        </Border>
    </Grid>
</Window>

示例 C# ViewModel 代码：

class YourViewModel : Conductor<Screen>.Collection.AllActive
{
    // Menu Side Bar
    private MenuUCViewModel _menuUC;
    public MenuUCViewModel MenuUC
    {
        get { return _menuUC; }
        set { _menuUC = value; NotifyOfPropertyChange(() => MenuUC); }
    }

    // Panel
    private Screen _panelUC;
    public Screen PanelUC
    {
        get { return _panelUC; }
        set { _panelUC = value; NotifyOfPropertyChange(() => PanelUC); }
    }

    // Constructor
    public YourViewModel()
    {
        MenuUC = new MenuUCViewModel();
        ActivateItem(MenuUC);

        PanelUC = new FirstPanelUCViewModel();
        ActivateItem(PanelUC);
    }

    // Some method that changes PanelUC (previously FirstPanelUCViewModel) to SecondPanelUCViewModel
    public void ChangePanels()
    {
        DeactivateItem(PanelUC);
        PanelUC = new SecondPanelUCViewModel();
        ActivateItem(PanelUC);
    }
}

在上面的示例中，ChangePanels() 充当将新用户控件加载到您的 ContentControl 中的方法。

另请阅读this question，它可能会对您有所帮助。