2011-12-19 4 views
1

У меня есть TabControl, и в одном из TabItems у меня есть текстовое поле с определением Margin="0".Как изменить размер элемента управления сеткой в ​​TabItem (WPF)?

Теперь это текстовое поле напрямую зависит от размера сетки и будет изменять размер с помощью сетки. Тем не менее, я не могу найти, как сделать автоматическое изменение сетки внутри 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 увеличивается.

EDIT

Оказывается, проблема с темой я использую (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> 
+0

Можете ли вы разместить свой XAML? – Rachel

+0

@ Rachel добавил мой XAML – xcvd

+0

Является ли сам TabControl растягиванием, чтобы заполнить свободное пространство? Можете ли вы показать нам XAML вокруг TabControl? –

ответ

0

удалить Ширина и высота от сетки и у вас есть 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> 

РЕДАКТИРОВАНИЕ

После того, как я понял вопрос, здесь предложен мое решение.

Вот стиль взят из 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> 

Надеется, что это помогает.

+0

Да, это фактически не создает сетку автоматического изменения размера, или, по крайней мере, не для меня. У меня только Width = "200" и Height = "200", чтобы показать, как размер текстового поля зависит от размера сетки. – xcvd

+0

@xcvd ok, я думаю, теперь я понял вопрос ... – punker76

Смежные вопросы