如何在TabItem(WPF)中自动调整网格控件的大小?

时间:2011-12-19 20:52:29

标签: c# .net wpf tabcontrol tabitem

我有一个TabControl,在其中一个TabItem中我放置了一个文本框,其中定义为Margin="0"

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

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

如何在TabControl中调整元素大小,因为制表符控件会自动调整大小?

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

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

1 个答案:

答案 0 :(得分:0)

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

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

希望这有帮助。