locked
Why is this TabItem behavior happening? RRS feed

  • Question

  • I'm having a weird issue with my custom TabItem.

    To begin, here is a screenshot what I will discuss: SCREENSHOT

    I basically have an Inherited Tab control which is using an Inherited TabItem (called WPFTabControl and WPFTabItem respectively).

    The next step for me was to place my WPFTabControl in a window with a corresponding WPFTabItem . At this point I decided to place a button in my WPFTabItem , but this is where it started getting buggy. Expression Blend didn't auto-create a Grid inside my TabItem, so I went into the code and created the Grid manually. After doing so, I noticed that the Grid was not "stretched" .

    So i decided to place a regular TabControl and regular TabItem next to my control in Expression Blend. As soon as I placed a button in the regular TabControl, it auto-created a Grid control that "strecthed" .

    Why is it that a grid control in my WPFTabItem has its height and width at Auto (0) and the regular TabItem has it at Auto (336) and Auto (270.723333333333) ???

    Monday, May 10, 2010 2:01 PM

Answers

All replies

  • First, thanks for including a screenshot, that is always helpful.

     

    Are you doing any layout overrides in your custom inherited controls?  Can you post the code and the xaml you are using so I can try to recreate your situation?

     

     

    Monday, May 10, 2010 6:14 PM
    Moderator
  • I figured a screenshot would help  :)

    Actually, I have no extra layout code in my inherited controls, here is the code (a small note: these are class-only files, my inherited controls have no XAML files, therefore the following code is ALL the code for the two controls):

     

    Public Class WPFTabControl
      Inherits System.Windows.Controls.TabControl
    
      Shared Sub New()
        'This OverrideMetadata call tells the system that this element wants to provide a style that is different than its base class.
        'This style is defined in themes\generic.xaml
        DefaultStyleKeyProperty.OverrideMetadata(GetType(WPFTabControl), new FrameworkPropertyMetadata(GetType(WPFTabControl)))
      End Sub
    End Class

    Public Class WPFTabItem
      Inherits System.Windows.Controls.TabItem
    
      Shared Sub New()
        'This OverrideMetadata call tells the system that this element wants to provide a style that is different than its base class.
        'This style is defined in themes\generic.xaml
        DefaultStyleKeyProperty.OverrideMetadata(GetType(WPFTabItem), new FrameworkPropertyMetadata(GetType(WPFTabItem)))
      End Sub
    End Class

     

    I tested this behavior in Studio 2008 as well and it's the same. As soon as I add my inherited TabControl to my window, the Grid that is auto-created within the TabItem is shrunk with a width and height of 0.

     

    Thanks again!

    Monday, May 10, 2010 7:22 PM
  • Are the styles you are trying to override actually defined?  Can you post those as well?  What happens when you apply those styles to a regular tabitem/tabcontrol?
    Monday, May 10, 2010 8:15 PM
    Moderator
  •   <Style TargetType="{x:Type local:WPFTabControl}">
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
              <Grid KeyboardNavigation.TabNavigation="Local">
                <Grid.RowDefinitions>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
    
                <!-- TabPanel is a layout container which allows the TabItems to wrap and re-order when selected
                The implementation knows to use this control because it is marked IsItemsHost = True -->
                <TabPanel Grid.Row="0" Margin="0,0,4,-1" x:Name="HeaderPanel" Background="Transparent" IsItemsHost="True" Panel.ZIndex="1" KeyboardNavigation.TabIndex="1"/>
    
                <Border Grid.Row="1" x:Name="Border" Background="{StaticResource PanelBackgroundBrush}" BorderBrush="{StaticResource SolidBorderBrush}" BorderThickness="1" CornerRadius="0,3,3,3" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabNavigation="Local" KeyboardNavigation.TabIndex="2">
    
                  <!-- The implementation switches the content. This control must be named PART_SelectedContentHost -->
                  <ContentPresenter Margin="4" x:Name="PART_SelectedContentHost" ContentSource="SelectedContent"/>
    
                </Border>
              </Grid>
    
              <ControlTemplate.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                  <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                  <Setter Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" TargetName="Border"/>
                </Trigger>
              </ControlTemplate.Triggers>
    
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
       
    <Style TargetType="{x:Type local:WPFTabItem}" d:IsControlPart="True">
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
              <Grid>
                <Border Margin="0,0,-4,0" x:Name="Border" Background="{StaticResource LightBrush}" BorderBrush="{StaticResource SolidBorderBrush}" BorderThickness="1,1,1,1" CornerRadius="3,8,0,0">
                  <ContentPresenter HorizontalAlignment="Center" Margin="12,2,12,2" x:Name="ContentSite" VerticalAlignment="Center" RecognizesAccessKey="True" ContentSource="Header"/>
                </Border>
              </Grid>
              <ControlTemplate.Triggers>
                <Trigger Property="IsSelected" Value="True">
                  <Setter Property="Panel.ZIndex" Value="100"/>
                  <Setter Property="Background" Value="{StaticResource PanelBackgroundBrush}" TargetName="Border"/>
                  <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}"/>
                  <Setter Property="BorderThickness" Value="1,1,1,0" TargetName="Border"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                  <Setter Property="Background" Value="{StaticResource DisabledBackgroundBrush}" TargetName="Border"/>
                  <Setter Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" TargetName="Border"/>
                  <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                </Trigger>
              </ControlTemplate.Triggers>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>

    I believe I copied and modified these styles from the SimpleStyles.xaml file that gets generated from Expression Blend when using "Simple Style" controls. Weird thing is when I the tab control from the SimpleStyles controls, it works fine  :\
    Tuesday, May 11, 2010 5:48 PM
  • I used the "Snoop" program to look at the hierarchy of the controls and their containers, and it seems that the problem is coming from the ContentPresenter in the inherited TabControl's ControlTemplate. For some odd reason, it's not sizing properly.

    Still looking into this...

    Wednesday, May 12, 2010 7:34 PM
  • This issue is not related to the TabControl itself, it's beyond that, seems to be a problem with the ControlTemplate.

    I created a new thread for this issue...

     

    http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/9cb1901a-b6cf-4e49-b878-6d346b924977

     

    • Marked as answer by maximus37 Friday, May 14, 2010 7:21 PM
    Friday, May 14, 2010 7:21 PM