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" />
                                    <RowDefinition Name="ROW1" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Name="COL0" />
                                    <ColumnDefinition Name="COL1" />
                                </Grid.ColumnDefinitions>

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

                                <Grid Grid.Row="0" Name="TC">
                                    <Border Name="EB" Margin="-1" BorderThickness="0,1,0,0" BorderBrush="#CC000000">
                                        <Border.Effect>
                                            <BlurEffect Radius="5" />
                                        </Border.Effect>
                                    </Border>
                                    <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="10" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                </Grid>
                            </Grid>
                        </Border>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="TabStripPlacement" Value="Top">
                            <Setter TargetName="ROW0" Property="Height" Value="auto" />

                            <Setter TargetName="Mask" Property="Grid.Row" Value="0" />
                            <Setter TargetName="Mask" Property="Grid.Column" Value="0" />
                            <Setter TargetName="Mask" Property="Grid.ColumnSpan" Value="2" />
                            <Setter TargetName="Mask" Property="CornerRadius" Value="10,10,0,0" />

                            <Setter TargetName="TP" Property="Grid.Row" Value="0" />
                            <Setter TargetName="TP" Property="Grid.Column" Value="0" />
                            <Setter TargetName="TP" Property="Grid.ColumnSpan" Value="2" />

                            <Setter TargetName="TC" Property="Grid.Column" Value="0" />
                            <Setter TargetName="TC" Property="Grid.Row" Value="1" />
                            <Setter TargetName="TC" Property="Grid.ColumnSpan" Value="2" />

                            <Setter TargetName="EB" Property="BorderThickness" Value="0,1,0,0" />
                        </Trigger>

                        <Trigger Property="TabStripPlacement" Value="Bottom">
                            <Setter TargetName="ROW1" Property="Height" Value="auto" />

                            <Setter TargetName="Mask" Property="Grid.Row" Value="1" />
                            <Setter TargetName="Mask" Property="Grid.Column" Value="0" />
                            <Setter TargetName="Mask" Property="Grid.ColumnSpan" Value="2" />
                            <Setter TargetName="Mask" Property="CornerRadius" Value="0,0,10,10" />

                            <Setter TargetName="TP" Property="Grid.Row" Value="1" />
                            <Setter TargetName="TP" Property="Grid.Column" Value="0" />
                            <Setter TargetName="TP" Property="Grid.ColumnSpan" Value="2" />

                            <Setter TargetName="TC" Property="Grid.Column" Value="0" />
                            <Setter TargetName="TC" Property="Grid.Row" Value="0" />
                            <Setter TargetName="TC" Property="Grid.ColumnSpan" Value="2" />

                            <Setter TargetName="EB" Property="BorderThickness" Value="0,0,0,1" />
                        </Trigger>

                        <Trigger Property="TabStripPlacement" Value="Left">
                            <Setter TargetName="COL0" Property="Width" Value="auto" />

                            <Setter TargetName="Mask" Property="Grid.Row" Value="0" />
                            <Setter TargetName="Mask" Property="Grid.Column" Value="0" />
                            <Setter TargetName="Mask" Property="Grid.RowSpan" Value="2" />
                            <Setter TargetName="Mask" Property="CornerRadius" Value="10,0,0,10" />

                            <Setter TargetName="TP" Property="Grid.Row" Value="0" />
                            <Setter TargetName="TP" Property="Grid.Column" Value="0" />
                            <Setter TargetName="TP" Property="Grid.RowSpan" Value="2" />

                            <Setter TargetName="TC" Property="Grid.Column" Value="1" />
                            <Setter TargetName="TC" Property="Grid.Row" Value="0" />
                            <Setter TargetName="TC" Property="Grid.RowSpan" Value="2" />

                            <Setter TargetName="EB" Property="BorderThickness" Value="1,0,0,0" />
                        </Trigger>


                        <Trigger Property="TabStripPlacement" Value="Right">
                            <Setter TargetName="COL1" Property="Width" Value="auto" />

                            <Setter TargetName="Mask" Property="Grid.Row" Value="0" />
                            <Setter TargetName="Mask" Property="Grid.Column" Value="1" />
                            <Setter TargetName="Mask" Property="Grid.RowSpan" Value="2" />
                            <Setter TargetName="Mask" Property="CornerRadius" Value="0,10,10,0" />

                            <Setter TargetName="TP" Property="Grid.Row" Value="0" />
                            <Setter TargetName="TP" Property="Grid.Column" Value="1" />
                            <Setter TargetName="TP" Property="Grid.RowSpan" Value="2" />

                            <Setter TargetName="TC" Property="Grid.Column" Value="0" />
                            <Setter TargetName="TC" Property="Grid.Row" Value="0" />
                            <Setter TargetName="TC" Property="Grid.RowSpan" Value="2" />

                            <Setter TargetName="EB" Property="BorderThickness" Value="0,0,1,0" />
                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}">
        <Setter Property="TextBlock.Foreground" Value="White" />
        <Setter Property="TextBlock.FontSize" Value="14" />
        <Setter Property="TextBlock.FontWeight" Value="Bold" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Border Padding="2" x:Name="bbb" SnapsToDevicePixels="True" ClipToBounds="True" CornerRadius="15" >
                        <ContentPresenter x:Name="contentPresenter" 
                                              ContentSource="Header"
                                              Focusable="False" 
                                              HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" 
                                              Margin="{TemplateBinding Padding}" 
                                              RecognizesAccessKey="True" 
                                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                              VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}">

                        </ContentPresenter>
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="bbb" Property="Background" Value="#FF333333" />
                            <Setter TargetName="bbb" Property="Padding" Value="3" />
                        </Trigger>

                        <Trigger Property="TabStripPlacement" Value="Left">
                            <Setter Property="LayoutTransform">
                                <Setter.Value>
                                    <RotateTransform Angle="-90" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>

                        <Trigger Property="TabStripPlacement" Value="Right">
                            <Setter Property="LayoutTransform">
                                <Setter.Value>
                                    <RotateTransform Angle="90" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>

                    </ControlTemplate.Triggers>




                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>

原文：http://www.cnblogs.com/xling/p/3595602.html