样式优化

This commit is contained in:
“hsc”
2026-08-27 13:37:06 +08:00
parent f46df16275
commit c41190aa33
6 changed files with 40 additions and 85 deletions
+7 -71
View File
@@ -24,75 +24,9 @@
<!-- 顶部的选项卡,切换 3 个台架 -->
<TabControl Margin="5">
<TabControl.Resources>
<!-- 1. 去除 TabControl 原生的丑陋边框和灰色背景 -->
<Style TargetType="TabControl">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="0,5,0,0"/>
</Style>
<!-- 2. 美化 TabItem 标签头 -->
<Style TargetType="TabItem">
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Foreground" Value="#8C8C8C"/>
<!-- 默认灰字 -->
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="25,12"/>
<!-- 撑大点击区域 -->
<Setter Property="Margin" Value="0,0,4,0"/>
<!-- 标签之间的间距 -->
<Setter Property="Cursor" Value="Hand"/>
<!-- 核心魔法:重写外观结构 -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<!-- 用一个带底部边框的 Border 包装文字 -->
<Border Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="Transparent"
BorderThickness="0,0,0,3"
CornerRadius="4,4,0,0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="{TemplateBinding Padding}"/>
</Border>
<ControlTemplate.Triggers>
<!-- 交互状态1:鼠标悬浮 -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="#E6E6E6"/>
<Setter Property="Foreground" Value="#595959"/>
</Trigger>
<!-- 交互状态2:被选中 -->
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="White"/>
<!-- 选中时的底部指示条颜色(蓝色) -->
<Setter TargetName="Border" Property="BorderBrush" Value="#007ACC"/>
<!-- 选中时的字体颜色(蓝色) -->
<Setter Property="Foreground" Value="#007ACC"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<!-- !!!这是你原有的全屏隐藏逻辑!完美保留!!! -->
<DataTrigger Binding="{Binding ExpandedCellName, Converter={StaticResource StringToVisibilityConverter}}" Value="Visible">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TabControl.Resources>
<!-- 标签页 1 -->
<TabItem Header="台架 1 (Bench 1)">
<!-- 标签页 1Inverse 参数 = 展开全屏(ExpandedCellName 非空)时隐藏标签页,不动主题样式 -->
<TabItem Header="台架 1 (Bench 1)"
Visibility="{Binding ExpandedCellName, Converter={StaticResource StringToVisibilityConverter}, ConverterParameter=Inverse}">
<!-- 加一个白底包裹,显得更像现代卡片 -->
<Border Background="White" CornerRadius="0,4,4,4" Margin="0" BorderThickness="0" Padding="5">
<ContentControl prism:RegionManager.RegionName="TestCell1" />
@@ -100,14 +34,16 @@
</TabItem>
<!-- 标签页 2 -->
<TabItem Header="台架 2 (Bench 2)">
<TabItem Header="台架 2 (Bench 2)"
Visibility="{Binding ExpandedCellName, Converter={StaticResource StringToVisibilityConverter}, ConverterParameter=Inverse}">
<Border Background="White" CornerRadius="0,4,4,4" Margin="0" BorderThickness="0" Padding="5">
<ContentControl prism:RegionManager.RegionName="TestCell2" />
</Border>
</TabItem>
<!-- 标签页 3 -->
<TabItem Header="台架 3 (Bench 3)">
<TabItem Header="台架 3 (Bench 3)"
Visibility="{Binding ExpandedCellName, Converter={StaticResource StringToVisibilityConverter}, ConverterParameter=Inverse}">
<Border Background="White" CornerRadius="0,4,4,4" Margin="0" BorderThickness="0" Padding="5">
<ContentControl prism:RegionManager.RegionName="TestCell3" />
</Border>