WPF|分享一個登錄界面設計

来源:https://www.cnblogs.com/Dotnet9-com/archive/2022/05/13/16265299.html
-Advertisement-
Play Games

分享一個登錄界面,先看效果圖: 準備 文中使用到了一些圖標: 我們可以從 iconfont免費下載: 代碼簡單說明 請隨手創建一個WPF項目(.NET Framework、.NET 5\6\7皆可),使用tree /f命令看看最終的文件結構,和上面的截圖一致: C:. │ ModernLoginPa ...


分享一個登錄界面,先看效果圖:

準備

文中使用到了一些圖標:

我們可以從 iconfont免費下載:

代碼簡單說明

請隨手創建一個WPF項目(.NET Framework、.NET 5\6\7皆可),使用tree /f命令看看最終的文件結構,和上面的截圖一致:

C:.
│  ModernLoginPage.xaml
│  ModernLoginPage.xaml.cs
│
└─Images
        close.png
        email.png
        github.png
        google.png
        lock.png
        wechat.png

簡單吧,一個圖片目錄存放前面下載的圖標,一個xaml文件做登錄界面設計,xaml.cs做界面按鈕響應事件處理(實際項目建議使用Mvvm)。

看上面的截圖,重點說說這兩處:

  1. 左側的圖形控制項

公司有設計師,做這種圖片是很簡單的,沒有的時候,可以使用PolygonEllipse等實現一些簡單的效果,讓界面不要那麼單調:

<Canvas>
    <Polygon Points="0, 20 230,140 0,270" Fill="#4EB1B6" />
    <Polygon Points="100, 400 200,370 180,470" Fill="#4EB1B6" />
    <Ellipse Margin="250 450 0 0" Width="40" Height="40" Fill="#4EB1B6" />
    <Ellipse Margin="50 400 0 0" Width="20" Height="20" Fill="#4EB1B6" />
</Canvas>
  1. 右側的賬號文本框和密碼框

作者為了演示效果,賬號文本框使用的 一張圖片 + 一個標簽控制項 + 一個文本框 控制項組合實現:

<Border Padding="10" BorderThickness="1" BorderBrush="#acb0af" Margin="70 7" CornerRadius="5">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Image Source="/TerminalMACS.TestDemo;component/Views/ModernLogin/Images/email.png" Height="20" />
        <TextBlock x:Name="textEmail" MouseDown="textEmail_MouseDown" Text="郵箱"
                    Style="{StaticResource textHint}" />
        <TextBox x:Name="txtEmail" TextChanged="txtEmail_TextChanged" Style="{StaticResource textBox}" />
    </Grid>
</Border>
private void textEmail_MouseDown(object sender, MouseButtonEventArgs e)
{
    txtEmail.Focus();
}

private void txtEmail_TextChanged(object sender, TextChangedEventArgs e)
{
    if (!string.IsNullOrEmpty(txtEmail.Text) && txtEmail.Text.Length > 0)
    {
        textEmail.Visibility = Visibility.Collapsed;
    }
    else
    {
        textEmail.Visibility = Visibility.Visible;
    }
}

代碼比較簡單,.cs文件代碼:

  • 滑鼠點擊標簽時,將賬號文本框設置為焦點控制項,提高用戶體驗
  • 文本框中輸入賬號信息時 顯示|隱藏 標簽

密碼框邏輯同賬號文本框:

<Border Padding="10" BorderThickness="1" BorderBrush="#acb0af" Margin="70 7" CornerRadius="5">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Image Source="/TerminalMACS.TestDemo;component/Views/ModernLogin/Images/lock.png" Height="20" />
        <TextBlock x:Name="textPassword" MouseDown="textPassword_MouseDown" Text="密碼"
                    Style="{StaticResource textHint}" />
        <PasswordBox x:Name="txtPassword" PasswordChanged="txtPassword_TextChanged"
                        Style="{StaticResource textBox}" />
    </Grid>
</Border>
private void textPassword_MouseDown(object sender, MouseButtonEventArgs e)
{
    txtPassword.Focus();
}

private void txtPassword_TextChanged(object sender, RoutedEventArgs e)
{
    if (!string.IsNullOrEmpty(txtPassword.Password) && txtPassword.Password.Length > 0)
    {
        textPassword.Visibility = Visibility.Collapsed;
    }
    else
    {
        textPassword.Visibility = Visibility.Visible;
    }
}

參考:

本文代碼:ModernLogin


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 背景 在測試環境上遇到一個詭異的問題,部分業務邏輯會記錄用戶ID到資料庫,但記錄的數據會串,比如當前用戶的操作記錄會被其他用戶覆蓋, 而且這個現象是每次重啟後一小段時間內就正常 問題 線上程池內部使用了InheritableThreadLocal獲取用戶信息由於沒有及時remove,線程復用後,拿到 ...
  • “整篇文章較長,乾貨很多!建議收藏後,分章節閱讀。” 一、設計方案 整體設計方案思維導圖: 整篇文章,也將按照這個結構來講解。 若有重點關註部分,可點擊章節目錄直接跳轉! 二、項目背景 針對TOP250排行榜的數據,開發一套可視化數據大屏系統,展示各維度數據分析結果。 TOP250排行榜 三、電影爬 ...
  • OAuth2客戶端的配置參數非常多,雖然Id Server通過控制台可視化解決了創建OAuth2客戶端的問題。但是如何進一步降低OAuth2的使用難度,把創建的OAuth2客戶端轉化為配置成為了剛需,從技術角度上感覺也並不是很難實現。 我們先來看看效果,點擊配置生成按鈕即可直接生成Spring Se ...
  • 轉載:https://www.bilibili.com/video/BV1VQ4y1P7Fq?spm_id_from=333.1007.top_right_bar_window_history.content.click 概念 Stream是Java8 API的新成員,它允許以聲明性方式處理數據集合 ...
  • 嗨害嗨,作業來嘍 背包問題 01背包和完全背包問題都是一個背景下的:我有一個容量為M的背包,現在地上有N個物品,我跟個小偷似的眼裡只有i個物品的價值vi和重量wi,現在我要做的就是為了偷的東西更值錢拿走一些東西,使它們的價值是所有方案里最大的 01背包 背景如上,01背包就是我眼前的這些東西都是孤品 ...
  • 超鏈接(Hyperlink)可以看做是一個“熱點”,它可以從當前Web頁定義的位置跳轉到其他位置,包括當前頁的某個位置、Internet、本地硬碟或區域網上的其他文件,甚至跳轉到聲音、圖片等多媒體文件。瀏覽Web頁是超鏈接最普遍的一種應用,通過超鏈接還可以獲得不同形態的服務,如文件傳輸、資料查詢、電 ...
  • 1. 效果展示 先來直接欣賞效果: 2. 準備 創建一個WPF工程,比如站長使用 .NET 7 創建名為 Dashboard3 的WPF項目,添加一些圖片資源,項目目錄如下: 2.1 圖片資源 可在網站 iconfont 下載 關閉、最小化 圖標,用於視窗右上角顯示: 有看到美女圖片沒?在百度圖片或 ...
  • 一:什麼是時間旅行 簡而言之就是把程式的執行流拍成vlog,這樣就可以對 vlog 快進或者倒退,還可以分享給別人做進一步的分析,是不是想都不敢想。 很開心的是 windbg preview 版本中已經實現了,叫做 時間旅行調試 TTD,相比傳統的 靜態分析 不知道好多少倍。 為了能提起大家興趣,我 ...
一周排行
    -Advertisement-
    Play Games
  • 分組和樹形結構是不一樣的。 樹形結構是以遞歸形式存在。分組是以鍵值對存在的形式,類似於GroupBy這樣的形式。 舉個例子 ID NAME SEX Class 1 張三 男 1 2 李四 女 2 3 王二 男 1 當以Sex為分組依據時則是 Key Value 男 1 張三 男 1 3 王二 男 1 ...
  • NetCore中將SQLServer資料庫備份為Sql腳本 描述: 最近寫項目收到了一個需求, 就是將SQL Server資料庫備份為Sql腳本, 如果是My Sql之類的還好說, 但是在網上搜了一大堆, 全是教你怎麼操作SSMS的, 就很d疼! 解決方案: 通過各種查找資料, 還有一些老哥的幫助, ...
  • 我的Notion Clowd.Squirrel Squirrel.Windows 是一組工具和適用於.Net的庫,用於管理 Desktop Windows 應用程式的安裝和更新。 Squirrel.Windows 對 Windows 應用程式的實現語言沒有任何要求,甚至無需服務端即可完成增量更新。 ...
  • 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblog ...
  • 1. Netty源碼研究筆記(3)——Channel系列 依舊是通過先縱向再橫向的研究方法,在開篇中,我們發現不管是Sever還是Client,最終的啟動是通過調用channel的對應方法來完成的,而這個動作實際在channel綁定的eventLoop中執行。 接下來,我們繼續EchoSever、E ...
  • 大家好,今天給大家介紹一款輕量、快速、穩定可編排的組件式規則引擎框架LiteFlow。 一、LiteFlow的介紹 LiteFlow官方網站和代碼倉庫地址 官方網站:https://yomahub.com/liteflow Gitee托管倉庫:https://gitee.com/dromara/li ...
  • 我使用Spring AOP實現了用戶操作日誌功能 今天答辯完了,復盤了一下系統,發現還是有一些東西值得拿出來和大家分享一下。 需求分析 系統需要對用戶的操作進行記錄,方便未來溯源 首先想到的就是在每個方法中,去實現記錄的邏輯,但是這樣做肯定是不現實的,首先工作量大,其次違背了軟體工程設計原則(開閉原 ...
  • 《零基礎學Java》 繪製幾何圖形 Java可以分別使用 Graphics 和 Graphics2D 繪製圖形,Graphics類 使用不同的方法繪製不同的圖形(drawLine()方法可f以繪製線、drawRect()方法用於繪製矩形、drawOval()方法用於繪製橢圓形)。 Graphics類 ...
  • 本期教程人臉識別第三方平臺為虹軟科技,本文章講解的是人臉識別RGB活體追蹤技術,免費的功能很多可以自行搭配,希望在你看完本章課程有所收穫。 ...
  • 很多人都喜歡使用黑色的主題樣式,包括我自己,使用了差不多三年的黑色主題,但是個人覺得在進行視窗轉換的時候很廢眼睛。 比如IDEA是全黑的,然後需要看PDF或者WORD又變成白色的了,這樣來回切換導致眼睛很累,畢竟現在網頁以及大部分軟體的界面都是白色的。那麼還是老老實實的使用原來比較順眼的模式吧。 1 ...