118 lines
6.2 KiB
XML
118 lines
6.2 KiB
XML
<UserControl x:Class="MainModule.Views.MainView"
|
||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
|
||
xmlns:prism="http://prismlibrary.com/"
|
||
xmlns:converters="clr-namespace:UIShare.Converters;assembly=UIShare"
|
||
prism:ViewModelLocator.AutoWireViewModel="True"
|
||
mc:Ignorable="d" d:DesignHeight="1080" d:DesignWidth="1920">
|
||
|
||
<i:Interaction.Triggers>
|
||
<i:EventTrigger EventName="Loaded">
|
||
<i:InvokeCommandAction Command="{Binding LoadedCommand}"/>
|
||
</i:EventTrigger>
|
||
</i:Interaction.Triggers>
|
||
|
||
<UserControl.Resources>
|
||
<converters:StringToVisibilityConverter x:Key="StringToVisibilityConverter"/>
|
||
</UserControl.Resources>
|
||
|
||
<Grid Background="#F0F2F5">
|
||
<!-- 加一个浅灰底色更能衬托出白色的选项卡，可根据你的UI调整 -->
|
||
|
||
<!-- 顶部的选项卡，切换 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)">
|
||
<!-- 加一个白底包裹，显得更像现代卡片 -->
|
||
<Border Background="White" CornerRadius="0,4,4,4" Margin="0" BorderThickness="0" Padding="5">
|
||
<ContentControl prism:RegionManager.RegionName="TestCell1" />
|
||
</Border>
|
||
</TabItem>
|
||
|
||
<!-- 标签页 2 -->
|
||
<TabItem Header="台架 2 (Bench 2)">
|
||
<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)">
|
||
<Border Background="White" CornerRadius="0,4,4,4" Margin="0" BorderThickness="0" Padding="5">
|
||
<ContentControl prism:RegionManager.RegionName="TestCell3" />
|
||
</Border>
|
||
</TabItem>
|
||
|
||
</TabControl>
|
||
</Grid>
|
||
</UserControl> |