Question

假设我有TabControl呈现Foo个对象的集合（每个FooViewModel）。在标签项列表的末尾，我想要一个不对任何模型进行建模的虚假标签项，但它会创建一个新的模型项并在单击时将其添加到集合中。

如果概念不明确，那么Internet Explorer中的标签就是一个真实的例子。它有n+1个标签项：n有页面内容，最后一个有新的“真实”标签。

在MVVM中建模此类交互的正确方法（如果有的话）是什么？我想到的选项是：

使其成为视图模型的一部分。在控件绑定的IEnumerable<FooViewModel> Foos集合的末尾，添加一个“新项目”标记，并在视图模型中构建“我是真正的foo或新的foo sentinel”逻辑。
使其完全属于视图。重新模板（和/或子类）TabControl以呈现所有真实项目，然后是一个按钮，该按钮调用命令来创建和插入新项目。

第一个选项起初感觉不对，就像它将视图细节泄漏到视图模型中一样（很可能'添加新的Foo'是一般命令，而某些视图可能不希望它可以从中调用选项卡列表）。但它确实有一定意义，因为对于初始化过程，我已经需要对“半构造Foo”建模，因此“尚未存在Foo”的模型似乎并不遥远。

第二部分似乎很多工作，也很容易搞砸（假设它的外观和感觉就像其他标签一样）。

但我是MVVM的新手;肯定会经常出现这种情况。也许我完全错过了一些东西。处理它的传统方法是什么？

Answer 1

MVVM模式的一些关键租户是：

可测试性 - 通过将视图移动到视图模型中，使视图尽可能简单，增加可通过单元测试测试的逻辑量。
Designer-Support - 模拟视图模型可用于向您的视图提供设计时数据。

您的哪些建议最能满足上述要求？我会说选项（1）。您可以编写单元测试以确保列表中的最后一项始终是“哨兵”项目。

为了“构建'我是一个真正的foo或新的foo sentinel'逻辑到视图模型中。”，你可以简单地使用类型化的DataTemplates。

Answer 2

重新模板TabControl并在标签右侧添加一个虚假标签或按钮可能更简单。

基本示例：

<Window x:Class="ContextMenuSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <SolidColorBrush x:Key="WindowBackgroundBrush"
                         Color="#FFF" />

        <SolidColorBrush x:Key="SolidBorderBrush"
                         Color="#888" />

        <SolidColorBrush x:Key="DisabledForegroundBrush"
                         Color="#888" />

        <SolidColorBrush x:Key="DisabledBorderBrush"
                         Color="#AAA" />

        <Style  TargetType="{x:Type TabControl}">
            <Setter Property="OverridesDefaultStyle"
                    Value="True" />
            <Setter Property="SnapsToDevicePixels"
                    Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabControl}">
                        <Grid KeyboardNavigation.TabNavigation="Local">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <TabPanel Name="HeaderPanel"
                                      Grid.Row="0"
                                      Panel.ZIndex="1"
                                      Margin="0,0,4,-1"
                                      IsItemsHost="True"
                                      KeyboardNavigation.TabIndex="1"
                                      Background="Transparent" />
                            <Button Grid.Row="0"
                                    Grid.Column="1"
                                    Content="Add new" />
                            <Border Name="Border"
                                    Grid.Row="1"
                                    Grid.ColumnSpan="2"
                                    Background="{StaticResource WindowBackgroundBrush}"
                                    BorderBrush="{StaticResource SolidBorderBrush}"
                                    BorderThickness="1"
                                    CornerRadius="2"
                                    KeyboardNavigation.TabNavigation="Local"
                                    KeyboardNavigation.DirectionalNavigation="Contained"
                                    KeyboardNavigation.TabIndex="2">
                                <ContentPresenter Name="PART_SelectedContentHost"
                                                  Margin="4"
                                                  ContentSource="SelectedContent" />
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled"
                                     Value="False">
                                <Setter Property="Foreground"
                                        Value="{StaticResource DisabledForegroundBrush}" />
                                <Setter TargetName="Border"
                                        Property="BorderBrush"
                                        Value="{StaticResource DisabledBorderBrush}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>

    <Grid>
        <TabControl>
            <TabItem Header="Item 1" />
            <TabItem Header="Item 2" />
        </TabControl>
    </Grid>

</Window>

enter code here

Answer 3

我会选择第一个：

所以你有一个TabViews的集合，其中每一个，如果它是最后一个，当被激活时创建一个新的并在它之前注入它。

样式化怎么样：如果你想让它成为UI的一部分，你也可以在之后做到。这是WPF的重要部分。

因此，一般来说，解决方案会成为您所谈论的两种解决方案的融合。没有什么可以阻止您为集合中的最后一个TabView制作样式模板，并将仅应用于。

希望这有帮助。

什么是在项目控件中公开“添加新项目”哨兵的最佳MVVM方式？

3 个答案: