How to auto resize grid control in a TabItem (WPF)?

2
votes

I have a TabControl, and in one of the TabItems I have a placed a text box, with definition of 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.

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.

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

Any help or suggestions would be useful.

Here is my 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.

EDIT

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

The TabControl is as follows

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

<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
c#.netwpftabcontroltabitem
Is the TabControl itself stretching to fill available space? Can you show us the XAML around the TabControl? – Samuel Jack
@SamuelJack the tab control does stretch itself into available space, I will show the additional code. – xcvd
I've just tried to reproduce this by pasting your XAML into Kaxaml. In that context the TextBox does stretch automatically. This suggests that you might have an implicit style applied to TabControls with a different ControlTemplate that alters the way it does its layout - can you check, and show us the style? – Samuel Jack
@SamuelJack - Turns out the problem is in the theme I am using (Whistler Blue), this is the tabItem style: pastebin and this is the tab control item pastebin – xcvd
@SamuelJack The problem was in the TabItem style: <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> – xcvd

1 Answers

1
votes

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)

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