如何使用Caliburn Micro创建包含宽项目的动态绑定全景页面？

Question

受到一些优秀应用程序的启发，我希望在我的Panorama中有一个PanoramaItem，它比PanoramaItem的标准宽度宽。

在LinkedIn的应用程序中查看带有磁贴的项目：

通常，这是通过添加具有预定义宽度的PanoramaItem在xaml中实现的：

<controls:PanoramaItem Width="555">

但是，我希望避免以这种方式对我的UI进行硬编码，因为该应用程序是基于Caliburn-Micro的，而Panorama控件是使用方便的Caliburn约定进行数据绑定的。它背后的视图模型是一个Conductor，页面被注入其中。 Panorama控件绑定到视图模型的Items属性。

我的问题是，如果其中一个项目或屏幕比全景项目的标准宽度宽，则会被剪裁。

我尝试通过指定ItemTemplate来解决它：

<controls:Panorama.ItemTemplate>
    <DataTemplate>
        <ContentControl cal:View.Model="{Binding}"/>
    </DataTemplate>
</controls:Panorama.ItemTemplate>

但这并没有改变一件事。

如何解决这个问题？

Answer 1

嗯，问题是显然你做不到。我尝试覆盖OnViewAttached，找到我的动态绑定控件（ContentControl）的父级，但我无法检索其父级（PanoramaItem我想要更宽）。

因此，经过多次试验结束错误后，我决定采用以下解决方案：

我在XAML中明确定义了全景项：

<controls:PanoramaItem Header="item1">
    <ContentControl x:Name="Control1"/>
</controls:PanoramaItem>
<controls:PanoramaItem Header="Wide Item" Width="700" Orientation="Horizontal">
    <ContentControl x:Name="WideControl"/>
</controls:PanoramaItem>

它们也被注入ViewModel并添加到Items的集合中，继承自Caliburn的Cunductor。

然后，我需要确保ViewModel知道当前选择的项目，因此CaliburnMicro可以激活相关的视图：

<controls:Panorama  Name="MainPanorama" 
    cal:Message.Attach="[Event SelectionChanged] = 
    [Action  MainPanorama_OnSelectionChanged($eventArgs)]" 
    SelectedIndex="{Binding ActivePage, Mode=TwoWay}">

我还确保ViewModel收到SelectionChanged事件，因此它知道何时激活当前可见的项目。

最后，让它在ViewModel中运行的技巧：

public void MainPanorama_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    ActivateItem(Items[ActivePage]);
}