How to auto resize grid control in a TabItem (WPF)?
Question
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 answers
solution1
0 2011-12-19 21:13:38
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to focus control in the tabItem in WPF
How to create WPF user control: custom TabItem?
How to find control from datatemplate of tabitem wpf
Auto Height of tabitem wpf
Prevent resize of control in grid WPF C#
How to add custom-control-derived TabItem to TabControl in WPF?
How to resize control according to another control ? (WPF)
How to write a custom control, which can auto resize just like TextBox in a grid cell?
Wpf: Resize control in subgrid (row, column) to parent grid size
WPF (Avalonia) - Draw control (button) outside TabItem?
Related Tags