如何自动调整TabItem（WPF）中的网格控件大小？

我有一个TabControl，在其中一个TabItems中，我放置了一个文本框，其定义为Margin="0"。如何自动调整TabItem（WPF）中的网格控件大小？

现在这个文本框直接取决于网格的大小，并将调整网格大小。但是，我无法找到如何使TabItem中的网格自动调整大小。

基本上，我希望TabControl及其内的所有元素自动调整大小。选项卡控件会自动调整大小，如果它们不在TabControl内，则所有元素都会自动调整大小。

如何使TabControl中的元素调整为Tab控件自动调整大小？

任何帮助或建议将是有用的。

这是我的XAML：

<TabControl x:Name="tabControl" Margin="8,28,8,8"> 
    <TabItem x:Name="tabItem" Header="Send"> 
    <Grid Width="200" Height="200"> 
     <TextBox x:Name="textBox" Margin="0,0,0,0"/> 
    </Grid> 
    </TabItem> 
</TabControl>

正如你可以看到，如果我增加了电网的宽度和高度，文本框的大小将增加，但我不能增加电网作为TabItem的TabControl的和增加。

编辑

原来，问题是我现在用的主题（WhistlerBlue）

的TabControl的是如下

<Style TargetType="{x:Type TabControl}"> 
     <Setter Property="Background" Value="#FFFFFFFF"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="Padding" Value="5"/> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
     <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
     <Setter Property="Foreground" Value="{StaticResource OutsideFontColor}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabControl}"> 
        <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition x:Name="ColumnDefinition0" /> 
          <ColumnDefinition x:Name="ColumnDefinition1" Width="0" /> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" x:Name="RowDefinition0" /> 
          <RowDefinition Height="*" x:Name="RowDefinition1" /> 
         </Grid.RowDefinitions> 
         <Border CornerRadius="2,2,0,0" x:Name="border" Margin="0,0,0,-1.5" Panel.ZIndex="100"> 
          <TabPanel x:Name="HeaderPanel" IsItemsHost="true" Panel.ZIndex="1" KeyboardNavigation.TabIndex="1" RenderTransformOrigin="0.5,0.5" Width="Auto" Height="Auto" Margin="2,0,0,0"> 
           <TabPanel.LayoutTransform> 
            <TransformGroup> 
             <ScaleTransform ScaleX="1" ScaleY="1" /> 
             <SkewTransform AngleX="0" AngleY="0" /> 
             <RotateTransform Angle="0" /> 
             <TranslateTransform X="0" Y="0" /> 
            </TransformGroup> 
           </TabPanel.LayoutTransform> 
           <TabPanel.RenderTransform> 
            <TransformGroup> 
             <ScaleTransform ScaleX="1" ScaleY="1" /> 
             <SkewTransform AngleX="0" AngleY="0" /> 
             <RotateTransform /> 
             <TranslateTransform X="0" Y="0" /> 
            </TransformGroup> 
           </TabPanel.RenderTransform> 

          </TabPanel> 
         </Border> 
         <Border Grid.Row="1" x:Name="ContentPanel" MinHeight="10" MinWidth="10" Background="#FFFFFFFF" BorderBrush="#FF979AA2" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1"> 
          <ContentPresenter Margin="4" x:Name="PART_SelectedContentHost" ContentSource="SelectedContent"/> 
         </Border> 
         <Border x:Name="DisabledVisualTop" Grid.Row="1" Grid.RowSpan="2" Background="#8CFFFFFF" CornerRadius="1" Panel.ZIndex="1" IsHitTestVisible="False" Opacity="0"/> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="TabStripPlacement" Value="Bottom"> 
          <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0" /> 
          <Setter Property="Height" TargetName="RowDefinition0" Value="*" /> 
          <Setter Property="Height" TargetName="RowDefinition1" Value="Auto" /> 
          <Setter Property="Grid.Row" TargetName="border" Value="1"/> 
          <Setter Property="CornerRadius" TargetName="ContentPanel" Value="2,2,0,0"/> 
          <Setter Property="CornerRadius" TargetName="border" Value="0,0,2,2"/> 
          <Setter Property="Margin" TargetName="border" Value="0,-1.5,0,0"/> 
         </Trigger> 
         <Trigger Property="TabStripPlacement" Value="Left"> 

          <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0" /> 
          <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0" /> 
          <Setter Property="Grid.Column" TargetName="ContentPanel" Value="1" /> 
          <Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto" /> 
          <Setter Property="Width" TargetName="ColumnDefinition1" Value="*" /> 
          <Setter Property="Height" TargetName="RowDefinition0" Value="*" /> 
          <Setter Property="Height" TargetName="RowDefinition1" Value="0" /> 
          <Setter Property="Grid.Column" TargetName="border" Value="0"/> 
          <Setter Property="Margin" TargetName="border" Value="0,0,-1,0"/> 
          <Setter Property="Margin" TargetName="ContentPanel" Value="0,0,0,0"/> 
          <Setter Property="CornerRadius" TargetName="border" Value="0,2,2,0"/> 
          <Setter Property="CornerRadius" TargetName="ContentPanel" Value="0,2,2,0"/> 
          <Setter Property="Margin" TargetName="HeaderPanel" Value="5,2,0,0"/> 

         </Trigger> 
         <Trigger Property="TabStripPlacement" Value="Right"> 
          <Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0" /> 
          <Setter Property="Grid.Row" TargetName="ContentPanel" Value="0" /> 
          <Setter Property="Grid.Column" TargetName="ContentPanel" Value="0" /> 
          <Setter Property="Width" TargetName="ColumnDefinition0" Value="*" /> 
          <Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto" /> 
          <Setter Property="Height" TargetName="RowDefinition0" Value="*" /> 
          <Setter Property="Height" TargetName="RowDefinition1" Value="0" /> 
          <Setter Property="Grid.Column" TargetName="border" Value="1"/> 
          <Setter Property="CornerRadius" TargetName="ContentPanel" Value="2,0,0,2"/> 
          <Setter Property="CornerRadius" TargetName="border" Value="0,2,2,0"/> 
          <Setter Property="Margin" TargetName="border" Value="-6,2,0,0"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" /> 
          <Setter Property="Opacity" TargetName="DisabledVisualTop" Value="1"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>

这里是TabItem的风格：

<Style d:IsControlPart="True" TargetType="{x:Type TabItem}"> 
     <Setter Property="HorizontalContentAlignment" Value="Center"/> 
     <Setter Property="VerticalContentAlignment" Value="Center"/> 
     <Setter Property="Padding" Value="10,6,10,6"/> 
     <Setter Property="MinWidth" Value="5"/> 
     <Setter Property="MinHeight" Value="5"/> 
     <Setter Property="Foreground" Value="{StaticResource OutsideFontColor}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TabItem}"> 
        <ControlTemplate.Resources> 
         <Storyboard x:Key="SelectedOn"> 
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TemplateTopSelected" Storyboard.TargetProperty="(UIElement.Opacity)"> 
           <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/> 
          </DoubleAnimationUsingKeyFrames> 
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TemplateTopUnselected" Storyboard.TargetProperty="(UIElement.Opacity)"> 
           <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0"/> 
          </DoubleAnimationUsingKeyFrames> 
         </Storyboard> 
         <Storyboard x:Key="SelectedOff"> 
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TemplateTopSelected" Storyboard.TargetProperty="(UIElement.Opacity)"> 
           <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/> 
          </DoubleAnimationUsingKeyFrames> 
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TemplateTopUnselected" Storyboard.TargetProperty="(UIElement.Opacity)"> 
           <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/> 
          </DoubleAnimationUsingKeyFrames> 
         </Storyboard> 
         <Storyboard x:Key="HoverOn"> 
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TopUnselectedOver" Storyboard.TargetProperty="(UIElement.Opacity)"> 
           <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/> 
          </DoubleAnimationUsingKeyFrames> 
         </Storyboard> 
         <Storyboard x:Key="HoverOff"> 
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TopUnselectedOver" Storyboard.TargetProperty="(UIElement.Opacity)"> 
           <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/> 
          </DoubleAnimationUsingKeyFrames> 
         </Storyboard> 
        </ControlTemplate.Resources> 
        <Grid x:Name="grid"> 
         <Grid.LayoutTransform> 
          <TransformGroup> 
           <ScaleTransform ScaleX="1" ScaleY="1"/> 
           <SkewTransform AngleX="0" AngleY="0"/> 
           <RotateTransform Angle="0"/> 
           <TranslateTransform X="0" Y="0"/> 
          </TransformGroup> 
         </Grid.LayoutTransform> 


         <Grid x:Name="TemplateTopSelected" Margin="-2,0,-2,0" Panel.ZIndex="0" Opacity="0"> 
          <Grid> 
           <Border x:Name="BackgroundTop" Background="#FFFFFFFF" BorderBrush="#FF979AA2" BorderThickness="1,1,1,0" /> 
          </Grid> 
          <Border x:Name="DisabledVisualTopSelected" Background="#8CFFFFFF" IsHitTestVisible="false" Visibility="Collapsed" /> 
         </Grid> 
         <Grid x:Name="TemplateTopUnselected" Margin="0,2,0,1" > 
          <Grid> 
           <Border x:Name="TopUnselected_Background" BorderBrush="#FF94979F" BorderThickness="1,1,1,0"> 
            <Border.Background> 
             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
              <GradientStop Color="#FFFFFFFF" Offset="0"/> 
              <GradientStop Color="#FFF3F3F3" Offset="0.152"/> 
              <GradientStop Color="#FFF3F3F3" Offset="0.456"/> 
              <GradientStop Color="#FFEBEBEB" Offset="0.465"/> 
              <GradientStop Color="#FFD6D6D5" Offset="1"/> 
             </LinearGradientBrush> 
            </Border.Background> 
           </Border> 
           <Border x:Name="TopUnselectedOver" Background="{StaticResource BtnOverFill}" BorderBrush="{StaticResource TabOverStroke}" BorderThickness="1,1,1,0" Opacity="0"/> 
           <Border x:Name="TopUnselected_Highlight" Margin="1" BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,0"/> 
          </Grid> 
          <Border x:Name="DisabledVisualTopUnSelected" Background="#8CFFFFFF" IsHitTestVisible="false" Visibility="Collapsed"/> 
         </Grid> 


         <ContentPresenter HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" x:Name="ContentSite" VerticalAlignment="Center" RecognizesAccessKey="True" ContentSource="Header" Opacity="1"/> 

        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="TabStripPlacement" Value="Left"> 
          <Setter Property="LayoutTransform" TargetName="grid"> 
           <Setter.Value> 
            <TransformGroup> 
             <ScaleTransform ScaleX="1" ScaleY="1" /> 
             <SkewTransform AngleX="0" AngleY="0" /> 
             <RotateTransform Angle="-90" /> 
             <TranslateTransform X="0" Y="0" /> 
            </TransformGroup> 
           </Setter.Value> 
          </Setter> 
         </Trigger> 
         <Trigger Property="TabStripPlacement" Value="Right"> 
          <Setter Property="LayoutTransform" TargetName="grid"> 
           <Setter.Value> 
            <TransformGroup> 
             <ScaleTransform ScaleX="1" ScaleY="1" /> 
             <SkewTransform AngleX="0" AngleY="0" /> 
             <RotateTransform Angle="90" /> 
             <TranslateTransform X="0" Y="0" /> 
            </TransformGroup> 
           </Setter.Value> 
          </Setter> 
         </Trigger> 
         <Trigger Property="TabStripPlacement" Value="Bottom"> 
          <Setter Property="LayoutTransform" TargetName="ContentSite"> 
           <Setter.Value> 
            <TransformGroup> 
             <ScaleTransform ScaleX="1" ScaleY="1" /> 
             <SkewTransform AngleX="0" AngleY="0" /> 
             <RotateTransform Angle="180" /> 
             <TranslateTransform X="0" Y="0" /> 
            </TransformGroup> 
           </Setter.Value> 
          </Setter> 
          <Setter Property="LayoutTransform" TargetName="grid"> 
           <Setter.Value> 
            <TransformGroup> 
             <ScaleTransform ScaleX="1" ScaleY="1"/> 
             <SkewTransform AngleX="0" AngleY="0"/> 
             <RotateTransform Angle="180"/> 
             <TranslateTransform X="0" Y="0"/> 
            </TransformGroup> 
           </Setter.Value> 
          </Setter> 
         </Trigger> 
         <MultiTrigger> 
          <MultiTrigger.ExitActions> 
           <BeginStoryboard Storyboard="{StaticResource HoverOff}" x:Name="HoverOff_BeginStoryboard"/> 
          </MultiTrigger.ExitActions> 
          <MultiTrigger.EnterActions> 
           <BeginStoryboard Storyboard="{StaticResource HoverOn}" x:Name="HoverOn_BeginStoryboard"/> 
          </MultiTrigger.EnterActions> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsMouseOver" Value="True" /> 
           <Condition Property="Selector.IsSelected" Value="False" /> 
          </MultiTrigger.Conditions> 
         </MultiTrigger> 
         <Trigger Property="IsSelected" Value="True"> 
          <Trigger.ExitActions> 
           <BeginStoryboard Storyboard="{StaticResource SelectedOff}" x:Name="SelectedOff_BeginStoryboard"/> 
          </Trigger.ExitActions> 
          <Trigger.EnterActions> 
           <BeginStoryboard Storyboard="{StaticResource SelectedOn}"/> 
          </Trigger.EnterActions> 
          <Setter Property="Panel.ZIndex" Value="100" /> 

         </Trigger> 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsMouseOver" Value="True" SourceName="grid" /> 
           <Condition Property="Selector.IsSelected" Value="True" /> 
          </MultiTrigger.Conditions> 
         </MultiTrigger> 
         <Trigger Property="IsEnabled" Value="False"> 
          <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}" /> 
          <Setter Property="Visibility" TargetName="DisabledVisualTopUnSelected" Value="Visible"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Foreground" Value="{DynamicResource OutsideFontColor}"/> 
    </Style>

来源

2011-12-19 xcvd

你可以发布你的XAML吗？ – Rachel 2011-12-19 20:54:53

@Rachel添加了我的XAML – xcvd 2011-12-19 21:09:57

TabControl本身伸展以填充可用空间吗？你可以向我们展示TabControl周围的XAML吗？ – 2011-12-19 21:18:14

删除宽度从电网身高和你有自动调整大小;-)

<TabControl x:Name="tabControl" Margin="8,28,8,8"> 
    <TabItem x:Name="tabItem" Header="Send"> 
    <Grid> 
     <TextBox x:Name="textBox" Margin="0"/> 
    </Grid> 
    </TabItem> 
</TabControl>

编辑

一旦我明白了这个问题，这是我提出的解决方案。

这里是Kaxaml拍摄风格（修改一点点）

<Style TargetType="{x:Type TabControl}"> 
    <Setter Property="OverridesDefaultStyle" Value="True" /> 
    <Setter Property="SnapsToDevicePixels" Value="True" /> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type TabControl}"> 
     <Grid KeyboardNavigation.TabNavigation="Local"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto"/> <!-- first modify, use Auto instead * --> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> <!-- second modify, use Auto instead * --> 
      </Grid.RowDefinitions> 
      <TabPanel 
      Name="HeaderPanel" 
      Grid.Row="0" 
      Panel.ZIndex="1" 
      Margin="0,0,4,-1" 
      IsItemsHost="True" 
      KeyboardNavigation.TabIndex="1" 
      Background="Transparent" /> 
      <Border 
      Name="Border" 
      Grid.Row="1" 
      Background="#FFFFFF" 
      BorderBrush="#888888" 
      BorderThickness="1" 
      CornerRadius="2" 
      KeyboardNavigation.TabNavigation="Local" 
      KeyboardNavigation.DirectionalNavigation="Contained" 
      KeyboardNavigation.TabIndex="2" > 
      <ContentPresenter 
       Name="PART_SelectedContentHost" 
       Margin="4" 
       ContentSource="SelectedContent" /> 
      </Border> 
     </Grid> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsEnabled" Value="False"> 
      <Setter Property="Foreground" Value="#888888" /> 
      <Setter TargetName="Border" Property="BorderBrush" Value="#AAAAAA" /> 
      </Trigger> 
     </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 

<!-- SimpleStyles: TabItem --> 

<Style TargetType="{x:Type TabItem}"> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type TabItem}"> 
     <Grid> 
     <Border 
      Name="Border" 
      Margin="0,0,-4,0" 
      Background="#E0E0E0" 
      BorderBrush="#888888" 
      BorderThickness="1,1,1,1" 
      CornerRadius="2,12,0,0" > 
      <ContentPresenter x:Name="ContentSite" 
      VerticalAlignment="Center" 
      HorizontalAlignment="Center" 
      ContentSource="Header" 
      Margin="12,2,12,2" 
      RecognizesAccessKey="True"/> 
     </Border> 
     </Grid> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsSelected" Value="True"> 
      <Setter Property="Panel.ZIndex" Value="100" /> 
      <Setter TargetName="Border" Property="Background" Value="#FFFFFF" /> 
      <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" /> 
      </Trigger> 
      <Trigger Property="IsEnabled" Value="False"> 
      <Setter TargetName="Border" Property="Background" Value="#EEEEEE" /> 
      <Setter TargetName="Border" Property="BorderBrush" Value="#AAAAAA" /> 
      <Setter Property="Foreground" Value="#888888" /> 
      </Trigger> 
     </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style>

更改这个在你的风格

<Grid.ColumnDefinitions> 
    <ColumnDefinition x:Name="ColumnDefinition0" Width="Auto" /> 
    <ColumnDefinition x:Name="ColumnDefinition1" Width="0" /> 
</Grid.ColumnDefinitions> 
<Grid.RowDefinitions> 
    <RowDefinition Height="Auto" x:Name="RowDefinition0" /> 
    <RowDefinition Height="Auto" x:Name="RowDefinition1" /> 
</Grid.RowDefinitions>

希望这有助于。

来源

2011-12-19 21:13:38 punker76

是的，那实际上并不创建自动调整大小的网格，或者至少不适合我。我只有Width =“200”和Height =“200”来显示文本框的大小如何依赖于网格的大小。 – xcvd 2011-12-19 21:16:45

@xcvd好吧，我想现在我已经理解了这个问题... – punker76 2011-12-19 21:39:53

如何自动调整TabItem（WPF）中的网格控件大小？

回答

相关问题