C#WPF實戰出真汁03--登錄界面設計

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>

4、后臺業務邏輯代碼?

原創不易，打字截圖不易，走過路過，不要錯過，歡迎點贊，收藏，轉載，復制，抄襲，留言，動動你的金手指，早日實現財務自由！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/93374.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/93374.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/93374.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

前端css學習筆記6：盒子模型

前端css學習筆記6：盒子模型

本文為個人學習總結&#xff0c;如有謬誤歡迎指正。前端知識眾多&#xff0c;后續將繼續記錄其他知識點&#xff01; 目錄 前言 一、組成 ?編輯content padding border margin margin塌陷 margin合并 使用場景 標題與段落間距 卡片列表布局 二、內容溢出—overflo…
閱讀更多...
以下是對智能電梯控制系統功能及系統云端平臺設計要點的詳細分析，結合用戶提供的梯控系統網絡架構設計和系統軟硬件組成，分點論述并補充關鍵要點：

以下是對智能電梯控制系統功能及系統云端平臺設計要點的詳細分析，結合用戶提供的梯控系統網絡架構設計和系統軟硬件組成，分點論述并補充關鍵要點：

智能電梯控制系統功能及系統云端平臺設計要點一、梯控系統網絡架構設計服務本地化&#xff1a;電梯門禁服務器本地化部署&#xff1a;核心服務器部署在項目本地&#xff0c;確保數據安全、運維及時性&#xff0c;減少網絡依賴。需支持本地獨立運行&#xff0c;避免云端故障影響…
閱讀更多...
全球電商業財一體化：讓出海品牌實現“看得見的增長“

全球電商業財一體化：讓出海品牌實現“看得見的增長“

內外貿并行的數字化挑戰在數字經濟浪潮下&#xff0c;中國品牌呈現"雙輪驅動"增長態勢&#xff1a;一邊深耕天貓、京東、抖音等國內主流平臺&#xff0c;一邊通過Amazon、Tiktok、eBay、Temu等渠道拓展全球市場。然而&#xff0c;多平臺、多幣種、多地區的復雜運營環…
閱讀更多...
Nacos-5--Nacos2.x版本的通信原理

Nacos-5--Nacos2.x版本的通信原理

Nacos 2.x引入了gRPC作為其主要的通信協議&#xff0c;取代1.x版本中的HTTP長輪詢和UDP通信方式&#xff0c;顯著提升了性能、實時性和穩定性。gRPC是一個高性能、開源的遠程過程調用&#xff08;RPC&#xff09;框架&#xff0c;它基于HTTP/2標準設計&#xff0c;并使用Protoc…
閱讀更多...
如何以開發者的身份開發出比python更好的應用軟件？

如何以開發者的身份開發出比python更好的應用軟件？

作為一名擁有多年軟件架構經驗的開發者，我見證了Python從實驗室腳本語言成長為數字時代基礎設施的完整歷程。2008年我參與歐洲核子研究中心的粒子數據分析系統時，Python還是輔助工具，而今天它已成為驅動LIGO引力波探測的核心引擎——這種躍遷絕非偶然。 一、Python的巔峰應…
閱讀更多...
zynq代辦事項

zynq代辦事項

測試verilog按鍵 1.0 按鍵->隊列->串口 1.1 按鍵模塊ming_key包括 按下,松開,單擊,雙擊,長按,事件 1.2 隊列模塊ming_fifo存儲按鍵發出的[事件和事件戳] 1.3 頂層模塊TOP 輪詢 ming_fifo,將讀到的事件用串口封裝成數據包發給串口助手 測試zynq的M_AXI_GP0 1.0 用axi_li…
閱讀更多...
【Redis】Redis典型應用——緩存

【Redis】Redis典型應用——緩存

目錄 一.什么是緩存 二.使用Redis作為緩存 2.1.關系型數據庫的缺點 2.2.使用Redis作為MySQL的緩存 三. 緩存更新策略:識別熱點數據 3.1.定期更新 3.2.實時生成 四.緩存的使用注意事項 4.1.緩存預熱(Cache preheating) 4.2.關于緩存穿透 (Cache penetration) 4.3..關…
閱讀更多...
C#控制臺項目，鼠標點擊后線程會暫停

C#控制臺項目，鼠標點擊后線程會暫停

C#控制臺應用程序&#xff0c;點擊后就會暫停運行&#xff0c;但是我想讓它運行不受鼠標點擊的影響。 下面是程序演示&#xff1a;class Program{static void Main(string[] args){Console.WriteLine("Hello");int index 0;while(true){Console.WriteLine($"in…
閱讀更多...
云計算-實戰 OpenStack 私有云運維：服務部署、安全加固、性能優化、從服務部署到性能調優（含數據庫、內核、組件優化）全流程

云計算-實戰 OpenStack 私有云運維：服務部署、安全加固、性能優化、從服務部署到性能調優（含數據庫、內核、組件優化）全流程

簡介 此次圍繞OpenStack 私有云平臺的運維與開發展開，涵蓋了從核心服務安裝到深度優化的全流程實戰內容。文中詳細介紹了 OpenStack 各關鍵組件（如 Keystone、Glance、Nova、Neutron、Cinder 等）的安裝部署方法，包括使用腳本快速搭建服務、創建用戶、上傳鏡像、配置網絡等…
閱讀更多...
流水的 AI，鐵打的騰訊

流水的 AI，鐵打的騰訊

騰訊 昨天騰訊公布了 2025 年第二季度的業績報告。 就還是那只鵝&#xff0c;就還是那個超預期。 總營收 1845 億&#xff0c;同比增長 15%&#xff1b;凈利潤 556.3 億&#xff0c;同比增長 17%&#xff1b;經營利潤 692.5 億&#xff0c;同比增長 18%。 這里面最炸裂的&#…
閱讀更多...
再回C的進制轉換--負數

再回C的進制轉換--負數

概念 負數在計算機中以補碼的形式保存&#xff0c;以int類型的-15為例&#xff0c;求補碼先對-15取絕對值&#xff0c;然后對其按位取反(得到反碼)&#xff0c;然后加1&#xff0c;就可以得到其的補碼。 二進制的補碼 -15 (取絕對值)–> 15 --> (十六進制表示)0x000f (按…
閱讀更多...
項目績效域-筆記

項目績效域-筆記

一、項目管理績效域 1. 價值驅動的項目管理知識體系 1&#xff09;體系構成要素 核心轉變&#xff1a;從預測型生命周期&#xff08;計劃驅動&#xff09;轉向價值驅動體系&#xff0c;融合預測型和敏捷方法組成要素&#xff1a; 12個項目管理原則&#xff08;基礎&#xff09;…
閱讀更多...
怎么判斷晶振的好壞，有什么簡單的辦法

怎么判斷晶振的好壞，有什么簡單的辦法

今天來聊聊晶振的好壞判斷方法&#xff0c;3個步驟輕松搞定。外觀檢查&#xff1a;先看臉&#xff0c;再看腳晶振體積雖小&#xff0c;但問題往往寫在“臉上”。第一步&#xff0c;用肉眼觀察&#xff1a;裂痕與破損&#xff1a;晶振表面如果有明顯裂紋或缺口&#xff0c;大概率…
閱讀更多...
mac下載maven并配置，以及idea配置

mac下載maven并配置，以及idea配置

文章目錄下載配置settingsidea配置下載 https://maven.apache.org/download.cgi 我下的3.6.3 https://archive.apache.org/dist/maven/maven-3/3.6.3/binaries/ 配置 open ~/.zprofile添加&#xff0c;根據自己安裝路徑修改 export MAVEN_HOME/Users/xxx/tools/apache-mave…
閱讀更多...
基于機器視覺的車道線檢測與跟蹤關鍵技術研究

基于機器視覺的車道線檢測與跟蹤關鍵技術研究

摘 要 隨著自動駕駛技術的迅速發展&#xff0c;車道線檢測與跟蹤技術在提高道路安全性和駕駛自動化水平方面發揮著至關重要的作用。本文針對基于機器視覺的車道線檢測與跟蹤關鍵技術進行了深入研究&#xff0c;旨在提升車道線檢測的準確性與系統的實時響應能力。通過采用先進的…
閱讀更多...
flutter 跨平臺編碼庫 protobuf 工具使用

flutter 跨平臺編碼庫 protobuf 工具使用

1 安裝依賴 dependencies:protobuf: ^3.1.0 # 或最新版本flutter pub get安裝成功之后 1 lib 下創建文件夾 testProto 2 創建文件Student.proto 文件Student.proto 文件內容 syntax "proto3"; package example2;//導入其它proto文件 import "testProto/user.…
閱讀更多...
【網絡】網絡模型總結復盤

【網絡】網絡模型總結復盤

1.OSI七層模型是什么&#xff1f;答&#xff1a;是網絡通信分層模型&#xff0c;規范不同設備的通信流程應用層 如HTTP FTP文件傳輸 DNS域名解析 SSH遠程登錄 為用戶提高服務表示層 對數據進行格式轉換加密 如TLS/SSL會話層 負責建立會話 管理和終止會話傳輸層 提高數據的安全問…
閱讀更多...
vscode的ws環境，esp32s3連接wifi

vscode的ws環境，esp32s3連接wifi

注意大小寫&#xff0c;wsl&#xff08;也就是linux環境&#xff09;嚴格區分大小寫。有幫助記得訂閱專欄點贊&#xff0c;當前不定期持續更新。 一、文件夾格式 oled1/ # 項目根目錄 ├─ main/ # 主程序文件夾 │ ├─ main.c …
閱讀更多...
面試題：如何用Flink實時計算QPS

面試題：如何用Flink實時計算QPS

Flink 實時計算 QPS 面試題題目&#xff1a; 假設某互聯網應用日活用戶 100 萬&#xff0c;每天產生 1 億條數據&#xff08;日志/事件&#xff09;&#xff0c;要求使用 Apache Flink 實現實時計算系統的 QPS&#xff08;Queries Per Second&#xff09;&#xff0c;并考慮以下…
閱讀更多...
Pytest項目_day12（yield、fixture的優先順序）

Pytest項目_day12（yield、fixture的優先順序）

yield yield可以用作fixture的后置操作 yield的執行位置和scope的范圍設置有關 當我們將scope設置為function時&#xff0c;yield就會在方法結束時執行yield后的代碼yield還可以返回數據&#xff0c;類似于return&#xff0c;不過yield之后的代碼會執行&#xff0c;而return不會…
閱讀更多...
最新文章

Copyright @ 2022~2023