zoukankan      html  css  js  c++  java
  • WPF自定义TabItem样式

    <SolidColorBrush x:Key="TabItem.Static.Foreground" Color="#42445A" />
    <SolidColorBrush x:Key="TabItem.Selected.Foreground" Color="#0176FF" />
    
    <Style x:Key="TabItemStyle1" TargetType="{x:Type TabItem}">
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="Margin" Value="0" />
    <Setter Property="Padding" Value="6,2,6,2" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type TabItem}">
    <Grid x:Name="templateRoot" SnapsToDevicePixels="true">
    <Border
    x:Name="mainBorder"
    Margin="0"
    Background="{TemplateBinding Background}"
    BorderBrush="{TemplateBinding Background}"
    BorderThickness="0" />
    <Grid
    x:Name="underLine"
    Height="2"
    Margin="3,0"
    VerticalAlignment="Bottom"
    Visibility="Collapsed" />
    <ContentPresenter
    x:Name="contentPresenter"
    Margin="{TemplateBinding Padding}"
    HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
    VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
    ContentSource="Header"
    Focusable="False"
    RecognizesAccessKey="True"
    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
    </Grid>
    <ControlTemplate.Triggers>
    <MultiDataTrigger>
    <MultiDataTrigger.Conditions>
    <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true" />
    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top" />
    </MultiDataTrigger.Conditions>
    <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource TabItem.Selected.Foreground}" />
    <Setter TargetName="contentPresenter" Property="Opacity" Value="0.56" />
    </MultiDataTrigger>
    <MultiDataTrigger>
    <MultiDataTrigger.Conditions>
    <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false" />
    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top" />
    </MultiDataTrigger.Conditions>
    <Setter TargetName="underLine" Property="Visibility" Value="Collapsed" />
    <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource TabItem.Static.Foreground}" />
    </MultiDataTrigger>
    <MultiDataTrigger>
    <MultiDataTrigger.Conditions>
    <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true" />
    <Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top" />
    </MultiDataTrigger.Conditions>
    <Setter TargetName="underLine" Property="Visibility" Value="Visible" />
    <Setter TargetName="underLine" Property="Background" Value="{StaticResource TabItem.Selected.Foreground}" />
    <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource TabItem.Selected.Foreground}" />
    </MultiDataTrigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    

     

     显示效果如下:

  • 相关阅读:
    Vue 从入门到进阶之路(十四)
    Vue 从入门到进阶之路(十三)
    Vue 从入门到进阶之路(十二)
    Vue 从入门到进阶之路(十一)
    vue-cli 3.x 开发插件并发布到 npm
    2018 年终总结 & 2019 年度计划
    帝都夜话
    移动端实现拖拽的两种方法
    前端面试(原生js篇)
    在前端获取图片宽高
  • 原文地址:https://www.cnblogs.com/wangjinming/p/15093617.html
Copyright © 2011-2022 走看看