Display_D_HP/TeamAAS-VM/Views/User/CardLoginWindow.xaml

<Window x:Class="TeamAAS_VP.Views.User.CardLoginWindow"
             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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:prism="http://prismlibrary.com/"
        xmlns:b="http://schemas.microsoft.com/xaml/behaviors"
        xmlns:vm="clr-namespace:TeamAAS_VP.ViewModels.User"
        xmlns:local="clr-namespace:TeamAAS_VP"
        xmlns:converter="clr-namespace:TeamAAS_VP.ValueConverter"
        xmlns:lex="http://wpflocalizeextension.codeplex.com"
        lex:LocalizeDictionary.DesignCulture="zh-CN"
        lex:ResxLocalizationProvider.DefaultAssembly="TeamAAS-VP"
        lex:ResxLocalizationProvider.DefaultDictionary="Lang"
        mc:Ignorable="d"
        d:DataContext="{d:DesignInstance Type=vm:CardLoginWindowViewModel}"
        Background="Transparent"
        WindowState="Normal"
        WindowStyle="None"
        WindowStartupLocation="CenterScreen"
        AllowsTransparency="True"
        Width="563"
        Height="561"
        FontFamily="{DynamicResource DefaultFont}">
    <b:Interaction.Triggers>
        <b:EventTrigger EventName="Loaded">
            <b:InvokeCommandAction Command="{Binding LoadedCommand}" />
        </b:EventTrigger>
        <b:EventTrigger EventName="Closing">
            <b:CallMethodAction MethodName="Window_Closing"
                                TargetObject="{Binding}" />
        </b:EventTrigger>
    </b:Interaction.Triggers>
    <Border Width="563"
            Height="561"
            CornerRadius="60"
            BorderBrush="Black"
            BorderThickness="1">
        <Border.Background>
            <LinearGradientBrush EndPoint="0.497,1.007"
                                 StartPoint="0.494,0.009">
                <GradientStop Color="#FF309EAF" />
                <GradientStop Color="White"
                              Offset="1" />
            </LinearGradientBrush>
        </Border.Background>
        <Grid>
            <Button Content="X"
                    FontSize="16"
                    FontWeight="Bold"
                    Width="32"
                    Height="32"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Margin="0,20,18,0"
                    Command="{Binding CloseCommand}"
                    Background="Transparent"
                    BorderBrush="Transparent"
                    Foreground="Black" />
            <TextBlock Text="用户登录"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Top"
                       FontSize="32"
                       Margin="0,58,0,0"
                       FontWeight="Bold" />
            <materialDesign:Transitioner Margin="20,110,20,20"
                                         AutoApplyTransitionOrigins="True"
                                         d:SelectedIndex="0"
                                         SelectedIndex="{Binding PageIndex}">
                <materialDesign:TransitionerSlide OpeningEffect="{materialDesign:TransitionEffect FadeIn}">
                    <Grid Background="Transparent">
                        <Grid>
                            <!-- 刷卡动画区域 -->
                            <Border BorderThickness="1"
                                    BorderBrush="#bdc3c7"
                                    Background="#f8f9fa"
                                    CornerRadius="8"
                                    Margin="0,10"
                                    VerticalAlignment="Top"
                                    HorizontalAlignment="Center"
                                    Padding="30">
                                <Canvas Width="300"
                                        Height="200">
                                    <!-- 刷卡器主体 -->
                                    <Rectangle Canvas.Left="50"
                                               Canvas.Top="70"
                                               Width="200"
                                               Height="60"
                                               Fill="#34495e"
                                               RadiusX="5"
                                               RadiusY="5">
                                        <Rectangle.Effect>
                                            <DropShadowEffect ShadowDepth="2"
                                                              Direction="270"
                                                              BlurRadius="5"
                                                              Opacity="0.2" />
                                        </Rectangle.Effect>
                                    </Rectangle>

                                    <!-- 刷卡槽 -->
                                    <Rectangle Canvas.Left="60"
                                               Canvas.Top="75"
                                               Width="180"
                                               Height="10"
                                               Fill="#7f8c8d"
                                               RadiusX="2"
                                               RadiusY="2" />

                                    <!-- 动态卡片 -->
                                    <Border x:Name="AnimatedCard"
                                            Canvas.Left="50"
                                            Canvas.Top="10"
                                            Width="180"
                                            Height="100"
                                            Background="#3498db"
                                            CornerRadius="8"
                                            BorderThickness="1"
                                            BorderBrush="#2980b9">
                                        <Border.Effect>
                                            <DropShadowEffect ShadowDepth="3"
                                                              Direction="270"
                                                              BlurRadius="10"
                                                              Opacity="0.3" />
                                        </Border.Effect>

                                        <!-- 卡片动画 -->
                                        <Border.Triggers>
                                            <EventTrigger RoutedEvent="Loaded">
                                                <BeginStoryboard>
                                                    <Storyboard RepeatBehavior="Forever">
                                                        <!-- 卡片下落动画 -->
                                                        <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)"
                                                                         From="10"
                                                                         To="70"
                                                                         Duration="0:0:1"
                                                                         AutoReverse="True"
                                                                         BeginTime="0:0:0" />

                                                        <!-- 卡片透明度变化 -->
                                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                                         From="1"
                                                                         To="0.7"
                                                                         Duration="0:0:0.5"
                                                                         AutoReverse="True"
                                                                         BeginTime="0:0:0.5" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                        </Border.Triggers>

                                        <!-- 卡片内部设计 -->
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*" />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>

                                            <TextBlock Text="员工卡"
                                                       Foreground="White"
                                                       FontSize="14"
                                                       FontWeight="Bold"
                                                       HorizontalAlignment="Center"
                                                       VerticalAlignment="Center" />

                                            <Rectangle Grid.Row="1"
                                                       Height="20"
                                                       Fill="#2980b9"
                                                       RadiusX="0"
                                                       RadiusY="0,0,8,8" />
                                            <TextBlock Grid.Row="1"
                                                       Text="●●●● 1234"
                                                       Foreground="White"
                                                       FontSize="10"
                                                       HorizontalAlignment="Center"
                                                       VerticalAlignment="Center" />
                                        </Grid>
                                    </Border>

                                    <!-- 扫描光线效果 -->
                                    <Rectangle x:Name="ScanBeam"
                                               Canvas.Left="60"
                                               Canvas.Top="75"
                                               Width="180"
                                               Height="2"
                                               Fill="#2ecc71"
                                               Opacity="0">
                                        <Rectangle.Effect>
                                            <BlurEffect Radius="3" />
                                        </Rectangle.Effect>

                                        <Rectangle.Triggers>
                                            <EventTrigger RoutedEvent="Loaded">
                                                <BeginStoryboard>
                                                    <Storyboard RepeatBehavior="Forever">
                                                        <!-- 扫描光束移动动画 -->
                                                        <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)"
                                                                         From="75"
                                                                         To="125"
                                                                         Duration="0:0:0.8"
                                                                         BeginTime="0:0:0.5" />

                                                        <!-- 扫描光束透明度动画 -->
                                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                                         From="0"
                                                                         To="1"
                                                                         Duration="0:0:0.2"
                                                                         AutoReverse="True"
                                                                         BeginTime="0:0:0.5" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                        </Rectangle.Triggers>
                                    </Rectangle>

                                    <!-- 状态指示灯 -->
                                    <Ellipse Canvas.Left="20"
                                             Canvas.Top="80"
                                             Width="12"
                                             Height="12"
                                             Fill="#e74c3c">
                                        <Ellipse.Triggers>
                                            <EventTrigger RoutedEvent="Loaded">
                                                <BeginStoryboard>
                                                    <Storyboard RepeatBehavior="Forever">
                                                        <!-- 指示灯颜色变化动画 -->
                                                        <ColorAnimation Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
                                                                        From="#e74c3c"
                                                                        To="#2ecc71"
                                                                        Duration="0:0:1"
                                                                        AutoReverse="True"
                                                                        BeginTime="0:0:0.5" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                        </Ellipse.Triggers>
                                    </Ellipse>
                                </Canvas>
                            </Border>

                            <!-- 提示文字 -->
                            <TextBlock Text="请刷卡..."
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Bottom"
                                       Margin="0,120"
                                       FontSize="16"
                                       Foreground="#2c3e50"
                                       FontWeight="SemiBold" />
                        </Grid>
                        <Button Height="50"
                                Width="50"
                                materialDesign:ButtonAssist.CornerRadius="5"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Bottom"
                                Margin="0,0,0,44"
                                ToolTip="账户登录"
                                Command="{Binding TransitionerCommand}"
                                CommandParameter="1"
                                Padding="0"
                                IsEnabled="{Binding IsLogining,Converter={StaticResource InvertBooleanConverter}}">
                            <Button.Content>
                                <materialDesign:PackIcon Kind="User"
                                                         Height="32"
                                                         Width="32" />
                            </Button.Content>
                        </Button>
                    </Grid>
                </materialDesign:TransitionerSlide>
                <Grid HorizontalAlignment="Center"
                      Margin="0,50">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />

                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Row="0"
                               Grid.Column="0"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Center"
                               Margin="20"
                               FontSize="18"
                               FontWeight="Bold"
                               Text="用户名:" />
                    <TextBox Grid.Row="0"
                             Grid.Column="1"
                             HorizontalAlignment="Left"
                             VerticalAlignment="Center"
                             Margin="20"
                             Width="200"
                             BorderThickness="1,1,1,1"
                             FontSize="16"
                             TextAlignment="Center"
                             Text="{Binding Name}" />
                    <TextBlock Grid.Row="1"
                               Grid.Column="0"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Center"
                               Margin="20"
                               FontSize="18"
                               FontWeight="Bold"
                               Text="密码:" />
                    <PasswordBox Grid.Row="1"
                                 Grid.Column="1"
                                 HorizontalAlignment="Left"
                                 VerticalAlignment="Center"
                                 Margin="20"
                                 Width="200"
                                 HorizontalContentAlignment="Center"
                                 VerticalContentAlignment="Center"
                                 BorderThickness="1,1,1,1"
                                 PasswordChar="*"
                                 FontSize="16"
                                 Padding="0,4,0,4"
                                 materialDesign:HintAssist.HelperText="请输入用户登录密码"
                                 materialDesign:TextFieldAssist.HasClearButton="True"
                                 materialDesign:PasswordBoxAssist.Password="{Binding Path=Password, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnExceptions=True}" />
                    <Button Grid.Row="2"
                            Grid.Column="0"
                            Grid.ColumnSpan="2"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Content="{lex:Loc 登录}"
                            Height="30"
                            Margin="0,50"
                            MinWidth="200"
                            BorderThickness="0"
                            materialDesign:ButtonAssist.CornerRadius="5"
                            Command="{Binding LoginCommand}">
                        <Button.Background>
                            <LinearGradientBrush EndPoint="0.5,1"
                                                 StartPoint="0.5,0">
                                <GradientStop Color="#FF73B3BD"
                                              Offset="0" />
                                <GradientStop Color="#FF309EAF"
                                              Offset="1" />
                            </LinearGradientBrush>
                        </Button.Background>
                    </Button>
                    <Button Grid.Row="3"
                            Grid.Column="0"
                            Grid.ColumnSpan="2"
                            Height="50"
                            Width="50"
                            materialDesign:ButtonAssist.CornerRadius="5"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            ToolTip="刷卡登录"
                            Padding="0"
                            Command="{Binding TransitionerCommand}"
                            CommandParameter="0"
                            Visibility="{Binding CardBtnVisibility}"
                            IsEnabled="{Binding IsLogining,Converter={StaticResource InvertBooleanConverter}}">
                        <Button.Content>
                            <materialDesign:PackIcon Kind="CreditCardScanOutline" />
                        </Button.Content>
                    </Button>
                </Grid>
            </materialDesign:Transitioner>

        </Grid>
    </Border>
</Window>