WPF TabControl 美化

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

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

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

这里要换的是 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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值