具有网格和共享内容的 WPF 选项卡控件

Question

我有一个 wpf 选项卡控件，我希望其中有两列。一列将始终显示一个图形控件，该控件将用于根据所选选项卡显示数据 - 但它始终是相同的图形控件。

不幸的是，由于图形控件的设计，不可能有一个以上的图形控件，主要是性能很差。我已经试过了，但它不能正常工作。

另一列将显示特定于所选选项卡的组合框、单选按钮等项目 - 下面是一个示例

我也有在右栏中的选项卡控件，但是各个选项卡的布局在右栏中很拥挤，导致用户体验不太理想。

现在，我将选项卡控件托管在一个网格中，该网格有两列，列跨度设置为二。对于右侧窗格，我有各种组框，我使用相应选项卡项的 IsSelected 属性触发器控制这些组框的可见性。然而，这导致了其他问题，我已经追踪到有问题的控件的可见性。

我想做的是修改控件的模板，这样我就可以在选项卡控件中托管所有当前控件，以便图形控件始终显示在左侧，而右侧的内容-手选项卡由所选选项卡控制。

我认为这样做将涉及选项卡控件的控件模板或另一个模板，但是，到目前为止我还找不到类似的东西。有没有办法做这样的事情？如果有，是否有这样做的指南或关于如何完成此操作的一些提示？

谢谢。

Answer 1

您可以将 ChartControl 声明为资源并在每个选项卡中使用它。

要确认 ChartControl 相同，请在 TextBox 中键入内容，然后 select 另一个 Tab。文本保持不变。 TextBlock 中显示的初始化时间保持不变。

<Window x:Class="XamlApp.Window6"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:system="clr-namespace:System;assembly=mscorlib"
        Title="TabsWindow" 
        Height="480" Width="640">
    <Window.Resources>

        <Grid x:Key="IamChartControl" Background="Khaki">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <TextBlock Text="{Binding Source={x:Static system:DateTime.Now}}" Margin="5"/>

            <TextBox Text="hello" Grid.Row="1" Margin="5"/>
        </Grid>

    </Window.Resources>

    <Grid>
        <TabControl ItemsSource="{Binding Source='12345'}">
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="2*"/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>

                        <ContentControl Content="{StaticResource IamChartControl}"/>

                        <TextBlock Grid.Column="1" Text="{Binding}"/>
                    </Grid>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
</Window>

Answer 2

我处理此要求的方式如下所示。我会将 template/style 应用于按钮，以便它们看起来像 TabHeader。

 <Grid Name="MainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Orientation="Horizontal">
            <StackPanel.Resources>
                <ControlTemplate x:Key="ButtonTemplate">
                    <!--Template style-->
                </ControlTemplate>
            </StackPanel.Resources>

            <Button>Root bending</Button>
            <Button>S-N curve bending</Button>
            <Button>S-N curve contact</Button>
        </StackPanel>

        <Grid Grid.Row="1" Grid.Column="0">
            <!--Your graph control goes here-->
        </Grid>

        <Grid Grid.Row="1" Grid.Column="1">
            <!--Show/hide these based on buttons-->
            <!--Control 1 with combo boxes, radio buttons, etc.-->
            <!--Control 2 with combo boxes, radio buttons, etc.-->
            <!--Control 3 with combo boxes, radio buttons, etc.-->
        </Grid>
    </Grid>

Answer 3

感谢您的建议。鉴于存在大量现有代码，并且由于图形控件不完全符合 WPF MVVM，因此在这种情况下更好的答案是 Ritesh 发布的答案。将图表放入资源需要重写的代码比我目前有时间做的要多。

但是，我发现了我所看到的问题 - 有些控件没有显示粗体文本，而我认为它们应该是粗体文本。这完全是我的错。

在每个字段的每个选项卡上，根据用户选择的结果集，我有多个不同的标签可见。我已经很久没有访问这段代码了，我正在做的是添加粗体字体，因为它可以使值更好地突出。

尴尬，我忘了我是这样实现的。

我将为每个字段使用一个标签，并在多数据触发器中设置适当的内容绑定，而不是使用多个不同的标签方法，因为这会使内容更加清晰。这是一个相当复杂的应用程序。

我本来想删掉的，但其他人也问过类似的问题，不过，我认为Ritesh的回答与其他案例不同。

具有网格和共享内容的 WPF 选项卡控件

WPF tab control with grid and shared content

wpf

grid

tabcontrol