Question

我正在寻找在不同视图之间切换的正确方法。我的场景类似于Windows 8上的Widnows Explorer，您可以在其中切换“超大图标”，“小图标”，“详细信息”等。在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") ); }
    }
}

在我看来，我有一个功能区（用户可以在其上更改viewMode），一个标题（显示有关用户的详细信息）以及一个朋友列表。取决于观点，我想表明：

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

以下是我的XML的样子（简化）：

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

所以，我的问题是我该怎么办？?????区域。现在，我Template="{StaticResource small}"它正在发挥作用。此外，使用我后面的代码可以将模板更改为任何其他资源模板（使用FindResource）。但是，我对这个解决方案不满意，因为我认为它与MVVM模式不太一致。如果它是“项目”（列表框项，标签项等），那么我可以使用数据模板，然后使用日期模板选择器。但由于这是一个ContentControl，ControlTemplateSelector似乎完全脱离了设计，我不知道该怎么做。

或者，如果我可以在树中“按原样”放置朋友列表，那么可能使用数据模板（具有TargetType = f：FriendList）我可以使其工作，但我不想实例化另一个朋友名单。在DataContext元素中已经实例化了一个实例。

遵循MVVM模式在不同视图之间切换

0 个答案: