How to style Tabitem of Tabcontrol using Silverlight2?

05-13-2009 8:45 AM |

Can anyone help me in creating Tabitem of Tabcontrol with inclined side on the right end i,e  slanting from top to bottom on the right side.

 Thanks,

Tanusree

Re: How to style Tabitem of Tabcontrol using Silverlight2?

05-13-2009 9:04 AM |

Use TabStripPlacement="Right" for TabControl

Please mark it as answered, if this meets your requirement
Thanks,
Raju

Re: How to style Tabitem of Tabcontrol using Silverlight2?

05-14-2009 1:33 AM |

<Style TargetType="local:TabControl">
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                <GradientStop Color="#FFFEFEFE" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFA3AEB9" Offset="0" />
                <GradientStop Color="#FF8399A9" Offset="0.375" />
                <GradientStop Color="#FF718597" Offset="0.375" />
                <GradientStop Color="#FF617584" Offset="1" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Padding" Value="5"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:TabControl">
                <Grid>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualStateGroup.Transitions>
                                <vsm:VisualTransition GeneratedDuration="0" />
                            </vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="Normal" />
                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>

                    <!-- TabStripPlacement Top -->
                    <Grid x:Name="TemplateTop" Visibility="Collapsed">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>

                        <primitives:TabPanel x:Name="TabPanelTop" Canvas.ZIndex="1" Margin="2,2,2,-1" />

                        <Border
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            Grid.Row="1"
                            MinHeight="10" MinWidth="10"
                            CornerRadius="0,0,3,3">

                            <ContentPresenter x:Name="ContentTop"
                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                Margin="{TemplateBinding Padding}"
                                Cursor="{TemplateBinding Cursor}" />
                        </Border>
                    </Grid>

                    <!-- TabStripPlacement Bottom -->
                    <Grid x:Name="TemplateBottom" Visibility="Collapsed">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <primitives:TabPanel x:Name="TabPanelBottom" Canvas.ZIndex="1" Grid.Row="1" Margin="2,-1,2,2" />

                        <Border
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            MinHeight="10" MinWidth="10"
                            CornerRadius="3,3,0,0">

                            <ContentPresenter x:Name="ContentBottom"
                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                Margin="{TemplateBinding Padding}"
                                Cursor="{TemplateBinding Cursor}" />
                        </Border>
                    </Grid>

                    <!-- TabStripPlacement Left -->
                    <Grid x:Name="TemplateLeft" Visibility="Collapsed">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <primitives:TabPanel x:Name="TabPanelLeft" Canvas.ZIndex="1" Margin="2,2,-1,2" />

                        <Border
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            Grid.Column="1"
                            MinHeight="10" MinWidth="10"
                            CornerRadius="0,3,3,0">

                            <ContentPresenter x:Name="ContentLeft"
                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                Margin="{TemplateBinding Padding}"
                                Cursor="{TemplateBinding Cursor}" />
                        </Border>
                    </Grid>

                    <!-- TabStripPlacement Right -->
                    <Grid x:Name="TemplateRight" Visibility="Collapsed">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <primitives:TabPanel x:Name="TabPanelRight" Grid.Column="1" Canvas.ZIndex="1" Margin="-1,2,2,2" />

                        <Border
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            MinHeight="10" MinWidth="10"
                            CornerRadius="3,0,0,3">

                            <ContentPresenter x:Name="ContentRight"
                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                Margin="{TemplateBinding Padding}"
                                Cursor="{TemplateBinding Cursor}" />
                        </Border>
                    </Grid>

                    <!-- Disabled Visual -->
                    <Rectangle x:Name="DisabledVisual" Canvas.ZIndex="1" IsHitTestVisible="False" Fill="#A5FFFFFF" Opacity="0" />

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 Copy Code
<Style TargetType="local:TabItem">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Background" Value="#FF1F3B53"/>
    <Setter Property="BorderBrush" Value="#FFA3AEB9"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Padding" Value="6,2,6,2"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="MinWidth" Value="5"/>
    <Setter Property="MinHeight" Value="5"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:TabItem">
                <Grid x:Name="Root">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualStateGroup.Transitions>
                                <vsm:VisualTransition GeneratedDuration="0" />
                                <vsm:VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1" />
                            </vsm:VisualStateGroup.Transitions>
                            <vsm:VisualState x:Name="Normal" />
                            <vsm:VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <!-- For some reason, it animates all Borders with just this line.
                                        If I add code for each then it crashes SL. -->
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="BorderTop" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#FF448DCA"/>
                                    </ColorAnimationUsingKeyFrames>

                                    <!--GradientTop-->
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientTop" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
                                    </ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientTop" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
                                    </ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientTop" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
                                    </ColorAnimationUsingKeyFrames>

                                    <!--GradientBottom-->
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientBottom" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
                                    </ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientBottom" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
                                    </ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientBottom" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
                                    </ColorAnimationUsingKeyFrames>

                                    <!--GradientLeft-->
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientLeft" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
                                    </ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientLeft" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
                                    </ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientLeft" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
                                    </ColorAnimationUsingKeyFrames>

                                    <!--GradientRight-->
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientRight" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
                                    </ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientRight" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
                                    </ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="GradientRight" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                        <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
                                    </ColorAnimationUsingKeyFrames>

                                    <!--FocusVisual-->
                                    <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="FocusVisualTop" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="FocusVisualBottom" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="FocusVisualLeft" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="FocusVisualRight" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>

                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="SelectionStates">
                            <vsm:VisualState x:Name="Unselected"/>
                            <vsm:VisualState x:Name="Selected" />
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="FocusStates">
                            <vsm:VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualTop" Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualBottom" Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualLeft" Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualRight" Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Unfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>

                    <!-- TabStripPlacement Top | Selected -->
                    <Grid x:Name="TemplateTopSelected" Visibility="Collapsed" Canvas.ZIndex="1">
                        <Border
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="1,1,1,0"
                            Background="{TemplateBinding Background}"
                            Margin="-2,-2,-2,0"
                            CornerRadius="3,3,0,0">
                            <Border BorderThickness="1" BorderBrush="#FFFFFFFF" CornerRadius="1,1,0,0">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                        <GradientStop Color="#FFFFFFFF" Offset="0" />
                                        <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                        <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                                        <GradientStop Color="#C6FFFFFF" Offset="1" />
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Grid>
                                    <Rectangle Fill="#FFFFFFFF" Margin="0,0,0,-2" />
                                    <ContentControl x:Name="HeaderTopSelected"
                                        IsTabStop="False"
                                        Foreground="{TemplateBinding Foreground}"
                                        FontSize="{TemplateBinding FontSize}"
                                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                        Margin="{TemplateBinding Padding}"
                                        Cursor="{TemplateBinding Cursor}" />
                                </Grid>
                            </Border>
                        </Border>

                        <!--Focus Visual-->
                        <Border x:Name="FocusVisualTop"
                                CornerRadius="3,3,0,0"
                                BorderBrush="#FF45D6FA"
                                BorderThickness="1,1,1,0"
                                Margin="-2,-2,-2,0"
                                Visibility="Collapsed"
                                IsHitTestVisible="false" />
                    </Grid>

                    <!-- TabStripPlacement Top | Unselected -->
                    <Grid x:Name="TemplateTopUnselected" Visibility="Collapsed">
                        <Border x:Name="BorderTop"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="1"
                            Background="{TemplateBinding Background}"
                            CornerRadius="3,3,0,0">
                            <Border x:Name="GradientTop" BorderThickness="1" BorderBrush="#FFFFFFFF" CornerRadius="1,1,0,0">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                        <GradientStop Color="#FFFFFFFF" Offset="0" />
                                        <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                        <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                                        <GradientStop Color="#C6FFFFFF" Offset="1" />
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Grid>
                                    <ContentControl x:Name="HeaderTopUnselected"
                                        IsTabStop="False"
                                        Foreground="{TemplateBinding Foreground}"
                                        FontSize="{TemplateBinding FontSize}"
                                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                        Margin="{TemplateBinding Padding}"
                                        Cursor="{TemplateBinding Cursor}" />
                                </Grid>
                            </Border>
                        </Border>
                    </Grid>

                    <!-- TabStripPlacement Bottom | Selected -->
                    <Grid x:Name="TemplateBottomSelected" Visibility="Collapsed" Canvas.ZIndex="1">
                        <Border
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="1,0,1,1"
                            Background="{TemplateBinding Background}"
                            Margin="-2,0,-2,-2"
                            CornerRadius="0,0,3,3">
                            <Border BorderThickness="1" BorderBrush="#FFFFFFFF" CornerRadius="0,0,1,1">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                        <GradientStop Color="#FFFFFFFF" Offset="0" />
                                        <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                        <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                                        <GradientStop Color="#C6FFFFFF" Offset="1" />
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Grid>
                                    <Rectangle Fill="#FFFFFFFF" Margin="0,-2,0,0" />
                                    <ContentControl x:Name="HeaderBottomSelected"
                                        IsTabStop="False"
                                        Foreground="{TemplateBinding Foreground}"
                                        FontSize="{TemplateBinding FontSize}"
                                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                        Margin="{TemplateBinding Padding}"
                                        Cursor="{TemplateBinding Cursor}" />
                                </Grid>
                            </Border>
                        </Border>

                        <!--Focus Visual-->
                        <Border x:Name="FocusVisualBottom"
                                CornerRadius="0,0,3,3"
                                BorderBrush="#FF45D6FA"
                                BorderThickness="1,0,1,1"
                                Margin="-2,0,-2,-2"
                                Visibility="Collapsed"
                                IsHitTestVisible="false" />
                    </Grid>

                    <!-- TabStripPlacement Bottom + Unselected -->
                    <Grid x:Name="TemplateBottomUnselected" Visibility="Collapsed">
                        <Border x:Name="BorderBottom"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="1"
                            Background="{TemplateBinding Background}"
                            CornerRadius="0,0,3,3">
                            <Border x:Name="GradientBottom" BorderThickness="1" BorderBrush="#FFFFFFFF" CornerRadius="0,0,1,1">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                        <GradientStop Color="#FFFFFFFF" Offset="0" />
                                        <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                        <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                                        <GradientStop Color="#C6FFFFFF" Offset="1" />
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Grid>
                                    <ContentControl x:Name="HeaderBottomUnselected"
                                        IsTabStop="False"
                                        Foreground="{TemplateBinding Foreground}"
                                        FontSize="{TemplateBinding FontSize}"
                                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                        Margin="{TemplateBinding Padding}"
                                        Cursor="{TemplateBinding Cursor}" />
                                </Grid>
                            </Border>
                        </Border>
                    </Grid>

                    <!-- TabStripPlacement Left | Selected -->
                    <Grid x:Name="TemplateLeftSelected" Visibility="Collapsed" Canvas.ZIndex="1">
                        <Border
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="1,1,0,1"
                            Background="{TemplateBinding Background}"
                            Margin="-2,-2,0,-2"
                            CornerRadius="3,0,0,3">
                            <Border BorderThickness="1" BorderBrush="#FFFFFFFF" CornerRadius="1,0,0,1">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                        <GradientStop Color="#FFFFFFFF" Offset="0" />
                                        <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                        <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                                        <GradientStop Color="#C6FFFFFF" Offset="1" />
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Grid>
                                    <Rectangle Fill="#FFFFFFFF" Margin="0,0,-2,0" />
                                    <ContentControl x:Name="HeaderLeftSelected"
                                        IsTabStop="False"
                                        Foreground="{TemplateBinding Foreground}"
                                        FontSize="{TemplateBinding FontSize}"
                                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                        Margin="{TemplateBinding Padding}"
                                        Cursor="{TemplateBinding Cursor}" />
                                </Grid>
                            </Border>
                        </Border>

                        <!--Focus Visual-->
                        <Border x:Name="FocusVisualLeft"
                                CornerRadius="3,0,0,3"
                                BorderBrush="#FF45D6FA"
                                BorderThickness="1,1,0,1"
                                Margin="-2,-2,0,-2"
                                Visibility="Collapsed"
                                IsHitTestVisible="false" />
                    </Grid>

                    <!-- TabStripPlacement Left | Unselected -->
                    <Grid x:Name="TemplateLeftUnselected" Visibility="Collapsed">
                        <Border x:Name="BorderLeft"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            CornerRadius="3,0,0,3">
                            <Border x:Name="GradientLeft" BorderThickness="1" BorderBrush="#FFFFFFFF" CornerRadius="1,0,0,1">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                        <GradientStop Color="#FFFFFFFF" Offset="0" />
                                        <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                        <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                                        <GradientStop Color="#C6FFFFFF" Offset="1" />
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Grid>
                                    <ContentControl x:Name="HeaderLeftUnselected"
                                        IsTabStop="False"
                                        Foreground="{TemplateBinding Foreground}"
                                        FontSize="{TemplateBinding FontSize}"
                                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                        Margin="{TemplateBinding Padding}"
                                        Cursor="{TemplateBinding Cursor}" />
                                </Grid>
                            </Border>
                        </Border>
                    </Grid>

                    <!-- TabStripPlacement Right | Selected -->
                    <Grid x:Name="TemplateRightSelected" Visibility="Collapsed" Canvas.ZIndex="1">
                        <Border
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="0,1,1,1"
                            Background="{TemplateBinding Background}"
                            Margin="0,-2,-2,-2"
                            CornerRadius="0,3,3,0">
                            <Border BorderThickness="1" BorderBrush="#FFFFFFFF" CornerRadius="0,1,1,0">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                        <GradientStop Color="#FFFFFFFF" Offset="0" />
                                        <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                        <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                                        <GradientStop Color="#C6FFFFFF" Offset="1" />
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Grid>
                                    <Rectangle Fill="#FFFFFFFF" Margin="-2,0,0,0" />
                                    <ContentControl x:Name="HeaderRightSelected"
                                        IsTabStop="False"
                                        Foreground="{TemplateBinding Foreground}"
                                        FontSize="{TemplateBinding FontSize}"
                                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                        Margin="{TemplateBinding Padding}"
                                        Cursor="{TemplateBinding Cursor}" />
                                </Grid>
                            </Border>
                        </Border>

                        <!--Focus Visual-->
                        <Border x:Name="FocusVisualRight"
                                CornerRadius="0,3,3,0"
                                BorderBrush="#FF45D6FA"
                                BorderThickness="0,1,1,1"
                                Margin="0,-2,-2,-2"
                                Visibility="Collapsed"
                                IsHitTestVisible="false" />
                    </Grid>

                    <!-- TabStripPlacement Right + Unselected -->
                    <Grid x:Name="TemplateRightUnselected" Visibility="Collapsed">
                        <Border x:Name="BorderRight"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="1"
                            Background="{TemplateBinding Background}"
                            CornerRadius="0,3,3,0">
                            <Border x:Name="GradientRight" BorderThickness="1" BorderBrush="#FFFFFFFF" CornerRadius="0,1,1,0">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                        <GradientStop Color="#FFFFFFFF" Offset="0" />
                                        <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                                        <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                                        <GradientStop Color="#C6FFFFFF" Offset="1" />
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Grid>
                                    <ContentControl x:Name="HeaderRightUnselected"
                                        IsTabStop="False"
                                        Foreground="{TemplateBinding Foreground}"
                                        FontSize="{TemplateBinding FontSize}"
                                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                        Margin="{TemplateBinding Padding}"
                                        Cursor="{TemplateBinding Cursor}" />
                                </Grid>
                            </Border>
                        </Border>
                    </Grid>

                    <Border x:Name="FocusVisualElement" CornerRadius="3,3,0,0" BorderBrush="#FF45D6FA" BorderThickness="1" Margin="-1" Visibility="Collapsed" IsHitTestVisible="false" />

                    <Border x:Name="DisabledVisual" CornerRadius="3" Background="#A5FFFFFF" Opacity="0" IsHitTestVisible="false" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I heve used this code for styling of Tabitem of Tabcontrol.

Can you tell me where to use TabStripPlacement="Right"  in the above code.

Thanks,

Tanusree

Re: Re: How to style Tabitem of Tabcontrol using Silverlight2?

05-31-2009 2:16 AM |

Probably your best bet is to use Blend to edit the Template (Edit copy if you don't already have one).

You can then modify the tab elements that make up a tabitem. It's quite complex as the tab item has quite a number of parts to it but Blend makes it a lot easier to change.

Re: How to style Tabitem of Tabcontrol using Silverlight2?

06-05-2009 5:21 PM |

Hi Raju:

I wanted to make TabStripPlacement="Top" but also int the center of the page.

Agha