WPF：动态视图/内容答案

【问题标题】：WPF : dynamic view/contentWPF：动态视图/内容
【发布时间】：2013-08-30 01:58:10
【问题描述】：

我是 WPF 的初学者，所以我问这个..

假设我有一个窗口，并且在窗口内我想有类似容器的东西，可能只是边框或面板（在 winform 术语中）。容器的内容绑定到选定的选项（例如：按钮）。因此，例如，当用户选择 OPTION 1 时，容器会显示图表；当用户选择选项 2 时，容器显示填充数据的列表视图；当用户选择选项 3 时，容器会显示其他内容，依此类推。

最好/最好（或最简单）的方法是什么？我正在考虑对容器的内容使用用户控件，但不知道这是否是一个不错的解决方案，也不知道使用用户控件来显示一些复杂的东西和可能的一些计算的性能。大家还有什么好主意吗？

【问题讨论】：

您可以使用ContentPresenter 并根据所选选项更改内容
您可以简单地将任何 View/XAML 作为内容。许多 MVVM 框架（我使用 ReactiveUI）具有强大的选择 ViewModel 和 View 发现切换容器。编辑：看看这里stackoverflow.com/questions/15353500/…
愿意解释一下吗？也许在新的答案中。

标签： wpf

【解决方案1】：

要详细说明@Sheridan 的答案，这里有一个简单的TabControl XAML，可以满足您的需要：

<TabControl TabStripPlacement="Left">

        <TabItem Header="Option 1">
            <Grid Background="DarkGray">
                <TextBlock Foreground="AliceBlue" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20" Text="View 1"/>
            </Grid>
        </TabItem>

        <TabItem Header="Option 2">
            <Grid Background="DarkBlue">
                <TextBlock Foreground="AliceBlue" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20" Text="View 2"/>
            </Grid>
        </TabItem>

        <TabItem Header="Option 3">
            <Grid Background="DarkSlateBlue">
                <TextBlock Foreground="AliceBlue" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20" Text="View 3"/>
            </Grid>
        </TabItem>

    </TabControl>

结果：

您可以通过将这个简单的Style 添加到您的Window.Resources 来稍微自定义它：

 <Window.Resources>
        <Style TargetType="TabItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <RadioButton Content="{TemplateBinding Header}" Margin="2"
                                     IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

这会导致：

“WPF Mentality”让您认为 UI 控件的功能是其功能，而不是外观，这是 TabControl =)

【讨论】：

绝对可以接受..无论如何，我仍在等待另一种方法..也许与 ContentPresenter/ContentControl
@bagz_man TabControl 默认模板已包含 ContentPresenter。为什么要重新发明轮子？另外，我的方法有什么问题？
您的方法确实非常好，我正在为它 +1。我只是在考虑使用 ContentControl 和 ContentPresenter 的另一种方法。因为我认为我们可以将 OPTION 与 CONTENT 分开，我的意思是它们之间有一些空间并且更加灵活。但是，如果您可以举个例子，在 tabstrip 和内容之间添加空格，那就太好了。

【解决方案2】：

我用ContentControl解决了这个问题

主窗口：（定义您希望可视化为资源的视图）

<Window.Resources>
    <DataTemplate DataType="{x:Type viewModels:SystemPCViewModel}">
        <controls:SystemPCControl/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type viewModels:ChipPCViewModel}">
        <controls:ChipPCControl/>
    </DataTemplate>
    </ResourceDictionary>

</Window.Resources>

<Grid>
   <ContentControl Content="{Binding CurrentView}"/>
</Grid>

ViewModel：（再简单不过了）

public ViewModelBase CurrentView
{
    get { return currentView; }
    set { Set(() => CurrentView, ref currentView, value); }
}

然后，您可以通过为您在 MainWindow 中定义的控件设置视图模型来更改视图

private void OnCommandExecuted()
{
    CurrentView = someViewModel;
}

private void OnAnotherCommandExecuted()
{
    CurrentView = anotherViewModel;
}

HTH！

【讨论】：

【解决方案3】：

您所描述的内容听起来非常接近标准TabControl，但ControlTemplate 将选项卡放在左侧而不是内容面板上方。使用这种方法意味着在 each TabItem 中有一个UserControl，例如。多个控件。您可以从 MSDN 上的 TabControl Class 页面了解有关 TabControl 的更多信息。

【讨论】：

不，我不是说它是一个选项卡式容器，因为我要实现的只是一个（也是唯一一个）显示动态内容的容器。