如何自动调整TabItem (WPF)中的网格控件的大小
本文关键字：网格 控件 调整 何自动 TabItem WPF | 更新日期: 2023-09-27 18:18:14
我有一个TabControl，在其中一个TabItems中我放置了一个文本框，定义了Margin="0"。
现在这个文本框直接取决于网格的大小，并将随着网格的大小而调整。但是，我找不到如何在TabItem中使网格自动调整大小。
基本上，我想要TabControl和它里面的所有元素自动调整大小。tab控件会自动正确调整大小，如果不在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>
从网格中删除宽度和高度，你就有了自动大小;-)
<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>
编辑
一旦我明白了这个问题，以下是我提出的解决方案。
这是一个取自kamaml的样式(稍微修改了一下)
<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>
在你的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>