如何使用WPF Grid來填充Tab項目區域

也許這是微不足道的，但對我來說是裸露的，因爲我是WPF的新手。如何獲得一個網格來填充選項卡項目的較低部分並使其尺寸正確？（我個人會將該區域稱爲頁面）。就目前而言，我在佈局根目錄中有一個網格，然後是一個帶有多個選項卡的選項卡控件。我試圖將一個網格拖放到選項卡控件上;但是，它始終設置爲我最初爲其創建的固定大小。任何示例或建議都會很棒。如何使用WPF Grid來填充Tab項目區域

<Grid x:Name="LayoutRoot" Margin="0,0,-1,0" Grid.IsSharedSizeScope="True"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="4*"/> 
     <ColumnDefinition Width="1497*"/> 
     <ColumnDefinition Width="116*"/> 
     <ColumnDefinition Width="36*"/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="101*"/> 
     <RowDefinition Height="24*"/> 
     <RowDefinition Height="5*"/> 
     <RowDefinition Height="27*"/> 
     <RowDefinition Height="597*"/> 
     <RowDefinition Height="0*"/> 
    </Grid.RowDefinitions> 
    <Rectangle Grid.ColumnSpan="4" Fill="#FF080808" Margin="-1,0,0,0" Stroke="#FF0061FF" Grid.RowSpan="3"/> 
    <Image Source="LP_Script Logo_black.jpg" Margin="32,18,1206,27" Grid.Column="1" Stretch="Fill" MinWidth="250" MinHeight="56" ScrollViewer.CanContentScroll="True"/> 
    <TextBox x:Name="ProgramSearchTextBox" TextWrapping="Wrap" Text="" KeyDown="ProgramSearchTextBox_KeyDown" PreviewKeyDown="ProgramSearchTextBox_PreviewKeyDown" Margin="2,1,2,0" HorizontalContentAlignment="Right" Grid.Column="2" Grid.Row="1" /> 
    <TabControl x:Name="mainMenuTabControl" VerticalAlignment="Stretch" Height="Auto" Width="Auto" PreviewKeyDown="mainMenuTabControl_PreviewKeyDown" Grid.ColumnSpan="4" Margin="-1,0,1,0" Grid.Row="3" BorderThickness="1,1,1,0" Grid.RowSpan="3"> 
     <TabItem x:Name="homeTab" Header="Home"> 
      <TabItem.Background> 
       <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
        <GradientStop Color="#FFF3F3F3" Offset="0"/> 
        <GradientStop Color="#FFEBEBEB" Offset="0.5"/> 
        <GradientStop Color="#FFC1C0C0" Offset="1"/> 
       </LinearGradientBrush> 
      </TabItem.Background> 
      <DockPanel Height="Auto" Width="Auto" d:IsHidden="True"> 
       <Grid x:Name="dashboard" Background="#FFE5E5E5" RenderTransformOrigin="0.5,0.5" Width="1636"> 
        <Grid.RenderTransform> 
         <TransformGroup> 
          <ScaleTransform ScaleY="-1" ScaleX="-1"/> 
          <SkewTransform/> 
          <RotateTransform Angle="180"/> 
          <TranslateTransform/> 
         </TransformGroup> 
        </Grid.RenderTransform> 
       </Grid> 
      </DockPanel> 
     </TabItem> 
     <TabItem x:Name="fileMaintTab" Header="File Maintenance" KeyDown="fileMaintTab_KeyDown"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="0*"/> 
        <RowDefinition/> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="0*"/> 
        <ColumnDefinition/> 
        <ColumnDefinition Width="336*"/> 
        <ColumnDefinition Width="1316*"/> 
       </Grid.ColumnDefinitions> 
       <TreeView x:Name="FileMaintTreeView" Background="#FF747474" BorderThickness="1,1,5,1" BorderBrush="#FF0090FD" SelectedItemChanged="FileMaintTreeView_SelectedItemChanged" RenderTransformOrigin="0.5,0.5" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" Margin="0,0,1,0"> 
        <TreeView.RenderTransform> 
         <TransformGroup> 
          <ScaleTransform/> 
          <SkewTransform/> 
          <RotateTransform/> 
          <TranslateTransform/> 
         </TransformGroup> 
        </TreeView.RenderTransform>

來源

2013-10-22 user2859487

發佈相關的XAML。 –

我最關心的是filMaintTab。 – user2859487

這裏是一個小例子來證明這一點對你：

<Grid> 
    <TabControl> 
     <TabItem Header="Whole Row Tab"> 
      <Grid Background="Blue"> 
       <TextBlock Text="I'm in the whole of this tab" /> 
      </Grid> 
     </TabItem> 
     <TabItem Header="Half Row Tab"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition /> 
        <RowDefinition /> 
       </Grid.RowDefinitions> 
       <Grid Grid.Row="1" Background="Red"> 
        <TextBlock Text="I'm in the bottom half of this tab" /> 
       </Grid> 
      </Grid> 
     </TabItem> 
     <TabItem Header="Another Half Row Tab"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="*" /> 
        <RowDefinition Height="*" /> 
       </Grid.RowDefinitions> 
       <Grid Grid.Row="1" Background="Red"> 
        <TextBlock Text="I'm in the bottom half of this tab" /> 
       </Grid> 
      </Grid> 
     </TabItem> 
     <TabItem Header="Varied Row Tab"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="*" /> 
        <RowDefinition Height="2*" /> 
        <RowDefinition Height="*" /> 
       </Grid.RowDefinitions> 
       <Grid Grid.Row="0" Background="Green"> 
        <TextBlock Text="I'm in the top quarter of this tab" /> 
       </Grid> 
       <Grid Grid.Row="3" Background="Green"> 
        <TextBlock Text="I'm in the bottom quarter of this tab" /> 
       </Grid> 
      </Grid> 
     </TabItem> 
    </TabControl> 
</Grid>

來源

2013-10-22 16:21:08 Sheridan

所以在這個例子中，在選項卡控件下面有一個網格，類似於我目前正在做的。不過，在這個例子中，究竟是什麼讓一個看似空白的完成？ – user2859487

我添加了'Another Half Row Tab'來顯示你做了什麼......''和''是一樣的。 – Sheridan

對於Grid您TabItem下，嘗試建立您的定義，像這樣：

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

爲了您的TreeView的定義，我把它改爲：

<TreeView x:Name="FileMaintTreeView" Background="#FF747474" BorderBrush="#FF0090FD" SelectedItemChanged="FileMaintTreeView_SelectedItemChanged" Grid.Column="0" Grid.Row="0">

（我刪除之類的利潤率和諸如此類的東西，你可以把它們放回如果你想...

這將至少讓你的TreeView，填補了整個TabItem。

如果您希望TabItem在頁面上有其他內容...讓我們來說一下TreeView旁邊的某個控件，那麼您可以添加另一個ColumnDefinition。寬度=「*」意味着它將填滿整個剩餘空間。寬度=「自動」表示它只會填充嵌套在該列/行內的控件的大小。

來源

2013-10-22 16:21:12 Mash

這是一個網格面板。刪除實際網格的高度和寬度只會將網格面板縮小爲標籤頁中間的點。 – user2859487

@ user2859487好的，我的錯誤，我誤解了。我已經更新了我的答案，希望能幫助你開始。將控件拖放到窗體上時，會自動爲您設置事件，並且我懷疑這是您的行/列定義的高度和寬度所發生的情況。我更喜歡手動輸入XAML，這樣你就可以確切地知道你得到了什麼。 – Mash

可以理解。這真的很接近我所期待的，我真的很感謝你的幫助;但是，它並未填滿整個頁面。然而，我按照你的建議設置了網格，網格在它的兩側留下了相當數量的空間。有什麼建議麼？ – user2859487

如何使用WPF Grid來填充Tab項目區域

回答

相關問題