XAML將數據網格設置爲頂部90％的網格，按鈕底部10％全部在一個tabitem

我有一個TabItem，我想顯示一個DataGrid（MahApps.Metro）在它的上部90％和2個按鈕我想要在其底部顯示10％。這適用於窗口完全放大的情況，但當窗口不是時，scrollviewer不可見，控件和元素將脫離屏幕。請幫忙，我被困了好幾個小時！這是我到目前爲止的代碼：XAML將數據網格設置爲頂部90％的網格，按鈕底部10％全部在一個tabitem

<TabItem Header="Queue" FontSize="15"> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="9*"/> 
       <RowDefinition Height="1*"/> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="77*"/> 
       <ColumnDefinition Width="24*"/> 
      </Grid.ColumnDefinitions> 
      <DataGrid x:Name="songdatagrid" VerticalAlignment="Stretch" ItemsSource="{Binding SongInfo}" VerticalScrollBarVisibility="Auto" AutoGenerateColumns="False" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" > 
       <DataGrid.Columns > 
        <DataGridTemplateColumn x:Name="songinfocolumn" Header="Song Info" Width=".6*"> 
         <DataGridTemplateColumn.CellTemplate> 
          <DataTemplate> 
           <TextBlock Text="{Binding songInfo.Text}" Uid="{Binding SongInfo.Uid}" ToolTipService.ToolTip="Double click to open song in Youtube." MouseLeftButtonDown="tb_MouseLeftButtonDown5" /> 
          </DataTemplate> 
         </DataGridTemplateColumn.CellTemplate> 
        </DataGridTemplateColumn> 
        <DataGridTemplateColumn x:Name="requestercolumn" Header="Requester" Width=".18*"> 
         <DataGridTemplateColumn.CellTemplate> 
          <DataTemplate> 
           <TextBlock Text="{Binding songReq.Text}" Uid="{Binding songReq.Uid}" ToolTipService.ToolTip="Double click to open requester's Twitch page." MouseLeftButtonDown="tb_MouseLeftButtonDown6" /> 
          </DataTemplate> 
         </DataGridTemplateColumn.CellTemplate> 
        </DataGridTemplateColumn> 
        <DataGridTemplateColumn x:Name="moveupcolumn" Header="Move Up" Width=".12*"> 
         <DataGridTemplateColumn.CellTemplate> 
          <DataTemplate> 
           <Button Width="35" Height="35" Uid="{Binding moveUp.Uid}" Style="{DynamicResource MetroCircleButtonStyle}" Click="moveup" ToolTipService.ToolTip="Click to move this song up in the list."> 
            <Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"> 
             <Rectangle.OpacityMask> 
              <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_arrow_up}" /> 
             </Rectangle.OpacityMask> 
            </Rectangle> 
           </Button> 
          </DataTemplate> 
         </DataGridTemplateColumn.CellTemplate> 
        </DataGridTemplateColumn> 
        <DataGridTemplateColumn x:Name="deletecolumn" Header="Remove" Width=".12*"> 
         <DataGridTemplateColumn.CellTemplate> 
          <DataTemplate> 
           <Button Width="35" Height="35" Uid="{Binding delete.Uid}" Style="{DynamicResource MetroCircleButtonStyle}" Click="deleteSong" ToolTipService.ToolTip="Click to remove song from the list."> 
            <Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"> 
             <Rectangle.OpacityMask> 
              <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_delete}" /> 
             </Rectangle.OpacityMask> 
            </Rectangle> 
           </Button> 
          </DataTemplate> 
         </DataGridTemplateColumn.CellTemplate> 
        </DataGridTemplateColumn> 
       </DataGrid.Columns> 
      </DataGrid> 
      <Button Style="{DynamicResource SquareButtonStyle}" x:Name="refresh" IsDefault="True" Background="White" Content="Refresh" Click="Button_Click" FontSize="16" Grid.Column="0" Grid.Row="1"/> 
      <Button Style="{DynamicResource SquareButtonStyle}" x:Name="clear" IsDefault="True" Background="White" Content="Clear List" Click="clearlist" FontSize="16" Grid.Column="1" Grid.Row="1"/> 
     </Grid> 
    </TabItem>

我不得不把它添加到頂部得到地鐵水平滾動條上的tabholder工作。除此之外，還有更多的tabitems。

<TabControl x:Name="tabholder" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="LightBlue" 
     SelectionChanged="TabControl_SelectionChanged" > 
    <TabControl.Template> 
     <ControlTemplate TargetType="TabControl"> 
      <StackPanel> 
       <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled"> 
        <TabPanel x:Name="HeaderPanel" 
          Panel.ZIndex ="1" 
          KeyboardNavigation.TabIndex="1" 
          Grid.Column="0" 
          Grid.Row="0" 
          IsItemsHost="true"/> 
       </ScrollViewer> 
       <ContentPresenter x:Name="PART_SelectedContentHost" 
             ContentSource="SelectedContent"/> 
      </StackPanel> 
     </ControlTemplate> 
    </TabControl.Template>

來源

2017-01-26 Edude15000

的StackPanel，你必須在有多餘的，造成你的問題，其他Grid面板。此外，您的固定Width & Height在模板中具有其自己的設置大小屬性，如高度會給出不希望的結果。你應該只需要這樣的東西來實現你的目標。

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="9*"/> 
     <RowDefinition Height="1*"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 

    <DataGrid Grid.ColumnSpan="2">...</DataGrid> 

    <Button Grid.Row="1" Content="Button 1"/> 
    <Button Grid.Row="1" Grid.Column="1" Content="Button 2"/> 

</Grid>

乾杯！

來源

2017-01-26 16:37:46

謝謝你的回覆，佈局看起來應該是現在，但是當我在數據網格中有更多的數據單元時，它就會永遠飛離屏幕。無論如何將datagrid的maxheight設置爲tabitem的90％？ – Edude15000

@ Edude15000我可能需要一個視覺例子來說明你永遠在屏幕上飛翔的意思。通常，如果您的DataGrid位於具有星形調整大小的Grid父級中，那麼它應該被限制爲由父級Grid定義的父級邊界，並默認調用ScrollViewer.VerticalScrollBarVisibility =「Auto」'以將ScrollViewer內置到DataGrid模板在必要時提供滾動。 –

以下是正常（小）尺寸的樣子：[小尺寸]（http://imgur.com/a/pE06R）以下是完全最大化時的樣子：[MAXIMIZED]（http：/ /imgur.com/a/7Av7L）它飛出窗口，即使通過設置VerticalScrollBarVisibility =「Auto」 – Edude15000

StackPanel導致問題，現在一切正常！：D

來源

2017-01-26 21:47:15 Edude15000

XAML將數據網格設置爲頂部90％的網格，按鈕底部10％全部在一個tabitem

回答

相關問題