TabControl and vertical Text

This is short post on using LayoutTransformer. LayoutTransformer makes it easy to display content vertically. After adding reference to the toolkit layout assembly . All we have to do is to add our content to the LayoutTransformer and specify our Transform. Here is  xaml which produced the result in the image

<UserControl xmlns:controls=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls” 
    x:Class=”SilverlightApplication18.MainPage”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
    xmlns:toolkit=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit”            
    Width=”400″ Height=”300″>
    <Grid x:Name=”LayoutRoot” Background=”White”>
        <controls:TabControl Margin=”10″ TabStripPlacement=”Left”>
            <controls:TabItem  >
                <controls:TabItem.Header>
                    <toolkit:LayoutTransformer >
                        <TextBlock Text=”Tab1″/>
                        <toolkit:LayoutTransformer.LayoutTransform>
                            <RotateTransform Angle=”-90″></RotateTransform>
                        </toolkit:LayoutTransformer.LayoutTransform>
                    </toolkit:LayoutTransformer>
                </controls:TabItem.Header>
                <TextBlock  Margin=”10″ Text=”some content in Tab1″/>               
            </controls:TabItem>
            <controls:TabItem   >
                <controls:TabItem.Header>
                    <toolkit:LayoutTransformer >
                        <TextBlock Text=”Tab2″/>
                        <toolkit:LayoutTransformer.LayoutTransform>
                            <RotateTransform Angle=”-90″></RotateTransform>
                        </toolkit:LayoutTransformer.LayoutTransform>
                    </toolkit:LayoutTransformer>
                </controls:TabItem.Header>
                <TextBlock Margin=”10″ Text=”some content in Tab2″/>               
            </controls:TabItem>
        </controls:TabControl>
    </Grid>
</UserControl>

verticaltab

Advertisements

3 thoughts on “TabControl and vertical Text

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