How can I move TabItem of TabControl? - wpf

Question

<Border Background="#FF260F54">
<TabControl Name="MyTabCtrl" SelectionChanged="MyTabCtrl_SelectionChanged" >
<TabItem Name="TItem01" Header="01">
<TextBlock>TItem01</TextBlock>
</TabItem>
<TabItem Name="TItem02" Header="02">
<TextBlock>TItem02</TextBlock>
</TabItem>
</TabControl>
</Border>
I want to make TItem01 move to the left 200 pixels, then show TItem02.
What should I do? Please help me. Thank you very much!

Answer 1

Don't know if this is the simplest way, but I would modify the default TabControl Style:
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />
<Style TargetType="{x:Type TabControl}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabPanel
Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="200,0,4,-1"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent" />
<Border
Name="Border"
Grid.Row="1"
Background="{StaticResource WindowBackgroundBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1"
CornerRadius="2"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2" >
<ContentPresenter
Name="PART_SelectedContentHost"
Margin="4"
ContentSource="SelectedContent" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Notice the Margin property of the TabPanel element in the ContolTemplate? That margin determines where the tabs start. By default it's 0,0,4,-1 and I modified it to 200,0,4,-1 to match your requirement.
If you are wondering how I produced the style, there are a couple of ways. The easiest would be using Expression Blend. It has an option to "break" your control and expose all it's default parts and styles. Another way is just search MSDN for ControlTemplates because they are public. (I used the second method)