Как автоматически изменить размер элемента управления сеткой в ​​TabItem (WPF)?

У меня есть TabControl, и в одном из элементов вкладки я поместил текстовое поле с определением 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>

.net c# tabitem wpf tabcontrol
person xcvd    schedule 19.12.2011    source источник
comment
Растягивается ли TabControl, чтобы заполнить доступное пространство? Вы можете показать нам XAML вокруг TabControl?   -  person Samuel Jack    schedule 20.12.2011
comment
@SamuelJack элемент управления вкладкой растягивается до доступного пространства, я покажу дополнительный код.   -  person xcvd    schedule 20.12.2011
comment
Я только что попытался воспроизвести это, вставив ваш XAML в Kaxaml. В этом контексте TextBox растягивается автоматически. Это говорит о том, что у вас может быть неявный стиль, примененный к TabControls с другим ControlTemplate, который изменяет способ его макета - вы можете проверить и показать нам стиль?   -  person Samuel Jack    schedule 20.12.2011
comment
@SamuelJack - Оказывается, проблема в теме, которую я использую (Whistler Blue), это стиль tabItem: pastebin, а это элемент управления вкладкой pastebin   -  person xcvd    schedule 20.12.2011
comment
@SamuelJack Проблема была в стиле TabItem: ‹Свойство Setter = Значение HorizontalContentAlignment = Центр /› ‹Свойство Setter = Значение VerticalContentAlignment = Центр /›   -  person xcvd    schedule 20.12.2011
comment
@xcvd, пожалуйста, опубликуйте свое решение в качестве ответа и примите его - это тоже устранило мою проблему, но было трудно пройти через весь XAML, чтобы попытаться найти тонкий комментарий. Вы также можете подумать об избавлении от всего стиля XAML-кода, если он не применим к проблеме / решению (он всегда доступен в истории вопросов, если кто-то хочет его увидеть)   -  person johnny    schedule 12.11.2013

Ответы (1)


arrow_upward
1
arrow_downward

удалите ширину и высоту из сетки, и у вас будет автоматический размер ;-)

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

Надеюсь это поможет.

person punker76    schedule 19.12.2011
comment
Да, это на самом деле не создает сетку автоматического изменения размера, по крайней мере, для меня. У меня были только ширина = 200 и высота = 200, чтобы показать, как размер текстового поля зависит от размера сетки. - person xcvd; 20.12.2011