Wpf 按照MVVM模式在不同视图之间切换

我正在寻找在不同视图之间切换的正确方法。我的场景类似于Windows 8上的Widnows资源管理器，您可以在“超大图标”、“小图标”、“详细信息”等之间切换。在Windows 8中，用户可以从资源管理器的“视图”功能区进行切换（您也可以在XP和7中更改视图）

在我的例子中，我有一个朋友列表，我想让用户在“小”、“大”和“细节”视图之间切换

假设我的视图模型有朋友列表：

public class FriendVM {
    public name { get; set; }
    public smallImage { get; set; }
    public largeImage { get; set; }
};

public class MainVM : INotifyPropertyChanged {
    public ObservableCollection<FriendVM> friends { get; set; }

    private string m_viewMode
    public string viewMode { 
        get { return m_viewMode; }
        set { m_viewMode=value; this.PropertyChanged( new PropertyChangedEventArags("viewMode") ); }
    }
}

公共类FriendVM{
公共名称{get；set；}
公共图像{get；set；}
公共大图像{get；set；}
};
公共类MainVM:INotifyPropertyChanged{
公共ObservableCollection好友{get；set；}
私有字符串m_视图模式
公共字符串视图模式{
获取{return m_viewMode；}
设置{m_viewMode=value；this.PropertyChanged（newpropertychangedeventags（“viewMode”）；}
}
}

在我的视图中，我有一个功能区（用户可以在其上更改查看模式）、一个标题（显示用户的详细信息）和一个朋友列表。取决于视图，我想显示：

• 当viewMode=“details”时，我有一个带有GridView的ListView
• 当viewMode=“small”有一个ListView时，with ItemsPanel是一个WrapPanel，我将图像绑定到smallImage
• 当viewMode=“large”我有一个带有WrapPanel的ListView，使用largeImage属性

以下是我的XML的外观（简化）：

...
...
... 一些标题的东西

所以，我的问题是，我该怎么做？？？？？地区现在，我有了

Template=“{StaticResource small}”

，它正在工作。此外，使用代码隐藏，我可以将模板更改为任何其他资源化模板（使用FindResource）。然而，我对这个解决方案不满意，因为我觉得它不适合MVVM模式。如果它是一个“项”（列表框项、选项卡项等），那么我可以使用数据模板，然后使用日期模板选择器。但由于这是一个ContentControl，而且ControlTemplateSelector似乎完全脱离了设计，我不确定该怎么办

---

或者，如果我可以将好友列表“按原样”放在树中，那么也许可以使用数据模板（TargetType=f:FriendList）使其工作，但我不想实例化另一个好友列表。DataContext元素中已实例化一个实例。

使用DataTemplateSelector如果无法使用TemplateSelector，请使用ViewModel的

viewMode

属性作为DataTrigger绑定，尝试使用触发器样式。可能重复

<Window x:Class="friends.MainWindow" ... xmlns:f="clr-namespace:friends" ...>
    <Window.DataContext>
        <f:MainVM />
    <Window.DataContext>

    <Window.Resources>
        <ControlTemplate x:Key="details">
            <ListView ItemsSource="{Binding Path=friends}">
                <ListView.View>
                    <GridView>
                        ...
                    </GridView>
            </ListView.View>
        </ControlTemplate>

        <ControlTemplate x:Key="small">
            <ListView ItemsSource="{Binding Path=friends}">
                <ListView.ItemsPanel><WrapPanel Orientation="Horizontal" />
            </ListView>
            <ListView.ItemTemplate><DataTemplate>
                <Image Source={Binding smallPicture} Width="32" Height="32" />
            </DataTemplate></ListView.ItemTemplate>
        </ControlTemplate>


        <ControlTemplate x:Key="large">
            <ListView ItemsSource="{Binding Path=friends}">
                <ListView.ItemsPanel><WrapPanel Orientation="Horizontal" />
            </ListView>
            <ListView.ItemTemplate><DataTemplate>
                <StackPanel>
                    <Image Source="{Binding largePicture}" Width="200" Height="200" />
                    <TextBlock Text="{Binding name}" />
                </StackPanel>
            </DataTemplate></ListView.ItemTemplate>
        </ControlTemplate>

    </Window.Resource>


    <DockPanel LastChildFill="True">

        <Ribbon ...>
            ...
        </Ribbon>

        <StackPanel>
            ... some header stuff
        </StackPanel>

        <ContentControl x:Name="friendList" Content="{Binding friends}" ?????? />
    </DockPanel>

</Window>