XAMLはグリッドの90％を上に、下のボタンを10％のすべてのタブアイテムに設定します

Question

私はデータグリッド（MahApps.Metro）をその上90％と私が望む2つのボタンに表示したいTabItemを持っています下の10％を表示します。これはウィンドウが完全に拡大されているときに機能しますが、そうでない場合はスクロールビューアが表示されず、コントロールや要素が画面から消えます。助けてください、私は何時間も立ち往生しました！これまでのコードはこれまで通りです：

<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でMetro水平スクロールバーを操作する必要がありました。これ以外にも、もっと多くのタブアイテムがあります。

Answer 1

StackPanelと冗長とあなたの問題を引き起こしがある中で、あなたが持っている他のGridパネル

<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> 

。また、高さのような独自のセットサイズ属性を持つテンプレート内の固定 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> 

乾杯！

Answer 2

StackPanelが問題を引き起こしていました。今はすべて動作します！ ：D