CODEWITHSUNDEEP
wpfxaml
yozawiratama
yozawiratama

Reputation: 4328

wpf change tabitem shape and tabpanel space

i need your help to create a tabcontrol like this : There

There is a space in tabpanel from top to selected tab, and there a space too between tabitem and field and last change the shapes of tab item.

i had learn from some website i get from google but no one i find really help me.

this is one of i get WPF Styles for TabControl / TabPanel / TabItem

Upvotes: 2

Views: 2773

Answers (1)

fatty
fatty

Reputation: 2513

A very basic Style to help get you started.

This is just a guide, not your solution:

<Style TargetType="TabControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabControl">
                <Grid>
                    <Border SnapsToDevicePixels="True" BorderThickness="1" BorderBrush="Black" Margin="95,0,0,0" />
                    <StackPanel HorizontalAlignment="Left" IsItemsHost="True" Width="100" Margin="0,30,0,0" />
                    <ContentPresenter ContentSource="SelectedContent" Margin="100,5,5,5" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="TabItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TabItem">
                <Grid HorizontalAlignment="Left" Name="grid" Width="90" Margin="0,5,0,5">
                    <Border SnapsToDevicePixels="True" BorderThickness="1" BorderBrush="Black" Background="Transparent" />
                    <ContentPresenter HorizontalAlignment="Left" Content="{TemplateBinding Header}" Margin="2" />
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter TargetName="grid" Property="Width" Value="100" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Which will end up looking like this: enter image description here

Upvotes: 6

Related Questions