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

I have a TabControl, and in one of the TabItems I have a placed a text box, with definition of Margin="0".

我有一个TabControl,在其中一个TabItems中我放置了一个文本框,其中定义了Margin =“0”。

Now this text box depends directly on the size of the grid, and will resize with the grid. However, I can't find how to make the grid auto resize inside the TabItem.

现在,此文本框直接取决于网格的大小,并将随网格调整大小。但是,我找不到如何在TabItem中自动调整网格大小。

Basically, I want the TabControl and all elements within it to automatically resize. The tab control auto resizes correctly, and the elements all auto resize correctly if they are not inside the TabControl.

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

How can I make elements in a TabControl resize as the tab control automatically resizes?

当制表符控件自动调整大小时,如何使TabControl中的元素调整大小?

Any help or suggestions would be useful.

任何帮助或建议都会有用。

Here is my xaml:

这是我的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>

As you can see, if I increase the grid width and height, the textbox will increase in size, but I can't increase the grid as the tabItem and tabControl increases.

如您所见,如果我增加网格宽度和高度,文本框的大小会增加,但是当tabItem和tabControl增加时,我无法增加网格。

EDIT

Turns out the problem is with the theme I am using (WhistlerBlue)

事实证明问题在于我正在使用的主题(WhistlerBlue)

The TabControl is as follows

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>

And here is the TabItem 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>

1 个解决方案

#1

remove Width and Height from the Grid and you have autosize ;-)

从网格中删除宽度和高度,您已自动调整大小;-)

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

EDIT

Once I understood the question, here is my proposed solution.

一旦我理解了这个问题,这就是我提出的解决方案。

Here is a style taken from Kaxaml (a little bit modified)

这是从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>

Change this at your 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>

Hope this helps.

希望这可以帮助。