2015-08-10 4 views
0

У меня есть приложение (исполнено в 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

enter image description here

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. 

ответ

1

Замените StackPanel с с Grid с. StackPanel s размер для их дочерних элементов, тогда как размер Grid s их родителям.

<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"> 
+0

Вау, это было просто :-) Спасибо. Но для всех других областей приложения я также использую StackPanel. Это неправильно, даже если это работает? – Kevin

+0

Его распространенная ошибка при обучении XAML. Когда вам нужен элемент управления, который заполняет всю область родителя, вам, скорее всего, понадобится Grid, StackPanel - для того, когда вы хотите выровнять некоторые элементы управления рядом друг с другом. Познакомьтесь с лучшим использованием для каждого элемента управления. –