简体   繁体   中英

WPF, xaml grid with TabControl

I have an application (implemenented in WPF, XAML) which has 6 rows and 6 columns. At the position Grid.Row="1" Grid.RowSpan="4" Grid.Column="0" Grid.ColumnSpan="5" , I'm using a TabControl for Dashboard , Housekeeping , and Science . In every TabControl , I'm using a ListBox on the left side to choose individual data. The rest (w/o the ListBox ) of the field/grid (which should have a size of 4 rows and 4 columns) is available for charts.

Problem

The charts which are visible in the screenshot below should be stretched over 4 rows down to the bottom edge of the application according to the XAML code. The TabControl is not 4 rows as visible because of the white boarder I have attached.

How can I change my grid-concept that it works as described above? Is a grid in the grid, resp. in the TabControl necessary at all?

Screenshot of the WPF application

在此处输入图片说明

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.

Replace your StackPanel s with Grid s. StackPanel s size to their child elements, whereas Grid s size to their parent.

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

...becomes...

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM