如何使用 DataTemplate 在视图之间切换触发器

Question

我有一个要求，其中用户可以切换以树或数据网格中的文本或流程图的形式查看分层数据。

用户可以通过单击切换按钮来完成此操作，该按钮显示：切换模式。我想以这样一种方式来完成这一切，即它只能在视图中处理，因为所有三种情况下的 ViewModel 都是相同的。

如何基于触发器将视图应用到我的视图模型。

Answer 1

如果要显示的视图的状态保存在某个枚举属性中，您可以使用 ContentControl 和 DataTriggers 例如：（

<ContentControl>
    <ContentControl.Style>
        <Style TargetType="{x:Type ContentControl}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding ViewMode}" Value="TreeMode">
                    <Setter Property="Content">
                        <Setter.Value>
                            <uc:TreeModeView />
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding ViewMode}" Value="GridMode">
                    <Setter Property="Content">
                        <Setter.Value>
                            <uc:GridModeView />
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ContentControl.Style>
</ContentControl>

由于该样式仅在一处使用，因此直接将其设置为 ContentControl.Style 即可，如果你想在多个地方使用它，你应该设置 ContentTemplate 来代替，因为否则只有一个视图实例被所有控件共享，其样式是 WPF 不允许的（例如课程 Content 需要设置为要应用的模板的某些内容））

您还可以使用 ElementName 当然。相关值将为 True、False 和 {x:Null}。

Answer 2

HB 的答案很好，但有些情况下不太好。

如果构建视图（及其底层视图模型）的成本很高，那么每次用户更改视图时切换 Content 属性都会付出这笔费用。

在某些情况下，在同一个容器（例如Grid）中创建两个视图并切换它们的Visibility 是有意义的。如果您在视图模型中使用惰性求值，则在视图变得可见之前不会执行昂贵的操作，而且重要的是，它们只会在视图第一次可见时执行。一旦显示了两个视图，用户就可以在视图之间来回切换，而无需重建底层视图模型。

编辑：

我纠正了，有点：HB的答案并不像看起来那么好。

您无法使用样式将 ContentControl 的 Content 属性设置为 UIElement。请参阅此博客发布以获取完整的详细信息，但总而言之，如果您使用 HB 的方法，您将收到运行时错误。

您可以改为设置 ContentTemplate 属性，例如：

<Style TargetType="{x:Type ContentControl}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding ViewMode}"
                        Value="TreeMode">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <uc:TreeModeView/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </DataTrigger>
        <DataTrigger Binding="{Binding ViewMode}"
                        Value="GridMode">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <uc:GridModeView/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </DataTrigger>
    </Style.Triggers>
</Style>