ansaurus

Question

How to change appearance of TabItems in a scrolling WPF TabControl?

Answer 1

+1 A:

Hey guesser. I've done something similar, I based mine off of this series though

http://www.blogs.intuidev.com/post/2010/post/2010/01/25/TabControlStyling_PartOne.aspx

The method used is to simply style the tabitems template. eg:

<TabControl.Resources>
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                <!-- your custom template goes here -->

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TabControl.Resources>

Unforunately this method means you will have to completely redefine the way the tab items look and behave. But the provided link gives good examples on how achieve this.

Hope it helps.

Val 2010-09-07 01:24:49

I haven't yet gotten the TabItems bound the the Header (using Text="{Binding Header}" -- it's not working for whatever reason), but it is having a visible effect on the styling of the TabItems, so this might be a promising angle. Any idea why the Binding to Header would fail?

guesser 2010-09-07 01:33:15

I now understand what you mean when you say that I'll have to redefine the way the tabitems look (ie. when I put just a TextBlock in there, I only get a TextBlock and no containing box). I'm hoping to avoid having to write that and behavior changes if at all possible.

guesser 2010-09-07 01:45:12

Not sure why the binding would fail, but try adding the binding to a setter above the template setter. "<Setter Property="Header" Value="{Binding ...}"/> And see if that works. There may be a better way, but at least now you have a fallback ;)

Val 2010-09-07 02:33:46

Answer 2

+1 A:

Just a thought,

have you tried just adding the text block to the TabItem.Header? If you do this instead of a template it might work. Has for me in the past

TerrorAustralis 2010-09-07 03:09:36

This is an idea, and I played with this a bit before. I couldn't find a way to do it without always explicitly setting the TextBox and TextBlock Text at the appropriate time.. but I'd be very interested if there's a way to use this idea without having to do so. (e.g. some way to do it in the xaml, with a binding to a value)

guesser 2010-09-07 03:20:55

Do you have some object sitting behind the tabs that you could bind to? for instance, a list of string or something? cos if you try to bind to the header when you are using the header property it will stuff up. As an aside, there is a way to use binding between sibing elements. Just name the element (for instance, `Name = "MyControl"` then you can bind to it using `Binding ElementName=MyControl, Path=PropertyToBindTo`. Failing that you can use `Binding RelativeSource={RelativeSource, Mode=FindAncestor, AncestorType=TypeOfParentYouWantToBindTo}`

TerrorAustralis 2010-09-07 03:29:34

Thanks. That info about binding between siblings might come in handy for dealing with the visibility. At the moment, I have an invisible ToggleButton in the TabItem's ContentPresenter (a modification upon my solution to this question) and I'm binding visibility to its IsChecked property using your tip. I'm not sure if I'm going to be able to access it from my code, but it's worth a shot.

guesser 2010-09-07 05:17:54

Depends how you want the text box to become editable. You could just use DataTriggers so when you select the tab the header becomes editable, just use a datatrigger bound to the IsSelected property (or whatever it is in tab templates). If you want tho, im willing to correspond with you on the subject, cos if you are adding that much logic into your UI, a viewmodel would probably be the way to go here :)

TerrorAustralis 2010-09-07 05:46:35

I've removed the invisible ToggleButton, and have now set up my TabControl's ItemsSource to be bound to a list of objects. The objects contain an extra value reflecting whether or not editing is occurring, and I'm now binding visibility to that. I'm completely unfamiliar with viewmodels. Corresponding may be a good idea :)

guesser 2010-09-07 06:30:42

kk, if you want you can reach me at [email protected] I have a few samples of ViewModel usage which would suit your situation perfectly

TerrorAustralis 2010-09-07 08:06:29

Answer 3

A:

I think I've got it (though still crossing fingers a bit -- I haven't yet dealt with Visibility of the TextBlock vs TextBox for renaming).

It is similar to Val's solution in that I'm working in TabControl.Resources on its TabItem, but the Property concerned is HeaderTemplate and I just override the ContentPresenter in a DataTemplate. (measures to avoid replacing\destroying a lot of good behavior that comes for free with the TabControl)

<TabControl.Resources>
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <ContentPresenter>
                        <ContentPresenter.Content>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{TemplateBinding Content}"/>
                                <TextBox Text="{TemplateBinding Content}"/>
                            </StackPanel>
                        </ContentPresenter.Content>
                    </ContentPresenter>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TabControl.Resources>

I'm somewhat of a WPF newb, so this is basically a result of persistent experimentation with what I could find Googling. For those interested, this link (on StackOverflow) helped me most in the end - WPF TabItem Header Styling

guesser 2010-09-07 03:46:44

ansaurus

tags:

views:

answers:

How to change appearance of TabItems in a scrolling WPF TabControl?

related questions