TabStrip placement and verticaltext

There are couple of ways to display Vertical text in TabItem

Here are 2 ways

1. Get the code for the VerticalTextblock from here and use it like this. I could not get the Binding to work but hard coding Text works

 <my:TabControl TabStripPlacement=”Left”>
             <my:TabItem Header=”Tab1″>
                <TextBlock Text=”Some Text in Tab1″ />
                 <my:TabItem.HeaderTemplate>
                    <DataTemplate>
                       <local:VerticalTextBlock Text=”Tab1″ />
                    </DataTemplate>
                </my:TabItem.HeaderTemplate>
            </my:TabItem>
            <my:TabItem Header=”tab2″>
                <TextBlock Text=”Some Text in Tab2″ />
                 <my:TabItem.HeaderTemplate>
                    <DataTemplate>
                      <local:VerticalTextBlock Text=”Tab2″ />
                    </DataTemplate>
                </my:TabItem.HeaderTemplate>
            </my:TabItem>
        </my:TabControl>

2. Use ItemsControl and set the ItemsSource to the Text we want to display

<my:TabControl TabStripPlacement=”Left”>
            <my:TabItem Header=”Tab1″>
                <TextBlock Text=”Some Text in Tab1″ />
                <my:TabItem.HeaderTemplate>
                    <DataTemplate>
                        <ItemsControl HorizontalAlignment=”Center”
                                      HorizontalContentAlignment=”Center”
                                      ItemsSource=”Tab1″></ItemsControl>
                    </DataTemplate>
                </my:TabItem.HeaderTemplate>
            </my:TabItem>
  </my:TabControl>

update:Added screenshot

Advertisements

2 thoughts on “TabStrip placement and verticaltext

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s