CODEWITHSUNDEEP
wpftabcontrol
Mymuma
Mymuma

Reputation: 29

How can I move TabItem of TabControl?

<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!

Upvotes: 0

Views: 996

Answers (1)

AlexDrenea
AlexDrenea

Reputation: 8039

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)

Upvotes: 1

Related Questions