locked
TabControl right-align RRS feed

  • Question

  • Hello,

    How do I right-align the tabs in the TabControl? That is, I would like to use TabStripPlacement="Top" but I want the tabs to be on the top-right, not the top-left.

    Thanks

    Monday, April 12, 2010 12:20 PM

Answers

  • One way is to edit the template. In Blend, right click tab control, edit template, edit a copy.. then click on Grid, TemplateTop, TabPanelTop, to select the top tab panel.. then under horizontal alignment in layout group, click on right align.

     

     

    <Application
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"     xmlns:System_Windows_Controls_Primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls"
        x:Class="testRelativeAnimation.App">
        <Application.Resources>
            <ResourceDictionary>                     
                <Style x:Key="TabControlStyle1" TargetType="controls: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="controls:TabControl">
                                <Grid>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualStateGroup.Transitions>
                                                <VisualTransition GeneratedDuration="0"/>
                                            </VisualStateGroup.Transitions>
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualTop" Storyboard.TargetProperty="Opacity">
                                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualBottom" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualLeft" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualRight" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Grid x:Name="TemplateTop" Visibility="Collapsed">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <System_Windows_Controls_Primitives:TabPanel x:Name="TabPanelTop" Margin="2,2,2,-1" Canvas.ZIndex="1" HorizontalAlignment="Right"/>
                                        <Border MinHeight="10" MinWidth="10" Grid.Row="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0,0,3,3">
                                            <ContentPresenter x:Name="ContentTop" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                        </Border>
                                        <Border x:Name="DisabledVisualTop" IsHitTestVisible="False" Opacity="0" Grid.Row="1" Grid.RowSpan="2" Canvas.ZIndex="1" Background="#8CFFFFFF" CornerRadius="0,0,3,3"/>
                                    </Grid>
                                    <Grid x:Name="TemplateBottom" Visibility="Collapsed">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*"/>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <System_Windows_Controls_Primitives:TabPanel x:Name="TabPanelBottom" Margin="2,-1,2,2" Grid.Row="1" Canvas.ZIndex="1"/>
                                        <Border MinHeight="10" MinWidth="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3,3,0,0">
                                            <ContentPresenter x:Name="ContentBottom" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                        </Border>
                                        <Border x:Name="DisabledVisualBottom" IsHitTestVisible="False" Opacity="0" Canvas.ZIndex="1" Background="#8CFFFFFF" CornerRadius="3,3,0,0"/>
                                    </Grid>
                                    <Grid x:Name="TemplateLeft" Visibility="Collapsed">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>
                                        <System_Windows_Controls_Primitives:TabPanel x:Name="TabPanelLeft" Margin="2,2,-1,2" Canvas.ZIndex="1"/>
                                        <Border MinHeight="10" MinWidth="10" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0,3,3,0">
                                            <ContentPresenter x:Name="ContentLeft" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                        </Border>
                                        <Border x:Name="DisabledVisualLeft" IsHitTestVisible="False" Opacity="0" Grid.Column="1" Canvas.ZIndex="1" Background="#8CFFFFFF" CornerRadius="0,3,3,0"/>
                                    </Grid>
                                    <Grid x:Name="TemplateRight" Visibility="Collapsed">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <System_Windows_Controls_Primitives:TabPanel x:Name="TabPanelRight" Margin="-1,2,2,2" Grid.Column="1" Canvas.ZIndex="1"/>
                                        <Border MinHeight="10" MinWidth="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3,0,0,3">
                                            <ContentPresenter x:Name="ContentRight" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                        </Border>
                                        <Border x:Name="DisabledVisualRight" Margin="0" IsHitTestVisible="False" Opacity="0" Canvas.ZIndex="1" Background="#8CFFFFFF" CornerRadius="3,0,0,3"/>
                                    </Grid>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ResourceDictionary>

        </Application.Resources>
    </Application>
     

    Monday, April 12, 2010 12:57 PM

All replies

  •  Try this:

    TabControl objTab = new TabControl();
    objTab.TabStripPlacement = Dock.Right;

    Monday, April 12, 2010 12:32 PM
  • One way is to edit the template. In Blend, right click tab control, edit template, edit a copy.. then click on Grid, TemplateTop, TabPanelTop, to select the top tab panel.. then under horizontal alignment in layout group, click on right align.

     

     

    <Application
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"     xmlns:System_Windows_Controls_Primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls"
        x:Class="testRelativeAnimation.App">
        <Application.Resources>
            <ResourceDictionary>                     
                <Style x:Key="TabControlStyle1" TargetType="controls: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="controls:TabControl">
                                <Grid>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualStateGroup.Transitions>
                                                <VisualTransition GeneratedDuration="0"/>
                                            </VisualStateGroup.Transitions>
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualTop" Storyboard.TargetProperty="Opacity">
                                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualBottom" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualLeft" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualRight" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                                    </DoubleAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Grid x:Name="TemplateTop" Visibility="Collapsed">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <System_Windows_Controls_Primitives:TabPanel x:Name="TabPanelTop" Margin="2,2,2,-1" Canvas.ZIndex="1" HorizontalAlignment="Right"/>
                                        <Border MinHeight="10" MinWidth="10" Grid.Row="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0,0,3,3">
                                            <ContentPresenter x:Name="ContentTop" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                        </Border>
                                        <Border x:Name="DisabledVisualTop" IsHitTestVisible="False" Opacity="0" Grid.Row="1" Grid.RowSpan="2" Canvas.ZIndex="1" Background="#8CFFFFFF" CornerRadius="0,0,3,3"/>
                                    </Grid>
                                    <Grid x:Name="TemplateBottom" Visibility="Collapsed">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*"/>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <System_Windows_Controls_Primitives:TabPanel x:Name="TabPanelBottom" Margin="2,-1,2,2" Grid.Row="1" Canvas.ZIndex="1"/>
                                        <Border MinHeight="10" MinWidth="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3,3,0,0">
                                            <ContentPresenter x:Name="ContentBottom" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                        </Border>
                                        <Border x:Name="DisabledVisualBottom" IsHitTestVisible="False" Opacity="0" Canvas.ZIndex="1" Background="#8CFFFFFF" CornerRadius="3,3,0,0"/>
                                    </Grid>
                                    <Grid x:Name="TemplateLeft" Visibility="Collapsed">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>
                                        <System_Windows_Controls_Primitives:TabPanel x:Name="TabPanelLeft" Margin="2,2,-1,2" Canvas.ZIndex="1"/>
                                        <Border MinHeight="10" MinWidth="10" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0,3,3,0">
                                            <ContentPresenter x:Name="ContentLeft" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                        </Border>
                                        <Border x:Name="DisabledVisualLeft" IsHitTestVisible="False" Opacity="0" Grid.Column="1" Canvas.ZIndex="1" Background="#8CFFFFFF" CornerRadius="0,3,3,0"/>
                                    </Grid>
                                    <Grid x:Name="TemplateRight" Visibility="Collapsed">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <System_Windows_Controls_Primitives:TabPanel x:Name="TabPanelRight" Margin="-1,2,2,2" Grid.Column="1" Canvas.ZIndex="1"/>
                                        <Border MinHeight="10" MinWidth="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3,0,0,3">
                                            <ContentPresenter x:Name="ContentRight" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                        </Border>
                                        <Border x:Name="DisabledVisualRight" Margin="0" IsHitTestVisible="False" Opacity="0" Canvas.ZIndex="1" Background="#8CFFFFFF" CornerRadius="3,0,0,3"/>
                                    </Grid>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ResourceDictionary>

        </Application.Resources>
    </Application>
     

    Monday, April 12, 2010 12:57 PM
  • Thanks devdmans, that helped. I needed the tabs to stay at the top, but also be right aligned.
    Thursday, April 15, 2010 4:29 PM
  • I attempted this solution, but when I select the TabControl, Blend grays out the 'Edit Templat/Edit a Copy' menu.  Any suggestions on how to get around this?  

    Thanks,
    Rick Arthur

    Friday, June 11, 2010 2:46 AM
  • That shouldnt happen. In Blend If you right click on the tab control in the objects and time-line and try to edit the template the option is grayed out?

    Tuesday, June 15, 2010 10:12 AM