wpf更改tabitem形状和tabpanel空间

时间:2011-06-30 07:14:15

标签: wpf xaml

我需要你的帮助才能创建像这样的tabcontrol: There

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

我从谷歌获得的一些网站上学到了但没有人发现我真的帮助过我。

这是我得到的一个 WPF Styles for TabControl / TabPanel / TabItem

1 个答案:

答案 0 :(得分:6)

非常基本风格,可帮助您入门。

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

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

最终看起来像这样: enter image description here