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