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

Question

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

这是我和尝试做的事情的简化版本。

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

外壳视图：

<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 概念用于将视图模型映射到多个视图，通常通过约定和映射命名空间。然而，在这种情况下，您的每个视图模型都映射到一个视图。因此，您不需要/不应该提供上下文。

其次，如果不将视图模型绑定公开为 public 道具（如@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" />

它们是同义词。

如您所见，Caliburn Conductor 在与 ItemControl 结合使用时真的很闪耀。您通常不需要对每个 Items 进行强类型引用。这并不意味着您不能像以前那样使用 conductor，您仍然可以享受托管生命周期的所有好处。

Answer 3

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

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

Example XAML View code:

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

Example C# ViewModel code:

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 的方法。

另请阅读，它可能会对您有进一步的帮助。

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

Caliburn.Micro : How to bind a specific Item of Conductor.Collection.AllActive to a ContentControl

data-binding

wpf

caliburn.micro