準(zhǔn)備文中使用到了一些圖標(biāo)：







我們可以從 iconfont免費(fèi)下載：










代碼簡(jiǎn)單說明請(qǐng)隨手創(chuàng)建一個(gè)WPF項(xiàng)目（.NET Framework、.NET 5/6/7皆可），使用tr" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > WPF|分享一個(gè)登錄界面設(shè)計(jì)

WPF|分享一個(gè)登錄界面設(shè)計(jì)

時(shí)間：2023-09-27 00:06:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-27 00:06:01 來源：網(wǎng)站運(yùn)營(yíng)

WPF|分享一個(gè)登錄界面設(shè)計(jì)：分享一個(gè)登錄界面，先看效果圖：










準(zhǔn)備

文中使用到了一些圖標(biāo)：







我們可以從 iconfont免費(fèi)下載：










代碼簡(jiǎn)單說明

請(qǐng)隨手創(chuàng)建一個(gè)WPF項(xiàng)目（.NET Framework、.NET 5/6/7皆可），使用tree /f命令看看最終的文件結(jié)構(gòu)，和上面的截圖一致：




C:.│ ModernLoginPage.xaml│ ModernLoginPage.xaml.cs│└─Images close.png email.png github.png google.png lock.png wechat.png簡(jiǎn)單吧，一個(gè)圖片目錄存放前面下載的圖標(biāo)，一個(gè)xaml文件做登錄界面設(shè)計(jì)，xaml.cs做界面按鈕響應(yīng)事件處理（實(shí)際項(xiàng)目建議使用Mvvm)。







看上面的截圖，重點(diǎn)說說這兩處：

  1. 左側(cè)的圖形控件
公司有設(shè)計(jì)師，做這種圖片是很簡(jiǎn)單的，沒有的時(shí)候，可以使用Polygon、Ellipse等實(shí)現(xiàn)一些簡(jiǎn)單的效果，讓界面不要那么單調(diào)：




<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. 右側(cè)的賬號(hào)文本框和密碼框
作者為了演示效果，賬號(hào)文本框使用的 一張圖片 + 一個(gè)標(biāo)簽控件 + 一個(gè)文本框 控件組合實(shí)現(xiàn)：




<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; }}代碼比較簡(jiǎn)單，.cs文件代碼：

密碼框邏輯同賬號(hào)文本框：




<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; }}


參考：

關(guān)鍵詞：界面,設(shè)計(jì)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉