locked
Add content to TabControl header RRS feed

  • Question

  • As I said in the title, I want to add some content to the right side of the TabControl header. (Actually, a custom control that inherits TabControl.) Ultimately, it needs to look like this:

    But right now I'm just trying to get a TextBlock to display. (I'll deal with template binding to the contents of a StackPanel dependency property once I get this working, lol.) Based on my research, and particularly on this StackOverflow thread, the following should work:

                    <ControlTemplate TargetType="{x:Type local:ToolbarTab}">
                        <Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true"
                                 KeyboardNavigation.TabNavigation="Local">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition x:Name="ColumnDefinition0"/>
                                <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                                <RowDefinition x:Name="RowDefinition1" Height="*"/>
                            </Grid.RowDefinitions>
                            
                            <DockPanel Panel.ZIndex="1">
                                <TabPanel x:Name="headerPanel" Background="Transparent" IsItemsHost="true" Margin="2,2,2,0"
                                          KeyboardNavigation.TabIndex="1"
                                          DockPanel.Dock="Left"/>
                                <TextBlock Foreground="White" DockPanel.Dock="Right">Test</TextBlock>
                            </DockPanel>


                            <Border x:Name="contentPanel" ...
                                <ContentPresenter x:Name="PART_SelectedContentHost" ..."/>
                            </Border>
                        </Grid>
                    </ControlTemplate>

    But it doesn't. (You knew that, right?) I'm not getting any compile or run time errors, and the tabs themselves are displaying fine, the the text isn't.

    Am I doing something obviously wrong?


    Rebecca M. Riordan

    Monday, January 26, 2015 9:29 PM

Answers

  • Hello Rebecca M. Riordan,

    I haven't got your full sample so I don't know how you followed his code. I tried it with my code and I can show it if I modify the   <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/> change 0 to 100 and then add a button to show, please check my code below:

    <Window x:Class="WPFTabControlCustomize.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525">
    
            <Window.Resources>
                <Style TargetType="{x:Type TabControl}">
                    <Setter Property="SnapsToDevicePixels"
                        Value="True" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabControl">
                                <Grid>
                                    <GroupBox Header="TabControl"
                                      BorderBrush="Blue"
                                      Foreground="Blue">
                                        <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition x:Name="ColumnDefinition0"/>
                                            <ColumnDefinition x:Name="ColumnDefinition1" Width="100"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                                            <RowDefinition x:Name="RowDefinition1" Height="*"/>
                                        </Grid.RowDefinitions>
                                        <GroupBox Header="TabPanel"
                                              Foreground="Pink"
                                              BorderBrush="Pink"
                                              Grid.Row="0">
                                            <TabPanel IsItemsHost="True" />                                     
                                        </GroupBox>
                                        <Button Grid.Column="1" Grid.Row="0">12345</Button>
                                    </Grid>
                                    </GroupBox>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Window.Resources>
        <Grid>
            <TabControl>
                <TabItem>
                    <TabItem.Header>
                        <Label Foreground="Black">Tab 0</Label>
                    </TabItem.Header>
                    <Grid Background="Gray" />
                </TabItem>
                <TabItem>
                    <TabItem.Header>
                        <Label Foreground="Black">Tab 1</Label>
                    </TabItem.Header>
                    <Grid Background="Green" />
                </TabItem>
                <TabItem>
                    <TabItem.Header>
                        <Label Foreground="Black">Tab 2</Label>
                    </TabItem.Header>
                    <Grid Background="Red" />
                </TabItem>
                <TabItem>
                    <TabItem.Header>
                        <Label Foreground="Black">Tab 3</Label>
                    </TabItem.Header>
                    <Grid Background="Yellow" />
                </TabItem>
            </TabControl>
        </Grid>
        
    </Window>
    

    The result:

    I think you can also try use a style and put your control template in it, after that modify some values of your controls to show them. If you want us to know the problem of your error, you'd better share us more code from your sample. Or we don't know which line caused your error.

    By the way, the writer of stackoverflow thread http://stackoverflow.com/questions/1423533/on-the-wpf-tabcontrol-can-i-add-content-next-to-the-tab-headers has a blog and already shared his sample, I haven't tested it, what about you? Have you tried that yet?

    Best regards,



    Barry
    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by Barry Wang Wednesday, January 28, 2015 2:26 AM
    Tuesday, January 27, 2015 7:50 AM
  • Thanks for your help, guys. Setting the width of the second column to "Auto" did the trick. Well, that and realizing that I need to set the HorizontalAlignment of the textbox. (Don't you just hate it when you are so convinced you have something tricky wrong that you overlook the mistake in the simple thing?)

    Thanks again.


    Rebecca M. Riordan

    • Marked as answer by Barry Wang Wednesday, January 28, 2015 2:26 AM
    Tuesday, January 27, 2015 8:27 PM

All replies

  • Hello Rebecca M. Riordan,

    I haven't got your full sample so I don't know how you followed his code. I tried it with my code and I can show it if I modify the   <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/> change 0 to 100 and then add a button to show, please check my code below:

    <Window x:Class="WPFTabControlCustomize.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525">
    
            <Window.Resources>
                <Style TargetType="{x:Type TabControl}">
                    <Setter Property="SnapsToDevicePixels"
                        Value="True" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabControl">
                                <Grid>
                                    <GroupBox Header="TabControl"
                                      BorderBrush="Blue"
                                      Foreground="Blue">
                                        <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition x:Name="ColumnDefinition0"/>
                                            <ColumnDefinition x:Name="ColumnDefinition1" Width="100"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition x:Name="RowDefinition0" Height="Auto"/>
                                            <RowDefinition x:Name="RowDefinition1" Height="*"/>
                                        </Grid.RowDefinitions>
                                        <GroupBox Header="TabPanel"
                                              Foreground="Pink"
                                              BorderBrush="Pink"
                                              Grid.Row="0">
                                            <TabPanel IsItemsHost="True" />                                     
                                        </GroupBox>
                                        <Button Grid.Column="1" Grid.Row="0">12345</Button>
                                    </Grid>
                                    </GroupBox>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Window.Resources>
        <Grid>
            <TabControl>
                <TabItem>
                    <TabItem.Header>
                        <Label Foreground="Black">Tab 0</Label>
                    </TabItem.Header>
                    <Grid Background="Gray" />
                </TabItem>
                <TabItem>
                    <TabItem.Header>
                        <Label Foreground="Black">Tab 1</Label>
                    </TabItem.Header>
                    <Grid Background="Green" />
                </TabItem>
                <TabItem>
                    <TabItem.Header>
                        <Label Foreground="Black">Tab 2</Label>
                    </TabItem.Header>
                    <Grid Background="Red" />
                </TabItem>
                <TabItem>
                    <TabItem.Header>
                        <Label Foreground="Black">Tab 3</Label>
                    </TabItem.Header>
                    <Grid Background="Yellow" />
                </TabItem>
            </TabControl>
        </Grid>
        
    </Window>
    

    The result:

    I think you can also try use a style and put your control template in it, after that modify some values of your controls to show them. If you want us to know the problem of your error, you'd better share us more code from your sample. Or we don't know which line caused your error.

    By the way, the writer of stackoverflow thread http://stackoverflow.com/questions/1423533/on-the-wpf-tabcontrol-can-i-add-content-next-to-the-tab-headers has a blog and already shared his sample, I haven't tested it, what about you? Have you tried that yet?

    Best regards,



    Barry
    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by Barry Wang Wednesday, January 28, 2015 2:26 AM
    Tuesday, January 27, 2015 7:50 AM
  • <TabControl  HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             VerticalContentAlignment="Stretch"
                             HorizontalContentAlignment="Stretch"
                             ScrollViewer.HorizontalScrollBarVisibility="Auto"
                             ScrollViewer.VerticalScrollBarVisibility="Auto">
                    <TabControl.Style>
                        <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.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
     
                                            <DockPanel Grid.Row="0"
                                                       LastChildFill="true">
                                                <StackPanel DockPanel.Dock="RIGHT"
                                                            Orientation="Horizontal">
                                                    <Button Content="Button 1" />
                                                    <Button Content="Button 2" />
                                                    <Button Content="Button 3" />
                                                </StackPanel>
     
                                                <TabPanel DockPanel.Dock="LEFT"
                                                          Margin="4,0,0,0"
                                                          IsItemsHost="True"
                                                          KeyboardNavigation.TabIndex="1"
                                                          Background="Transparent" />
                                            </DockPanel>
     
                                            <Border Grid.Row="1"
                                                    Name="Border"
                                                    Background="Gray"
                                                    BorderBrush="Gray"
                                                    KeyboardNavigation.TabNavigation="Local"
                                                    KeyboardNavigation.DirectionalNavigation="Contained"
                                                    KeyboardNavigation.TabIndex="2">
                                                <ContentPresenter Name="PART_SelectedContentHost"
                                                                  ContentSource="SelectedContent" />
                                            </Border>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </TabControl.Style>
                    <TabItem Header="Library">
                        
                    </TabItem>
                    <TabItem Header="Reader">
                        
                    </TabItem>
                </TabControl>
    Tuesday, January 27, 2015 12:16 PM
  • Thanks for your help, guys. Setting the width of the second column to "Auto" did the trick. Well, that and realizing that I need to set the HorizontalAlignment of the textbox. (Don't you just hate it when you are so convinced you have something tricky wrong that you overlook the mistake in the simple thing?)

    Thanks again.


    Rebecca M. Riordan

    • Marked as answer by Barry Wang Wednesday, January 28, 2015 2:26 AM
    Tuesday, January 27, 2015 8:27 PM
  • @Rebecca M. Riordan,

    Yep I think all of us will meet this. We always overlook our mistakes because we have no idea why it just happened. Anyway, I will feel happy if I find the reason of this mistake at last, for me, it is a good experience.

    Best regards,



    Barry
    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Wednesday, January 28, 2015 2:26 AM