当前位置：首页 > news >正文

C#WPF实战出真汁02--登录界面设计

news 2025/8/15 12:58:45

1、登录界面设计要点

简洁直观的布局
登录界面应避免复杂元素，突出核心功能。通常包含用户名/邮箱输入框、密码输入框、登录按钮及可选功能（如“记住我”“忘记密码”）。保持表单字段不超过5个，减少用户认知负担。

清晰的视觉层次
通过尺寸、颜色对比区分主次操作。登录按钮使用高对比色（如蓝色或绿色），次要操作（如注册链接）采用低调设计。错误提示需醒目但友好，避免仅用红色文字，可搭配图标辅助说明。

响应式与无障碍设计
确保界面适配不同设备，输入框尺寸足够大（最小48x48px便于触控）。密码输入框需提供“显示/隐藏”切换功能，提升可用性。

情感化微交互
登录成功时使用短暂动画（如勾选图标+渐变跳转），失败时通过微震动提示错误字段。加载状态显示进度条或骨架屏，避免静态“加载中”文字。

2、WPF 登录界面设计

布局与控件选择
使用 Grid 或 StackPanel 布局，包含以下控件：

TextBox 用于用户名输入（可添加 Watermark 提示）。
PasswordBox 用于密码输入（隐藏明文）。
CheckBox 可选“记住密码”功能。
Button 提交登录（绑定命令或事件）。
超链接控件（如“忘记密码”或“注册”）。

样式与美观性

使用 Border 和 CornerRadius 实现圆角输入框。
应用 LinearGradientBrush 实现背景渐变。
图标集成：通过 Image 控件添加用户/密码图标。
响应式设计：通过 ViewBox 或 RelativePanel 适配不同窗口尺寸。

数据绑定与验证

使用 INotifyPropertyChanged 实现双向绑定（如用户名/密码属性）。
输入验证：通过 IDataErrorInfo 或 ValidationRule 检查空输入或格式错误。
错误提示：用 ToolTip 或 TextBlock 显示验证消息。

3、UI界面设计

完成代码如下，这就不每行代码解析了：

<pu:WindowXx:Class="HQ.fResApp.LoginWindow"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:local="clr-namespace:HQ.fResApp"xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:pu="clr-namespace:Panuon.UI.Silver;assembly=Panuon.UI.Silver"Title=""Width="800"Height="450"pu:WindowXCaption.Header=" "pu:WindowXCaption.HideBasicButtons="True"BorderThickness="0"Loaded="WindowX_Loaded"MouseLeftButtonDown="MoveWindow_MouseLeftButtonDown"ResizeMode="NoResize"WindowStartupLocation="CenterScreen"mc:Ignorable="d"><Window.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" /><ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" /><ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" /><ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" /></ResourceDictionary.MergedDictionaries></ResourceDictionary></Window.Resources><Grid><Grid x:Name="signBlock"><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition Width="350" /></Grid.ColumnDefinitions><StackPanel Margin="20,-35,0,0"><LabelMargin="0,10"HorizontalAlignment="Left"VerticalAlignment="Top"Content="用户登录"FontFamily="Segoe UI Black"FontSize="20"Foreground="#2F4056" /><StackPanel Margin="0,45,0,0" Orientation="Horizontal"><materialDesign:PackIconWidth="30"Height="30"VerticalAlignment="Center"Foreground="#cccccc"Kind="Account" /><TextBoxx:Name="txtUName"Width="350"Margin="5"Padding="5,0,5,0"materialDesign:HintAssist.Foreground="#cccccc"materialDesign:HintAssist.Hint="输入您的登录账号"FontSize="15" /></StackPanel><StackPanel Margin="0,33,0,0" Orientation="Horizontal"><materialDesign:PackIconWidth="30"Height="30"VerticalAlignment="Center"Foreground="#cccccc"Kind="Lock" /><PasswordBoxx:Name="txtUPwd"Width="350"Margin="5"Padding="5,0,5,0"materialDesign:HintAssist.Hint="输入您的登录密码"FontSize="15" /></StackPanel><ButtonWidth="150"Height="50"Margin="-160,50,10,0"HorizontalAlignment="Center"materialDesign:ButtonAssist.CornerRadius="25"materialDesign:ShadowAssist.ShadowDepth="Depth2"Background="#5863f9"BorderBrush="#5863f9"Content="登录"FontFamily="Impact"FontSize="18"IsDefault="True" /><ButtonWidth="150"Height="50"Margin="230,-50,10,0"HorizontalAlignment="Center"materialDesign:ButtonAssist.CornerRadius="25"materialDesign:ShadowAssist.ShadowDepth="Depth2"Background="#5863f9"BorderBrush="#5863f9"Click="CloseWindow_Click"Content="退出"FontFamily="Impact"FontSize="18"IsDefault="True" /><Grid Margin="0,50,20,0"><CheckBoxx:Name="chkRemember"Margin="5,10"VerticalAlignment="Center"Content="记住密码"Cursor="Hand"FontSize="14"Foreground="#707070" /><TextBlockMargin="10"HorizontalAlignment="Right"VerticalAlignment="Center"Cursor="Hand"FontSize="14"Foreground="#5863f9"><Hyperlinkx:Name="btnForget"Click="BtnForget_Click"Foreground="#5863f9">忘记密码？</Hyperlink></TextBlock></Grid></StackPanel><StackPanelGrid.Column="1"Margin="0,-13,0,0"Background="#5863f9"Orientation="Vertical"><ButtonPadding="10"HorizontalAlignment="Right"VerticalAlignment="Top"Background="{x:Null}"BorderBrush="{x:Null}"Click="CloseWindow_Click"Cursor="Hand"ToolTip="关闭"><materialDesign:PackIcon Kind="Close" /></Button><StackPanel Margin="0,50,0,0"><TextBlockHorizontalAlignment="Center"FontFamily="Champagne &amp; Limousines"FontSize="48"FontWeight="Bold"Foreground="White"Text="蜀味正道" /><TextBlockWidth="280"Margin="0,50,0,0"HorizontalAlignment="Center"FontFamily="Champagne &amp; Limousines"FontSize="22"Foreground="White"Text="蜀味正道，您的专属管家！"TextAlignment="Center"TextWrapping="Wrap" /></StackPanel><StackPanel Margin="30,100,0,0" Orientation="Vertical"><StackPanel Orientation="Horizontal"><LabelMargin="10,0,0,0"VerticalAlignment="Center"Content="业务咨询："FontSize="15"Foreground="#F0F0F0" /><TextBlockx:Name="linkTel"VerticalAlignment="Center"FontFamily="Champagne &amp; Limousines"FontSize="15"Foreground="#F0F0F0"TextAlignment="Center"TextWrapping="Wrap" /></StackPanel><StackPanel Orientation="Horizontal"><LabelMargin="10,0,0,0"VerticalAlignment="Center"Content="邮箱地址："FontSize="15"Foreground="#F0F0F0" /><TextBlockx:Name="linkEmal"VerticalAlignment="Center"FontFamily="Champagne &amp; Limousines"FontSize="15"Foreground="#F0F0F0"TextAlignment="Center"TextWrapping="Wrap" /></StackPanel><StackPanel Orientation="Horizontal"><LabelMargin="10,0,0,0"VerticalAlignment="Center"Content="公司官网："FontSize="15"Foreground="#F0F0F0" /><TextBlockVerticalAlignment="Center"FontFamily="Champagne &amp; Limousines"FontSize="15"Foreground="#F0F0F0"TextAlignment="Center"TextWrapping="Wrap"><Hyperlinkx:Name="LinkWeb"Click="LinkWeb_Click"Foreground="#F0F0F0"><TextBlock x:Name="LinkWebTxt" /></Hyperlink></TextBlock></StackPanel></StackPanel></StackPanel></Grid></Grid>
</pu:WindowX>