WPF TabControl 美化

最新推荐文章于 2025-06-20 12:35:54 发布

weixin_30614109

最新推荐文章于 2025-06-20 12:35:54 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： c#

原文链接：http://www.cnblogs.com/louvens/p/4169321.html

这篇博客介绍了如何美化WPF的TabControl，通过解决BlurEffect和DropShadowEffect的覆盖问题，以及OpacityMask在圆角处理上的困扰，展示了实现自定义TabItem样式的详细过程，包括设置Margin和使用OpacityMask来达成预期效果。文章还提到了在Xaml中指定ItemContainerStyle时需注意的基础样式继承。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WPF TabControl 美化

千遍一律的面孔，看着都没有新鲜感，就如男人对女人的感觉，美女看久了就开始怀疑自己不是有审美疲劳了。换掉自带的控件样式，换个角度去疲劳。

这里要换的是 TabControl 的默认外观。

先看效果图：

美化过程中遇到的问题：

1，BlurEffect 及 DropShadowEffect 会应用到下层所有的子元素上。

2，子元素的角在Border 的圆角位置无法隐藏。

3，OpacityMask 内的Border 表现出来的奇怪的圆角。

解决第一个问题，使用如下方法：

                    <Grid>
                        <!-- 效果部分-->
                        <Border Background="Transparent" BorderThickness="1" BorderBrush="Black" CornerRadius="10" Margin="-1">
                            <Border.Effect>
                                <BlurEffect />
                            </Border.Effect>
                        </Border>

                        <!-- 主体部分 -->
                        <Border BorderBrush="Black" BorderThickness="1" CornerRadius="10" ClipToBounds="True" SnapsToDevicePixels="True">
                            <Grid>
    ...
    ...
    ...

将效果部的 Margin 指定为 -1 ，这样就效果就不会被主体部分掩盖了。

第二个问题要用 OpacityMask：

                                <Border Background="{StaticResource TabControl.HeaderBackGround}" Name="Mask" CornerRadius="10,10,0,0" />

                                <Border Padding="10,5" Name="TP">
                                    <TabPanel IsItemsHost="True">
                                        <TabPanel.OpacityMask>
                                            <VisualBrush Visual="{Binding ElementName=Mask}" />
                                        </TabPanel.OpacityMask>
                                    </TabPanel>
                                </Border>

这个 OpacityMask 我也不懂，以至于产生了第三个问题。

这两张图片是最早版本的，用OpacityMask 实现对圆角位置的子元素隐藏，第一个 TabItem 和最后一个 TabItem, 可以看到圆角半径 X 方向和 Y方向根本就不一样。而后最后那个 TabItem 的右边也出现了一个奇怪的圆角，按照设想，这里应该是没有。

另外，如果在 Xaml 中指定 ItemContainerStyle ，需要加上 BaseOn, 要不然会把原始的样式给显示出来。

1                 <TabControl Grid.Row="2" ItemsSource="{Binding SubViews}" SelectedIndex="0">
2                     <TabControl.ItemContainerStyle>
3                         <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}">
4                             <Setter Property="Header" Value="{Binding Title}" />
5                         </Style>
6                     </TabControl.ItemContainerStyle>

最后，上代码：

<SolidColorBrush x:Key="TabControl.HeaderBackGround" Color="#FF10a8ab" />
    <SolidColorBrush x:Key="TabControl.ActivedItemHeaderBackground" Color="#FF454545" />

    <Style TargetType="{x:Type TabControl}" BasedOn="{StaticResource {x:Type TabControl}}">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid>
                        <Border Background="Transparent" BorderThickness="1" BorderBrush="Black" CornerRadius="10" Margin="-1">
                            <Border.Effect>
                                <BlurEffect />
                            </Border.Effect>
                        </Border>

                        <Border BorderBrush="Black" BorderThickness="1" CornerRadius="10" ClipToBounds="True" SnapsToDevicePixels="True">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Name="ROW0" />
                                    &l