使用 Pivot 将页面的视图模型分离为单独的视图模型答案

【问题标题】：Separate viewmodel for page with Pivot into individual viewmodels使用 Pivot 将页面的视图模型分离为单独的视图模型
【发布时间】：2012-11-03 00:36:50
【问题描述】：

我正在使用 MVVMLight，我创建了标准视图和视图模型。在视图中我放置了 Pivot：

<Grid x:Name="LayoutRoot" Background="Transparent">
    <controls:Pivot Title="MY APPLICATION">
        <local:FirstPivotItem />
        <local:SecondPivotItem />
    </controls:Pivot>
</Grid>

我的 Pivot 项目如下所示：

<controls:PivotItem x:Class="Pivot.WindowsPhoneControl1"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    // standard references and settings
    d:DesignHeight="480" d:DesignWidth="480" Header="First One">

    <Grid x:Name="LayoutRoot">

    </Grid>
</controls:PivotItem>

在代码隐藏中

public partial class WindowsPhoneControl1 : PivotItem
{
    public WindowsPhoneControl1() {
        InitializeComponent();
    }
}

我想为这个枢轴项目创建视图模型，然后像使用标准视图一样使用它。我会用

<i:Interaction.Triggers>
    <i:EventTrigger EventName="SelectionChanged">
        <mvvm:EventToCommand Command="{Binding PivotChangedCommand}" PassEventArgsToCommand="True" />
    </i:EventTrigger>
</i:Interaction.Triggers>

处理选择更改事件，而不是通过 Messanger 通知适当的视图模型。我不知道如何在 Pivot Item 类中使用 viewmodel 的可能性，它是从 PivotItem 继承的，但不是从 ViewModelBase 继承的，因为我需要。

【问题讨论】：

标签： windows-phone-7 mvvm pivot mvvm-light

【解决方案1】：

对单个项目使用标准的 PivotItem 控件，并将用户控件放入每个项目中。然后，每个用户控件都可以将其视图模型作为数据上下文。

 <Grid x:Name="LayoutRoot"
      Background="Transparent">
    <controls:Pivot Title="MY APPLICATION">
        <controls:PivotItem Header="first">
            <local:PivotUserControl1 />
        </controls:PivotItem>

        <controls:PivotItem Header="second">
            <local:PivotUserControl2 />
        </controls:PivotItem>
    </controls:Pivot>
</Grid>

【讨论】：

【解决方案2】：

取决于您是否提前知道枢轴项目将是什么，或者它们是否是基于数据动态创建的。从你目前所写的内容来看，我假设它是第一个。

我之前这样做的方法是将多个 PivotItem 视图模型作为父视图模型上的公共属性，每个数据透视表一个。然后只需将每个 PivotItem 的 dataContext 设置为父视图模型上的正确视图模型属性。

这样您就可以在没有选择更改事件的情况下逃脱。您还可以直接订阅视图模型上的任何事件，因此不必为通信而烦恼，因为所有通信都可以通过父视图模型。

第二种方法，如果您事先不确定您将拥有哪些枢轴项目，则在父视图模型上拥有一个 PivotItemViewModel 集合 - 每个枢轴项目一个，每个都继承自一个公共基类或接口.将该集合绑定到视图模型的 ItemSource。

这有点棘手，因为您必须确定要显示的控件，但如果您将模板存储为资源，则可以通过转换器执行此操作：

public class PivotItemToTemplateConverter : IValueConverter
{
    #region IValueConverter Members


    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        switch ((int) value)
        {
            case 1:
                return Application.Current.Resources["Control1Template"];
            case 2:
                return Application.Current.Resources["Control2Template"];
            default:
                return Application.Current.Resources["Control3Template"];
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }

    #endregion
}

然后，您可以为您的数据透视项目创建一个数据透视项目模板，并使用转换器根据一个值在其中获得正确的控制。在这种情况下，假设共享基础视图模型有一个属性 ViewModelId，它可以有效地识别您将感兴趣的控件：

<ContentControl 
                Content="{Binding}"
                ContentTemplate="{Binding ViewModelId,
                                          Converter={StaticResource PivotItemToTemplateConverter }}" />

【讨论】：