<Window x:Class="Ink_Canvas.LiquidGlassBarWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
        xmlns:props="clr-namespace:Ink_Canvas.Properties"
        mc:Ignorable="d"
        Title="{x:Static props:ThemeStrings.Theme_LiquidGlassBar}"
        WindowStyle="None"
        AllowsTransparency="True"
        Background="Transparent"
        ShowInTaskbar="False"
        ResizeMode="NoResize"
        Topmost="True"
        Focusable="False"
        SizeToContent="WidthAndHeight"
        WindowStartupLocation="Manual"
        Loaded="Window_Loaded"
        Closed="Window_Closed">

    <Window.Resources>
        <!-- 玻璃面上的图标按钮。选中态参考 GitHub 移动端底栏：一个带描边的浅色填充胶囊，
             而不是只换图标颜色——玻璃背景下单靠颜色区分度不够。
             Tag="on" 表示选中，由 code-behind 设置。 -->
        <Style x:Key="GlassToolButton" TargetType="Border">
            <Setter Property="Width" Value="40" />
            <Setter Property="Height" Value="40" />
            <Setter Property="CornerRadius" Value="20" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Margin" Value="2,0" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#2EFFFFFF" />
                </Trigger>
                <Trigger Property="Tag" Value="on">
                    <Setter Property="Background" Value="#4DFFFFFF" />
                    <Setter Property="BorderBrush" Value="#73FFFFFF" />
                </Trigger>
            </Style.Triggers>
        </Style>

        <!-- 颜色圆点。选中时套一圈更亮更厚的环 -->
        <Style x:Key="GlassColorDot" TargetType="Border">
            <Setter Property="Width" Value="22" />
            <Setter Property="Height" Value="22" />
            <Setter Property="CornerRadius" Value="11" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Margin" Value="3,0" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="BorderThickness" Value="1.5" />
            <Setter Property="BorderBrush" Value="#59FFFFFF" />
            <Style.Triggers>
                <Trigger Property="Tag" Value="on">
                    <Setter Property="BorderThickness" Value="2.5" />
                    <Setter Property="BorderBrush" Value="#F2FFFFFF" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <!-- 外层留出投影空间；投影不能画在玻璃层内，否则会被着色器一起折射 -->
    <Grid Margin="14">
        <Grid.Effect>
            <DropShadowEffect BlurRadius="22" ShadowDepth="5" Direction="270"
                              Opacity="0.34" Color="#000000" />
        </Grid.Effect>

        <!-- 胶囊裁剪根：所有玻璃层都被这个圆角裁掉。
             半径 = 内容高度(40)的一半，做成正圆端头；code-behind 会按实际高度再校准一次 -->
        <Border x:Name="GlassRoot"
                CornerRadius="20"
                ClipToBounds="True"
                SnapsToDevicePixels="True"
                UseLayoutRounding="True"
                MouseLeftButtonDown="GlassRoot_MouseLeftButtonDown"
                MouseMove="GlassRoot_MouseMove"
                MouseLeftButtonUp="GlassRoot_MouseLeftButtonUp"
                MouseEnter="GlassRoot_MouseEnter"
                MouseLeave="GlassRoot_MouseLeave">

            <!-- 圆角由 code-behind 用 RectangleGeometry 裁剪：ClipToBounds 只裁矩形，
                 挡不住着色器折射到圆角外的不透明像素 -->
            <Grid x:Name="GlassLayers">
                <!-- 第 1 层：桌面截图裁剪（运行时由 code-behind 填 ImageBrush） -->
                <Border x:Name="BackdropLayer" CornerRadius="20" />

                <!-- 第 2 层：折射。着色器由 code-behind 挂到这一层 -->
                <Border x:Name="RefractionLayer" CornerRadius="20" />

                <!-- 第 3 层：玻璃体染色。参考 Apple 的做法——中心几乎不加白，
                     只在上下极窄的一段提亮，这样透过去的桌面仍然清楚，厚度感靠边缘而非整面磨砂 -->
                <Border x:Name="TintLayer" CornerRadius="20" IsHitTestVisible="False">
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="#0CFFFFFF" Offset="0" />
                            <GradientStop Color="#03FFFFFF" Offset="0.25" />
                            <GradientStop Color="#00FFFFFF" Offset="0.5" />
                            <GradientStop Color="#03FFFFFF" Offset="0.75" />
                            <GradientStop Color="#0CFFFFFF" Offset="1" />
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>

                <!-- 原先这里还有一条只画在顶部的镜面高光弧。着色器的法线高光已经覆盖整圈边缘，
                     再单独给顶部加一层就成了「上面比下面白」的直接来源，故移除。 -->

                <!-- 第 4 层：内容 -->
                <StackPanel x:Name="ContentPanel"
                            Orientation="Horizontal"
                            VerticalAlignment="Center"
                            Margin="10,0">

                    <!-- 拖动手柄 -->
                    <Border x:Name="DragHandle" Width="18" Height="40"
                            Background="Transparent" Cursor="SizeAll"
                            ToolTip="{x:Static props:ThemeStrings.Theme_LiquidGlassBar_Drag}">
                        <Path Data="M 0,0 L 0,14 M 4,0 L 4,14"
                              Stroke="#88FFFFFF" StrokeThickness="2"
                              HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>

                    <!-- 工具 -->
                    <Border x:Name="BtnPen" Style="{StaticResource GlassToolButton}"
                            ToolTip="{x:Static props:ThemeStrings.Theme_LiquidGlassBar_Pen}"
                            MouseLeftButtonUp="BtnPen_MouseLeftButtonUp">
                        <ui:FontIcon x:Name="IconPen" Icon="{x:Static ui:SegoeFluentIcons.Edit}" FontSize="17" />
                    </Border>
                    <Border x:Name="BtnHighlighter" Style="{StaticResource GlassToolButton}"
                            ToolTip="{x:Static props:ThemeStrings.Theme_LiquidGlassBar_Highlighter}"
                            MouseLeftButtonUp="BtnHighlighter_MouseLeftButtonUp">
                        <ui:FontIcon x:Name="IconHighlighter" Icon="{x:Static ui:SegoeFluentIcons.Highlight}" FontSize="17" />
                    </Border>
                    <Border x:Name="BtnEraser" Style="{StaticResource GlassToolButton}"
                            ToolTip="{x:Static props:ThemeStrings.Theme_LiquidGlassBar_Eraser}"
                            MouseLeftButtonUp="BtnEraser_MouseLeftButtonUp">
                        <ui:FontIcon x:Name="IconEraser" Icon="{x:Static ui:SegoeFluentIcons.EraseTool}" FontSize="17" />
                    </Border>
                    <Border x:Name="BtnSelect" Style="{StaticResource GlassToolButton}"
                            ToolTip="{x:Static props:ThemeStrings.Theme_LiquidGlassBar_Select}"
                            MouseLeftButtonUp="BtnSelect_MouseLeftButtonUp">
                        <ui:FontIcon x:Name="IconSelect" Icon="{x:Static ui:SegoeFluentIcons.TouchPointer}" FontSize="17" />
                    </Border>

                    <Border Width="1" Height="24" Margin="7,0" VerticalAlignment="Center"
                            Background="#33FFFFFF" />

                    <!-- 颜色 -->
                    <Border x:Name="DotBlack" Style="{StaticResource GlassColorDot}"
                            Background="#FF1A1A1A"
                            ToolTip="{x:Static props:ThemeStrings.Theme_LiquidGlassBar_ColorBlack}"
                            MouseLeftButtonUp="DotBlack_MouseLeftButtonUp" />
                    <Border x:Name="DotRed" Style="{StaticResource GlassColorDot}"
                            Background="#FFE7443B"
                            ToolTip="{x:Static props:ThemeStrings.Theme_LiquidGlassBar_ColorRed}"
                            MouseLeftButtonUp="DotRed_MouseLeftButtonUp" />
                    <Border x:Name="DotBlue" Style="{StaticResource GlassColorDot}"
                            Background="#FF2F6FE0"
                            ToolTip="{x:Static props:ThemeStrings.Theme_LiquidGlassBar_ColorBlue}"
                            MouseLeftButtonUp="DotBlue_MouseLeftButtonUp" />
                    <Border x:Name="DotYellow" Style="{StaticResource GlassColorDot}"
                            Background="#FFF2B824"
                            ToolTip="{x:Static props:ThemeStrings.Theme_LiquidGlassBar_ColorYellow}"
                            MouseLeftButtonUp="DotYellow_MouseLeftButtonUp" />

                    <Border Width="1" Height="24" Margin="7,0" VerticalAlignment="Center"
                            Background="#33FFFFFF" />

                    <!-- 操作 -->
                    <Border x:Name="BtnUndo" Style="{StaticResource GlassToolButton}"
                            ToolTip="{x:Static props:ThemeStrings.Theme_LiquidGlassBar_Undo}"
                            MouseLeftButtonUp="BtnUndo_MouseLeftButtonUp">
                        <ui:FontIcon x:Name="IconUndo" Icon="{x:Static ui:SegoeFluentIcons.Undo}" FontSize="17" />
                    </Border>
                    <Border x:Name="BtnRedo" Style="{StaticResource GlassToolButton}"
                            ToolTip="{x:Static props:ThemeStrings.Theme_LiquidGlassBar_Redo}"
                            MouseLeftButtonUp="BtnRedo_MouseLeftButtonUp">
                        <ui:FontIcon x:Name="IconRedo" Icon="{x:Static ui:SegoeFluentIcons.Redo}" FontSize="17" />
                    </Border>
                    <Border x:Name="BtnClear" Style="{StaticResource GlassToolButton}"
                            ToolTip="{x:Static props:ThemeStrings.Theme_LiquidGlassBar_Clear}"
                            MouseLeftButtonUp="BtnClear_MouseLeftButtonUp">
                        <ui:FontIcon x:Name="IconClear" Icon="{x:Static ui:SegoeFluentIcons.Delete}" FontSize="17" />
                    </Border>
                    <Border x:Name="BtnWhiteboard" Style="{StaticResource GlassToolButton}"
                            ToolTip="{x:Static props:ThemeStrings.Theme_LiquidGlassBar_Whiteboard}"
                            MouseLeftButtonUp="BtnWhiteboard_MouseLeftButtonUp">
                        <ui:FontIcon x:Name="IconWhiteboard" Icon="{x:Static ui:SegoeFluentIcons.Draw}" FontSize="17" />
                    </Border>
                    <Border x:Name="BtnMore" Style="{StaticResource GlassToolButton}"
                            ToolTip="{x:Static props:ThemeStrings.Theme_LiquidGlassBar_More}"
                            MouseLeftButtonUp="BtnMore_MouseLeftButtonUp">
                        <ui:FontIcon x:Name="IconMore" Icon="{x:Static ui:SegoeFluentIcons.More}" FontSize="17" />
                    </Border>
                </StackPanel>

                <!-- 第 5 层：玻璃边缘。边框的立体感主要来自着色器在贴边一圈的折射，
                     这里的描边只是勾一条极淡的轮廓线，太亮会盖过折射本身 -->
                <Border CornerRadius="20" IsHitTestVisible="False" BorderThickness="1">
                    <Border.BorderBrush>
                        <!-- 水平渐变而非斜向：斜向（0,0→1,1）在扁长胶囊上会让左上比右下亮，
                             和「上面偏白」叠在一起更明显。水平方向上下均匀。 -->
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                            <GradientStop Color="#3DFFFFFF" Offset="0" />
                            <GradientStop Color="#26A6E1FF" Offset="0.34" />
                            <GradientStop Color="#26FFB3E1" Offset="0.66" />
                            <GradientStop Color="#3DFFFFFF" Offset="1" />
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                </Border>
            </Grid>
        </Border>
    </Grid>
</Window>
