AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

WPF做登陆界面

2023-07-12 135
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： WPF做登陆界面 

<Window x:Class="zhaoxi.CourseManagement.View.LoginView"
        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:local="clr-namespace:zhaoxi.CourseManagement.View"
        mc:Ignorable="d" Name="window"
        Title="系统登录" Height="600" Width="360"
        FontFamily="Microsoft YaHei" FontWeight="ExtraLight"
        ResizeMode="NoResize"  WindowStartupLocation="CenterScreen"
        WindowStyle="None" AllowsTransparency="True" Background="{x:Null}">
    <Window.Resources>
        <!--#region 画右上角叉号 -->
        <ControlTemplate TargetType="Button" x:Key="CloseButtonTemplate">
            <Border Background="Transparent" Name="back">
                <Path Data="M0 0 12 12M0 12 12 0" Stroke="White" StrokeThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="back" Property="Background" Value="#22FFFFFF"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="back" Property="Background" Value="#44FFFFFF"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <!--#endregion-->
        <!--#region 登陆按钮样式 -->
        <ControlTemplate TargetType="Button" x:Key="LoginButtonTemplate">
            <Border Background="#007DFA" CornerRadius="5">
                <Grid>
                    <Border CornerRadius="4" Background="#22FFFFFF" Name="back" Visibility="Hidden"/>
                    <ContentControl Content="{TemplateBinding Content}"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    Foreground="{TemplateBinding Foreground}"/>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Visibility" Value="Visible" TargetName="back"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <!--#endregion-->
        <!--#region 用户名样式 -->
        <SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/>
        <SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FF7EB4EA"/>
        <SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF569DE5"/>
        <Style x:Key="UserNameTextBoxStyle" TargetType="{x:Type TextBox}">
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
            <Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="AllowDrop" Value="true"/>
            <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Border x:Name="border" Background="{TemplateBinding Background}" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="True"
                                CornerRadius="5">                            <!--边框变成小圆角-->
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="40"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="&#xe90e;" FontFamily="../Assets/Fonts/#iconfont" FontSize="20" 
                                           VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#DDD"/>
                                <ScrollViewer x:Name="PART_ContentHost" Grid.Column="1" 
                                          Focusable="false" 
                                          HorizontalScrollBarVisibility="Hidden" 
                                          VerticalScrollBarVisibility="Hidden"
                                          VerticalAlignment="Center" MinHeight="20"/>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
                        <Condition Property="IsSelectionActive" Value="false"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
        <!--#endregion-->
        <!--#region PassWord样式 -->
        <SolidColorBrush x:Key="TextBox.Static.Border1" Color="#FFABAdB3"/>
        <SolidColorBrush x:Key="TextBox.MouseOver.Border1" Color="#FF7EB4EA"/>
        <SolidColorBrush x:Key="TextBox.Focus.Border1" Color="#FF569DE5"/>
        <Style x:Key="PasswordBoxStyle" TargetType="{x:Type PasswordBox}">
            <Setter Property="PasswordChar" Value="●"/>
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
            <Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border1}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="AllowDrop" Value="true"/>
            <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type PasswordBox}">
                        <Border x:Name="border" Background="{TemplateBinding Background}" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="True"
                                CornerRadius="5">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="40"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="&#xe61d;" FontFamily="../Assets/Fonts/#iconfont" FontSize="20" 
                                           VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#DDD"/>
                                <ScrollViewer x:Name="PART_ContentHost" Focusable="false" 
                                              HorizontalScrollBarVisibility="Hidden" 
                                              VerticalScrollBarVisibility="Hidden"/>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border1}"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border1}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
                        <Condition Property="IsSelectionActive" Value="false"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
        <!--#endregion-->
        <!--#region 验证码样式 -->
        <SolidColorBrush x:Key="TextBox.Static.Border2" Color="#FFABAdB3"/>
        <SolidColorBrush x:Key="TextBox.MouseOver.Border2" Color="#FF7EB4EA"/>
        <SolidColorBrush x:Key="TextBox.Focus.Border2" Color="#FF569DE5"/>
        <Style x:Key="VlidationCodeTextBoxStyle" TargetType="{x:Type TextBox}">
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
            <Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border2}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="AllowDrop" Value="true"/>
            <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Border x:Name="border" Background="{TemplateBinding Background}" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="True"
                                 CornerRadius="5">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="40"/>
                                    <ColumnDefinition/>
                                    <ColumnDefinition Width="80"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="&#xe702;" FontFamily="../Assets/Fonts/#iconfont" FontSize="20" 
                                           VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#DDD"/>
                                <ScrollViewer x:Name="PART_ContentHost" Focusable="false" 
                                          HorizontalScrollBarVisibility="Hidden" 
                                          VerticalScrollBarVisibility="Hidden"/>
                                <Image Grid.Column="2"/>   <!--这里放验证码图片-->
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border2}"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border2}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
                        <Condition Property="IsSelectionActive" Value="false"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
        <!--#endregion-->
    </Window.Resources>
    <Border Margin="5" Background="White" CornerRadius="10">
        <Border.Effect>
            <DropShadowEffect Color="Gray" ShadowDepth="0" BlurRadius="5" Opacity="0.3" Direction="0"></DropShadowEffect>
        </Border.Effect>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="1.8*"/>
                <RowDefinition Height="3*"/>
                <RowDefinition Height="100"/>
                <!--60之外分成4.8份，上面占1.8份，下面占3份-->
            </Grid.RowDefinitions>
            <Border Background="#007DFA" CornerRadius="10,10,0,0" MouseLeftButtonDown="WinMove_LeftButtonDown"/>
            <Button VerticalAlignment="Top" HorizontalAlignment="Right" Width="40" Height="30" 
                    Template="{StaticResource CloseButtonTemplate}"
                    Command="{Binding CloseWindowCommand}"  
                    CommandParameter="{Binding ElementName=window}">
            </Button>
            <StackPanel VerticalAlignment="Bottom" Margin="0,0,0,30">
                <Border Width="80" Height="80" Background="White" VerticalAlignment="Center" HorizontalAlignment="Center" CornerRadius="50" Margin="0,0,0,20">
                    <Border.Effect>
                        <DropShadowEffect Color="#225533" ShadowDepth="0" BlurRadius="5" Opacity="0.3" Direction="0"></DropShadowEffect>
                    </Border.Effect>
                    <Border Width="90" Height="80" HorizontalAlignment="Center">
                        <Border.Background>
                            <ImageBrush ImageSource="../Assets/Images/640.gif"/>
                        </Border.Background>
                    </Border>
                </Border>
                <TextBlock Text="废柴快乐八卦聊天室" HorizontalAlignment="Center" Foreground="White" FontSize="18"/>
            </StackPanel>
            <Grid Grid.Row="1" Margin="20,10">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition MinHeight="23" Height="auto"/>
                </Grid.RowDefinitions>
                <TextBox Style="{DynamicResource UserNameTextBoxStyle}" Height="42" Text="{Binding LoginModel.UserName}" FontSize="16" Foreground="#555"/>
                <PasswordBox Style="{DynamicResource PasswordBoxStyle}" Grid.Row="1" Height="42" 
                             Password="123456" FontSize="16" Foreground="#555"/>
                <TextBox Style="{DynamicResource VlidationCodeTextBoxStyle}" Grid.Row="2" Height="42" Text="{Binding LoginModel.ValidationCode}"/>
                <Button Content="登    录" Grid.Row="3" Height="42" Foreground="White" FontSize="16" Template="{StaticResource LoginButtonTemplate}"/>
                <TextBlock Text="登录失败" Foreground="red" Grid.Row="4" FontSize="13" HorizontalAlignment="Center"
                           TextWrapping="Wrap" LineHeight="22"/>  <!--自动换行-->
            </Grid>
            <Grid Grid.Row="2" Margin="20,0">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="30"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Border BorderBrush="#DDD" BorderThickness="0,0,0,1" VerticalAlignment="Center"/>
                    <Border BorderBrush="#DDD" BorderThickness="0,0,0,1" VerticalAlignment="Center" Grid.Column="2"/>
                    <TextBlock Text="OR" Grid.Column="1" Foreground="#CCC" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Grid>
                <UniformGrid Columns="5" Grid.Row="1">
                    <UniformGrid.Resources>
                        <Style TargetType="TextBlock">
                            <Setter Property="Foreground" Value="#DDD"/>
                            <Setter Property="FontSize" Value="40"/>
                            <Setter Property="VerticalAlignment" Value="Center"/>
                            <Setter Property="HorizontalAlignment" Value="Center"/>
                            <Setter Property="FontFamily" Value="../Assets/Fonts/#iconfont"/>
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Foreground" Value="#007DFA"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </UniformGrid.Resources>
                    <TextBlock Text="&#xe65c;"/>
                    <Border/>
                    <TextBlock Text="&#xe74c;"/>
                    <Border/>
                    <TextBlock Text="&#xe65a;"/>
                </UniformGrid>
            </Grid>
        </Grid>
    </Border>
</Window>
文章标签：
C#
关键词：
wpf界面
夏诗曼CharmaineXia
目录
相关文章
小王老师呀
|
2月前
|
编解码 C# 数据库
C# + WPF 音频播放器 界面优雅，体验良好
【9月更文挑战第18天】这是一个用 C# 和 WPF 实现的音频播放器示例，界面简洁美观，功能丰富。设计包括播放/暂停按钮、进度条、音量控制滑块、歌曲列表和专辑封面显示。功能实现涵盖音频播放、进度条控制、音量调节及歌曲列表管理。通过响应式设计、动画效果、快捷键支持和错误处理，提升用户体验。可根据需求扩展更多功能。
小王老师呀
91 3
广州爱奇迪-伍华聪
|
3月前
|
开发框架 前端开发 JavaScript
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
广州爱奇迪-伍华聪
73 19
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(12) -- 使用代码生成工具Database2Sharp生成WPF界面代码
土木林森
|
3月前
|
C# UED 开发者
WPF动画大揭秘：掌握动画技巧，让你的界面动起来，告别枯燥与乏味！
【8月更文挑战第31天】在WPF应用开发中，动画能显著提升用户体验，使其更加生动有趣。本文将介绍WPF动画的基础知识和实现方法，包括平移、缩放、旋转等常见类型，并通过示例代码展示如何使用`DoubleAnimation`创建平移动画。此外，还将介绍动画触发器的使用，帮助开发者更好地控制动画效果，提升应用的吸引力。
土木林森
129 0
土木林森
|
3月前
|
容器 C# 开发者
XAML语言大揭秘：WPF标记的魅力所在，让你轻松实现界面与逻辑分离，告别复杂代码！
【8月更文挑战第31天】XAML提供了一种直观且易于维护的界面设计方式，使得开发者可以专注于逻辑和业务代码的编写，而无需关心界面细节。通过数据绑定、布局管理和动画效果等特性，XAML可以实现丰富的界面交互和视觉效果。在实际开发过程中，开发者应根据具体需求选择合适的技术方案，以确保应用程序能够满足用户的需求。希望本文的内容能够帮助您在WPF应用程序开发中更好地利用XAML语言。
土木林森
40 0
土木林森
|
3月前
|
数据处理 开发者 C#
WPF数据绑定实战：从零开始，带你玩转数据与界面同步，让你的应用程序更上一层楼！
【8月更文挑战第31天】在WPF应用开发中，数据绑定是核心技能之一，它能实现界面元素与数据源的同步更新。本文详细介绍了WPF数据绑定的概念与实现方法，包括属性绑定、元素绑定及路径绑定等技术，并通过示例代码展示了如何创建数据绑定。通过数据绑定，开发者不仅能简化代码、提高可维护性，还能提升用户体验。无论初学者还是有经验的开发者，都能从中受益，更好地掌握WPF数据绑定技巧。
土木林森
62 0
mingupup
|
3月前
|
存储 前端开发 C#
WPF/C#:更改界面的样式
WPF/C#:更改界面的样式
mingupup
40 0
编程乐趣
|
C# Windows
一个WPF开发的、界面简洁漂亮的音频播放器
一个基于C# + WPF开发的，界面外观简洁大方，操作体验良好的音频播放器。
编程乐趣
113 0
游客ywxcp53cgkqwi
|
C# C++
WPF界面无法正常显示（资源引用，如转换器），但程序正常运行
WPF界面无法正常显示（资源引用，如转换器），但程序正常运行
游客ywxcp53cgkqwi
485 0
WPF界面无法正常显示（资源引用，如转换器），但程序正常运行
游客ywxcp53cgkqwi
|
前端开发 C#
WPF MVVM 如何在 ViewModel 中关闭界面窗口
WPF MVVM 如何在 ViewModel 中关闭界面窗口
游客ywxcp53cgkqwi
560 0
广州爱奇迪-伍华聪
|
3月前
|
开发框架 缓存 前端开发
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(11) -- 下拉列表的数据绑定以及自定义系统字典列表控件
广州爱奇迪-伍华聪
105 15