CODEWITHSUNDEEP
wpfxamltabcontrol
baozi
baozi

Reputation: 709

Need some suggestions how to set custom tabcontrol

How could I make the tabitem(header) border in alignment with the content part. Below I put the item header in grid. I've attached a picture. There's some tiny space at left. The same thing to the top part. I want it to be filled.

<Grid>
    <TabControl Margin="10" BorderThickness="2" Background="LightGray" Padding="0">            
        <TabControl.Resources>
            <Style TargetType="TabItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Grid Name="Panel">
                                <ContentPresenter x:Name="ContentSite" 
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    ContentSource="Header"
                                    Margin="30,3"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="Panel" Property="Background" Value="LightSkyBlue" />
                                </Trigger>
                                <Trigger Property="IsSelected" Value="False">
                                    <Setter TargetName="Panel" Property="Background" Value="White" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>

        <TabItem Header="General">
            <Label Content="Content goes here..." />
        </TabItem>
        <TabItem Header="Security" />
        <TabItem Header="Details" />
    </TabControl>
</Grid>

enter image description here

Upvotes: 0

Views: 36

Answers (2)

Rohit Vats
Rohit Vats

Reputation: 81313

Default template of TabItem have margin of -1 but in your case you have border thickness of 2 set. So margin of -2 should work for you.

Set margin on Grid:

<ControlTemplate TargetType="TabItem">
    <Grid Name="Panel" Margin="-2,-2,-2,0">
        <ContentPresenter x:Name="ContentSite" 
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        ContentSource="Header"
                        Margin="30,3"/>
    </Grid>
    .....

Upvotes: 1

Jon
Jon

Reputation: 3255

Set the margin for the TabItem instead of Tab

<TabItem Header="General", Margin="0,0,0,0"/>

Set the margin for the TabItem to 0, this will override the default margin and work as per your requirements

Upvotes: 0

Related Questions