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.