У меня есть приложение (исполнено в WPF, XAML), которое имеет 6 строк и 6 столбцов. В положении Grid.Row="1" Grid.RowSpan="4" Grid.Column="0" Grid.ColumnSpan="5"
, я использую TabControl
для Dashboard, Housekeeping и Наука. В каждом TabControl
я использую ListBox
с левой стороны для выбора отдельных данных. Остальные (без ListBox
) поля/сетки (которые должны иметь размер 4 строки и 4 столбца) доступны для диаграмм.WPF, сетка xaml с TabControl
Проблема
Диаграммы, которые видны на скриншоте ниже, должны быть натянутой на 4 строки вниз к нижнему краю приложения в соответствии с кодом XAML. TabControl
не 4 строки, как видно из-за того, что я прикреплял белый доски.
Как я могу изменить свою концепцию сетки, чтобы она работала, как описано выше? Является сеткой в сетке, соответственно. в 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.
Вау, это было просто :-) Спасибо. Но для всех других областей приложения я также использую StackPanel. Это неправильно, даже если это работает? – Kevin
Его распространенная ошибка при обучении XAML. Когда вам нужен элемент управления, который заполняет всю область родителя, вам, скорее всего, понадобится Grid, StackPanel - для того, когда вы хотите выровнять некоторые элементы управления рядом друг с другом. Познакомьтесь с лучшим использованием для каждого элемента управления. –