wpf更改tabitem形状和tabpanel空间

Question

我需要你的帮助来创建一个像这样的tabcontrol:

从顶部到选定选项卡的tabpanel中有一个空格,tabitem和field之间也有一个空格,最后更改选项卡项的形状.

我从谷歌获得的一些网站上学到了但没有人能找到我的帮助.

这是我获得 TabControl/TabPanel/TabItem的WPF样式之一

Answer 1

一个非常基本的风格,以帮助您入门.

这只是一个指南,而不是您的解决方案:

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

最终看起来像这样: