WPF TabControl样式
<!-- **************************************************************** * 作 者 :姜 彦 * 项目名称 :EMRCPOE.Presentation.Style.Default * 字典名称 :TabControl * 命名空间 :EMRCPOE.Presentation.Style.Default * CLR 版本 :4.0.30319.42000 * 创建时间 :2019/4/9 15:40:02 * 当前版本 :1.0.0.0 * My Email :jiangyan2008.521@gmail.com * jiangyan2008.521@qq.com * 描述说明 : * * 修改历史 : * **************************************************************** * Copyright @ JiangYan 2019 All rights reserved **************************************************************** --> <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c="http://emrcpoe.presentation.com/winfx/2019/xaml/control" xmlns:local="clr-namespace:EMRCPOE.Presentation.Style.Default"> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Base.xaml"></ResourceDictionary> <ResourceDictionary> <!--Region TabControl默认风格样式--> <!--正常按钮时边框颜色--> <SolidColorBrush x:Key="TabItem.Static.Border" Color="#2E8A9B" /> <!--正常情况下标签字体色--> <SolidColorBrush x:Key="TabItem.Static.Foreground" Color="#2E8A9B" /> <!--正常情况下标签背景色--> <LinearGradientBrush x:Key="TabItem.Static.Background" EndPoint="0,1" StartPoint="0,0"> <GradientStop Color="#FFFFFF" Offset="0.0" /> <GradientStop Color="#FFFFFF" Offset="1.0" /> </LinearGradientBrush> <!--鼠标划过时标签背景色--> <LinearGradientBrush x:Key="TabItem.IsMouseOver.Background" EndPoint="0,1" StartPoint="0,0"> <GradientStop Color="#F4AE00" Offset="0.0" /> <GradientStop Color="#F4AE00" Offset="1.0" /> </LinearGradientBrush> <!--鼠标划过时按钮字体色--> <SolidColorBrush x:Key="TabItem.IsMouseOver.Foreground" Color="#FFFFFF" /> <!--鼠标划过时按钮边框色--> <SolidColorBrush x:Key="TabItem.IsMouseOver.Border" Color="#F4AE00" /> <!--选中时按钮背景色--> <!--Color="#2E8A9B"蓝绿色--> <SolidColorBrush x:Key="TabItem.IsSelected.Background" Color="#F4AE00" /> <!--选中时按钮字体色--> <SolidColorBrush x:Key="TabItem.IsSelected.Foreground" Color="#FFFFFF" /> <ControlTemplate x:Key="tabControlTemplate" TargetType="{x:Type TabControl}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <!--Tab标签--> <!--HorizontalAlignment="Center" 设置居中--> <TabPanel Grid.Row="0" Panel.ZIndex="1" Margin="0,0,2,0" IsItemsHost="True" Background="Transparent" /> <Border Grid.Row="1" BorderBrush="#EDEDED" BorderThickness="1" CornerRadius="2,0,0,0" Margin="0" Background="White"> <ContentPresenter ContentSource="SelectedContent" /> </Border> </Grid> </ControlTemplate> <ControlTemplate x:Key="tabItemTemplate" TargetType="{x:Type TabItem}"> <Grid x:Name="grid" MinWidth="60" HorizontalAlignment="Stretch" Margin="0,0,1,0"> <!--Margin="0"--> <Border Name="Border" Background="{TemplateBinding Background}" BorderBrush="{DynamicResource TabItem.Static.Border}" BorderThickness="0.5" CornerRadius="1"> <!--CornerRadius标签按钮边框倒角--> <TextBlock x:Name="ContentSite" FontWeight="Normal" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{TemplateBinding Header}" Padding="4,5,4,5" /> <!--标签文本--> </Border> </Grid> <ControlTemplate.Triggers> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="False" /> <Condition Property="IsMouseOver" Value="False" /> </MultiTrigger.Conditions> <Setter Property="Background" Value="{DynamicResource TabItem.Static.Background}"> </Setter> </MultiTrigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="False" /> <Condition Property="IsMouseOver" Value="True" /> </MultiTrigger.Conditions> <Setter TargetName="ContentSite" Property="Foreground" Value="{DynamicResource TabItem.IsMouseOver.Foreground}" /> <Setter Property="Background" Value="{DynamicResource TabItem.IsMouseOver.Background}" /> <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource TabItem.IsMouseOver.Border}" /> </MultiTrigger> <Trigger Property="IsSelected" Value="True"> <Setter TargetName="Border" Property="Background" Value="{DynamicResource TabItem.IsSelected.Background}" /> <Setter TargetName="ContentSite" Property="Foreground" Value="{DynamicResource TabItem.IsSelected.Foreground}" /> <Setter TargetName="grid" Property="Margin" Value="0" /> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter TargetName="Border" Property="Background" Value="LightGray" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> <Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource base}"> <Setter Property="Template" Value="{StaticResource tabItemTemplate}"></Setter> <Setter Property="Foreground" Value="{DynamicResource TabItem.Static.Foreground}" /> </Style> <!--<Style TargetType="{x:Type TabControl}" BasedOn="{StaticResource base}"> --><!--x:Key="TabControlSpecialStyle"--><!-- <Setter Property="Template" Value="{StaticResource tabControlTemplate}"></Setter> --><!--<Setter Property="HorizontalContentAlignment" Value="Center"></Setter>--><!-- </Style>--> <!--<Style TargetType="{x:Type TabControl}" BasedOn="{StaticResource base}" x:Key="TabControlSpecialStyle"> <Setter Property="Template" Value="{StaticResource tabControlTemplate}"></Setter> </Style>--> <!--Region TabControl默认风格样式--> </ResourceDictionary> <ResourceDictionary> <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94" /> <Style x:Key="AnimatedTabControl3DStyle" TargetType="{x:Type c:AnimatedTabControl}" BasedOn="{StaticResource base}"> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" /> <Setter Property="Padding" Value="0" /> <Setter Property="BorderThickness" Value="1" /> <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}" /> <Setter Property="Background" Value="#F9F9F9" /> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="VerticalContentAlignment" Value="Stretch" /> <Setter Property="HeardHight" Value="0" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type c:AnimatedTabControl}"> <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <!--TabItem的Heard容器整体倒角--> <Border Height="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=HeardHight,Mode=TwoWay}" Margin="10,0,10,0" HorizontalAlignment="Center" VerticalAlignment="Top" Width="Auto" Grid.Row="0" CornerRadius="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=CornerRadius,Mode=TwoWay}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"> <TabPanel x:Name="HeaderPanel" HorizontalAlignment="Center" VerticalAlignment="Center" IsItemsHost="true" Grid.Column="0" Grid.Row="0" KeyboardNavigation.TabIndex="1" /> </Border> <!--TabItem主容器--> <Grid Grid.Row="1" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <Viewport3D x:Name="vp3D" Visibility="Hidden" Width="Auto" Height="Auto"> <Viewport3D.Camera> <PerspectiveCamera x:Name="camera" Position="0,0,0.5" LookDirection="0,0,-1" FieldOfView="90" /> </Viewport3D.Camera> <Viewport3D.Children> <ModelVisual3D> <ModelVisual3D.Content> <Model3DGroup> <DirectionalLight Color="#444" Direction="0,0,-1" /> <AmbientLight Color="#BBB" /> </Model3DGroup> </ModelVisual3D.Content> </ModelVisual3D> <ModelVisual3D> <ModelVisual3D.Content> <GeometryModel3D> <GeometryModel3D.Geometry> <MeshGeometry3D TriangleIndices="0,1,2 2,3,0" TextureCoordinates="0,1 1,1 1,0 0,0" Positions="-0.5,-0.5,0 0.5,-0.5,0 0.5,0.5,0 -0.5,0.5,0" /> </GeometryModel3D.Geometry> <GeometryModel3D.Material> <DiffuseMaterial> <DiffuseMaterial.Brush> <VisualBrush Visual="{Binding ElementName=BorderIn}" Stretch="Uniform" /> </DiffuseMaterial.Brush> </DiffuseMaterial> </GeometryModel3D.Material> <GeometryModel3D.BackMaterial> <DiffuseMaterial> <DiffuseMaterial.Brush> <VisualBrush Visual="{Binding ElementName=BorderIn}" Stretch="Uniform"> <VisualBrush.RelativeTransform> <ScaleTransform ScaleX="-1" CenterX="0.5" /> </VisualBrush.RelativeTransform> </VisualBrush> </DiffuseMaterial.Brush> </DiffuseMaterial> </GeometryModel3D.BackMaterial> <GeometryModel3D.Transform> <RotateTransform3D> <RotateTransform3D.Rotation> <AxisAngleRotation3D x:Name="rotate" Axis="0,3,0" Angle="0" /> </RotateTransform3D.Rotation> </RotateTransform3D> </GeometryModel3D.Transform> </GeometryModel3D> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D.Children> </Viewport3D> <!--TabItem主容器Border绘制效果--> <Border x:Name="BorderOut" VerticalAlignment="Stretch" BorderThickness="0" CornerRadius="10"> <Border x:Name="BorderIn" VerticalAlignment="Stretch" Background="#00000000" BorderThickness="0" CornerRadius="0"> <Grid> <!--Margin="10"给倒角圆角留出空间实现圆角倒角效果--> <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="10" /> </Grid> </Border> </Border> </Grid> </Grid> <ControlTemplate.Triggers> <EventTrigger RoutedEvent="c:AnimatedTabControl.SelectionChanging"> <BeginStoryboard> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="vp3D" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}" /> <DiscreteObjectKeyFrame KeyTime="0:0:1.1" Value="{x:Static Visibility.Hidden}" /> </ObjectAnimationUsingKeyFrames> <DoubleAnimation To="0" Duration="0:0:0.05" Storyboard.TargetName="BorderOut" Storyboard.TargetProperty="Opacity" /> <DoubleAnimation BeginTime="0:0:1.05" Duration="0:0:0.05" To="1" Storyboard.TargetName="BorderOut" Storyboard.TargetProperty="Opacity" /> <Point3DAnimation To="0,0,1.1" From="0,0,0.5" BeginTime="0:0:0.05" Duration="0:0:0.5" AutoReverse="True" DecelerationRatio="0.3" Storyboard.TargetName="camera" Storyboard.TargetProperty="(PerspectiveCamera.Position)" /> <DoubleAnimation From="0" To="180" AccelerationRatio="0.3" DecelerationRatio="0.3" BeginTime="0:0:0.05" Duration="0:0:1" Storyboard.TargetName="rotate" Storyboard.TargetProperty="Angle" /> </Storyboard> </BeginStoryboard> </EventTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="TabItem3DStyle" TargetType="{x:Type TabItem}"> <Setter Property="FontFamily" Value="Trebuchet MS" /> <Setter Property="FontSize" Value="14" /> <Setter Property="Foreground" Value="black" /> <Setter Property="Header" Value="{Binding Content.DataContext.HeaderInfo, RelativeSource={RelativeSource Self}}" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TabItem}"> <Grid Width="Auto" Height="Auto" x:Name="TabItemRoot" Margin="10,0,10,0"> <ContentPresenter Margin="13,5,13,5" x:Name="Content" ContentSource="Header" RecognizesAccessKey="True" /> <Border x:Name="border" Height="Auto" Padding="0,0,0,0" Opacity="0"> <Border.Background> <RadialGradientBrush> <GradientStop Color="Transparent" Offset="0" /> <GradientStop Color="Transparent" Offset="1" /> </RadialGradientBrush> </Border.Background> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="true"> <Setter TargetName="border" Property="Opacity" Value="1" /> <Setter TargetName="Content" Property="Opacity" Value="1" /> </Trigger> <Trigger Property="IsSelected" Value="false"> <Setter TargetName="Content" Property="Opacity" Value="0.5" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> <!-- ******************************************************************* * 备 注 : * * * ******************************************************************* * Copyright @ JiangYan 2019. All rights reserved. ******************************************************************* -->
![](https://files-cdn.cnblogs.com/files/jiangyan219/Alipay.bmp)
您的资助是我最大的动力!
金额随意,欢迎来赏!
![](https://files-cdn.cnblogs.com/files/jiangyan219/WeChat.bmp)
我写的东西能让你能懂,那是义务
毕竟占用了你生命中的宝贵的时间和注意力
要是你还能喜欢我的作品,那就是缘分了
如果,您希望更容易地发现我的新博客,不妨点击一下绿色通道的因为,我的写作热情也离不开您的肯定支持,感谢您的阅读,我是【青青子衿】!