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

 

posted @ 2019-08-30 19:15  <--青青子衿-->  阅读(916)  评论(1编辑  收藏  举报
// /**/ // 在页脚Html代码 引入 // function btn_donateClick() { var DivPopup = document.getElementById('Div_popup'); var DivMasklayer = document.getElementById('div_masklayer'); DivMasklayer.style.display = 'block'; DivPopup.style.display = 'block'; var h = Div_popup.clientHeight; with (Div_popup.style) { marginTop = -h / 2 + 'px'; } } function MasklayerClick() { var masklayer = document.getElementById('div_masklayer'); var divImg = document.getElementById("Div_popup"); masklayer.style.display = "none"; divImg.style.display = "none"; } setTimeout( function () { document.getElementById('div_masklayer').onclick = MasklayerClick; document.getElementById('btn_donate').onclick = btn_donateClick; var a_gzw = document.getElementById("guanzhuwo"); a_gzw.href = "javascript:void(0);"; $("#guanzhuwo").attr("onclick","follow('33513f9f-ba13-e011-ac81-842b2b196315');"); }, 900);