Files
Better-Seewo/Installer/MainWindow.xaml

460 lines
22 KiB
Plaintext
Raw Normal View History

<!--
MainWindow.xaml - Better-Seewo 安装向导主窗口
Fluent Design 风格无边框圆角窗口,包含标题栏、内容区域、底部按钮栏和进度指示器
布局:标题栏(36px) + 内容区域(Frame) + 按钮栏(56px) + 进度指示器
作者:雾启工作室
-->
<Window x:Class="Better_Seewo.Installer.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Better-Seewo 安装程序"
Width="640" Height="480"
ResizeMode="NoResize"
WindowStyle="None"
AllowsTransparency="True"
Background="Transparent"
WindowStartupLocation="CenterScreen"
Loaded="Window_Loaded">
<!-- ===== 窗口入场动画:透明度 + 缩放 ===== -->
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- 窗口从透明渐入不透明 -->
<DoubleAnimation Storyboard.TargetName="RootBorder"
Storyboard.TargetProperty="Opacity"
From="0" To="1"
Duration="0:0:0.300">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<!-- 窗口水平缩放:从略小到正常 -->
<DoubleAnimation Storyboard.TargetName="RootBorder"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
From="0.95" To="1.0"
Duration="0:0:0.300">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<!-- 窗口垂直缩放:从略小到正常 -->
<DoubleAnimation Storyboard.TargetName="RootBorder"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
From="0.95" To="1.0"
Duration="0:0:0.300">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<!-- ===== 窗口根容器(带阴影和圆角) ===== -->
<Border x:Name="RootBorder"
Background="{DynamicResource BackgroundBrush}"
CornerRadius="{DynamicResource WindowCornerRadius}"
BorderThickness="1"
BorderBrush="{DynamicResource BorderBrush}"
Effect="{StaticResource WindowShadowInline}"
ClipToBounds="True"
Opacity="0">
<!-- 缩放变换(用于入场动画) -->
<Border.RenderTransform>
<ScaleTransform ScaleX="1.0" ScaleY="1.0" />
</Border.RenderTransform>
<!-- ===== 主网格布局 ===== -->
<Grid>
<Grid.RowDefinitions>
<!-- 顶部标题栏36px -->
<RowDefinition Height="36" />
<!-- 中间内容区域(自适应) -->
<RowDefinition Height="*" />
<!-- 底部按钮栏56px -->
<RowDefinition Height="56" />
<!-- 底部进度指示器24px -->
<RowDefinition Height="24" />
</Grid.RowDefinitions>
<!-- ============================== -->
<!-- ===== 顶部自定义标题栏 ===== -->
<!-- ============================== -->
<Grid Grid.Row="0"
Background="{DynamicResource TitleBarBackgroundBrush}"
MouseLeftButtonDown="TitleBar_MouseLeftButtonDown">
<Grid.ColumnDefinitions>
<!-- 左侧Logo 和标题 -->
<ColumnDefinition Width="*" />
<!-- 右侧:关闭按钮 -->
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- 应用 Logo六边形图标 + 标题 -->
<StackPanel Grid.Column="0"
Orientation="Horizontal"
VerticalAlignment="Center"
Margin="12,0,0,0">
<!-- 六边形 Logo -->
<Path Data="M12 2L22 7.5V16.5L12 22L2 16.5V7.5L12 2Z"
Fill="{DynamicResource AccentBrush}"
Stretch="Uniform"
Width="16" Height="16"
Margin="0,0,8,0" />
<!-- 标题文字 -->
<TextBlock Text="Better-Seewo 安装程序"
FontSize="12"
FontWeight="SemiBold"
Foreground="{DynamicResource TextPrimaryBrush}"
VerticalAlignment="Center" />
</StackPanel>
<!-- 关闭按钮(悬停红色) -->
<Button x:Name="BtnClose"
Grid.Column="1"
Content="&#xE8BB;"
FontFamily="Segoe MDL2 Assets"
FontSize="10"
Width="46" Height="36"
Background="Transparent"
Foreground="{DynamicResource TextSecondaryBrush}"
BorderThickness="0"
Cursor="Hand"
Click="BtnClose_Click"
Style="{DynamicResource CloseButtonStyle}" />
</Grid>
<!-- 分隔线(标题栏下方) -->
<Border Grid.Row="0"
VerticalAlignment="Bottom"
Height="1"
Background="{DynamicResource BorderBrush}" />
<!-- ============================== -->
<!-- ===== 中间内容区域 ===== -->
<!-- ============================== -->
<Grid Grid.Row="1"
ClipToBounds="True">
<!-- 页面导航 Frame -->
<Frame x:Name="ContentFrame"
NavigationUIVisibility="Hidden"
ClipToBounds="True" />
</Grid>
<!-- 分隔线(内容区域下方) -->
<Border Grid.Row="1"
VerticalAlignment="Bottom"
Height="1"
Background="{DynamicResource BorderBrush}" />
<!-- ============================== -->
<!-- ===== 底部按钮栏 ===== -->
<!-- ============================== -->
<Grid Grid.Row="2"
Background="{DynamicResource FooterBackgroundBrush}">
<Grid.ColumnDefinitions>
<!-- 左侧:返回按钮 -->
<ColumnDefinition Width="Auto" />
<!-- 中间:弹性空间 -->
<ColumnDefinition Width="*" />
<!-- 右侧:下一步/安装/完成按钮 -->
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- 返回按钮 -->
<Button x:Name="BtnBack"
Grid.Column="0"
Content="&#xE112; 返回"
FontFamily="Segoe MDL2 Assets, Microsoft YaHei UI"
FontSize="13"
Height="34"
Padding="16,0"
Margin="16,0,0,0"
Background="Transparent"
Foreground="{DynamicResource TextSecondaryBrush}"
BorderThickness="1"
BorderBrush="{DynamicResource BorderBrush}"
Cursor="Hand"
Visibility="Collapsed"
Click="BtnBack_Click"
Style="{DynamicResource ActionButtonStyle}" />
<!-- 下一步按钮(欢迎页) -->
<Button x:Name="BtnNext"
Grid.Column="2"
Content="下一步 &#xE74E;"
FontFamily="Microsoft YaHei UI, Segoe MDL2 Assets"
FontSize="13"
FontWeight="SemiBold"
Height="34"
Padding="20,0"
Margin="0,0,16,0"
Background="{DynamicResource AccentBrush}"
Foreground="White"
BorderThickness="0"
Cursor="Hand"
Click="BtnNext_Click"
Style="{DynamicResource PrimaryButtonStyle}" />
<!-- 安装按钮(安装页,默认隐藏) -->
<Button x:Name="BtnInstall"
Grid.Column="2"
Content="开始安装 &#xE74E;"
FontFamily="Microsoft YaHei UI, Segoe MDL2 Assets"
FontSize="13"
FontWeight="SemiBold"
Height="34"
Padding="20,0"
Margin="0,0,16,0"
Background="{DynamicResource AccentBrush}"
Foreground="White"
BorderThickness="0"
Cursor="Hand"
Visibility="Collapsed"
Click="BtnInstall_Click"
Style="{DynamicResource PrimaryButtonStyle}" />
<!-- 完成按钮(完成页,默认隐藏) -->
<Button x:Name="BtnFinish"
Grid.Column="2"
Content="完成"
FontFamily="Microsoft YaHei UI"
FontSize="13"
FontWeight="SemiBold"
Height="34"
Padding="24,0"
Margin="0,0,16,0"
Background="{DynamicResource AccentBrush}"
Foreground="White"
BorderThickness="0"
Cursor="Hand"
Visibility="Collapsed"
Click="BtnFinish_Click"
Style="{DynamicResource PrimaryButtonStyle}" />
</Grid>
<!-- ============================== -->
<!-- ===== 底部进度指示器 ===== -->
<!-- ============================== -->
<Grid Grid.Row="3"
Background="{DynamicResource FooterBackgroundBrush}">
<!-- 三个圆点指示器,表示三个安装步骤 -->
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<!-- 圆点 1欢迎页 -->
<Ellipse x:Name="Dot1"
Width="8" Height="8"
Fill="{DynamicResource AccentBrush}"
Margin="0,0,8,0" />
<!-- 圆点 2安装页 -->
<Ellipse x:Name="Dot2"
Width="8" Height="8"
Fill="{DynamicResource BorderBrush}"
Margin="0,0,8,0" />
<!-- 圆点 3完成页 -->
<Ellipse x:Name="Dot3"
Width="8" Height="8"
Fill="{DynamicResource BorderBrush}" />
</StackPanel>
</Grid>
</Grid>
</Border>
<!-- ===== 窗口级样式资源 ===== -->
<Window.Resources>
<!-- 窗口阴影(必须为 StaticResourceEffect 不能跨元素共享) -->
<DropShadowEffect x:Key="WindowShadowInline"
ShadowDepth="4"
BlurRadius="24"
Opacity="0.6"
Color="#000000" />
<!-- ===== 主要按钮样式(强调色背景,悬停缩放) ===== -->
<Style x:Key="PrimaryButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="BtnBg"
Background="{TemplateBinding Background}"
CornerRadius="6"
Padding="{TemplateBinding Padding}">
<ContentPresenter x:Name="BtnContent"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<!-- 鼠标悬停:缩放 + 变色 -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="BtnBg" Property="Background" Value="{DynamicResource AccentHoverBrush}" />
</Trigger>
<!-- 鼠标按下 -->
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="BtnBg" Property="Background" Value="{DynamicResource AccentPressedBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<!-- 悬停缩放动画 -->
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
To="1.05" Duration="0:0:0.200">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
To="1.05" Duration="0:0:0.200">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
To="1.0" Duration="0:0:0.200">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
To="1.0" Duration="0:0:0.200">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
<!-- ===== 次要按钮样式(透明背景 + 边框,悬停缩放) ===== -->
<Style x:Key="ActionButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="BtnBg"
Background="Transparent"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="6"
Padding="{TemplateBinding Padding}">
<ContentPresenter x:Name="BtnContent"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<!-- 鼠标悬停:浅色背景 -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="BtnBg" Property="Background" Value="{DynamicResource WindowButtonHoverBrush}" />
</Trigger>
<!-- 鼠标按下 -->
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="BtnBg" Property="Background" Value="{DynamicResource WindowButtonPressedBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<!-- 悬停缩放动画 -->
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
To="1.05" Duration="0:0:0.200">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
To="1.05" Duration="0:0:0.200">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
To="1.0" Duration="0:0:0.200">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
To="1.0" Duration="0:0:0.200">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
<!-- ===== 关闭按钮样式(悬停红色) ===== -->
<Style x:Key="CloseButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="BtnBg"
Background="Transparent"
CornerRadius="0">
<ContentPresenter x:Name="CloseIcon"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<!-- 鼠标悬停 - 红色背景 -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="BtnBg" Property="Background" Value="{DynamicResource CloseHoverBrush}" />
<Setter TargetName="CloseIcon" Property="TextBlock.Foreground" Value="White" />
</Trigger>
<!-- 鼠标按下 - 深红色背景 -->
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="BtnBg" Property="Background" Value="{DynamicResource ClosePressedBrush}" />
<Setter TargetName="CloseIcon" Property="TextBlock.Foreground" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
</Window>