WPF，xaml 网格与 TabControl

Question

我有一个应用程序（在 WPF 中实现，XAML），它有 6 行和 6 列。在位置 Grid.Row="1" Grid.RowSpan="4" Grid.Column="0" Grid.ColumnSpan="5" ，我使用 TabControl 作为 Dashboard, 家政，以及科学。在每个 TabControl 中，我都在左侧使用 ListBox 来选择个人数据。 field/grid 的其余部分（w/o ListBox）（应具有 4 行和 4 列的大小）可用于图表。

问题

根据 XAML 代码，应将下面屏幕截图中可见的图表拉伸超过 4 行，一直延伸到应用程序的底部边缘。 TabControl 不是可见的 4 行，因为我附上了白色边框。

我怎样才能改变我的网格概念，使其按上述方式工作？是网格中的网格，resp。 TabControl 有必要吗？

WPF 应用程序的屏幕截图

MainWindow.xaml

<Window.DataContext>
    <local:MainViewModel/>
</Window.DataContext>


<Grid>
    <!-- Definition of Rows and Columns -->
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="250" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150"/>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="250" />
    </Grid.ColumnDefinitions>

    <!-- Header -->
    <StackPanel Grid.Row="0" Grid.ColumnSpan="6">

        <TextBlock Text="RFM DATA ANALYZER" Margin="20" HorizontalAlignment="Center" FontSize="36" FontWeight="Thin"  />

    </StackPanel>


    <!-- Tabs -->
    <StackPanel Grid.Row="1" Grid.RowSpan="4" Grid.Column="0"  Grid.ColumnSpan="5">
        <TabControl  TabStripPlacement="Top">
            <TabItem Header="Dashboard">
                <Border BorderBrush="White" BorderThickness="1">
                    <Grid>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="150" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <StackPanel Grid.Row="0" Grid.RowSpan="4" Grid.Column="0" Grid.ColumnSpan="1">
                            <TextBlock Text="Data" Margin="0 50 0 20" HorizontalAlignment="Left" FontFamily="Segoe UI Semibold" FontSize="15" Foreground="LightGray" />
                            <ListBox >
                                <ListBoxItem Content="Data 00" />
                                <ListBoxItem Content="Data 01" />
                                <ListBoxItem Content="Data 03" />
                            </ListBox>
                        </StackPanel>

                        <oxy:PlotView Model="{Binding Model1}" Background="Transparent" Grid.Row="0" Grid.RowSpan="4" Grid.Column="1"  Grid.ColumnSpan="1" />
                        <oxy:PlotView Model="{Binding Model2}" Background="Transparent" Grid.Row="0" Grid.RowSpan="4" Grid.Column="2"  Grid.ColumnSpan="1" />
                        <oxy:PlotView Model="{Binding Model3}" Background="Transparent" Grid.Row="0" Grid.RowSpan="4" Grid.Column="3"  Grid.ColumnSpan="1" />
                        <oxy:PlotView Model="{Binding Model4}" Background="Transparent" Grid.Row="0" Grid.RowSpan="4" Grid.Column="4"  Grid.ColumnSpan="1" />

                    </Grid>
                </Border>

            </TabItem>

            <TabItem Header="Housekeeping" Height="40">
                <Border BorderBrush="White" BorderThickness="1">
                    <Grid>
                        <Grid.ColumnDefinitions>
etc.

Answer 1

将您的 StackPanel 替换为 Grid。 StackPanels 大小为其子元素，而 Grids 大小为其父元素。

<StackPanel Grid.Row="1" Grid.RowSpan="4" Grid.Column="0"  Grid.ColumnSpan="5">
        <TabControl  TabStripPlacement="Top">

...变成...

<Grid Grid.Row="1" Grid.RowSpan="4" Grid.Column="0"  Grid.ColumnSpan="5">
        <TabControl  TabStripPlacement="Top">

WPF，xaml 网格与 TabControl

WPF, xaml grid with TabControl

wpf

grid

xaml

tabcontrol