Question

我在WPF中有点初学者，所以我问这个..

让我们说我有一个窗口，在窗口内我希望有像容器一样的东西，可能只是边框或者是面板（用winform术语）。容器的内容绑定到选定的选项（例如：按钮）。因此，例如，当用户选择OPTION 1时，容器显示图表;当用户选择选项2时，容器显示填充数据的列表视图;当用户选择选项3时，容器会显示其他内容，依此类推。

这样做的最佳/最好（或最简单）方法是什么？我正在考虑对容器的内容使用用户控件，但不知道这是否是一个很好的解决方案，使用用户控件来表现一点点复杂的事情，也许还有一些计算。还有其他想法吗？

illustration:

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

结果：

enter image description here

您可以通过将这个简单的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>

然后导致：

enter image description here

“WPF Mentality”让你认为UI控件的功能，而不是它们的外观，这是一个TabControl =）

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

Answer 3

您所描述的内容听起来非常接近标准TabControl，但使用ControlTemplate将标签放在左侧而不是内容面板上方。使用此方法意味着在每个 UserControl中都有TabItem，例如。多个控件。您可以在MSDN的TabControl Class页面上找到有关TabControl的更多信息。

WPF：动态视图/内容

3 个答案: