Demo演示：

你的時間寶貴，不想看啰嗦的文字，可直接拉到文末下載源碼！

1. 新建項目

站長開發環境：

• VS 2019企業版 16.70
• .NET 5 Preview 5

.NET 5 WPF 項目模板和 .NET Core 3.1 WPF 項目模板沒有區別，創建好項目后，NuGet 引入 MaterialDesignThemes 庫：

2.引入樣式

演示Demo就一個xaml文件和xaml.cs文件，為了方便后面收集WPF界面設計效果，統一放在了開源項目TerminalMACS.ManagerForWPF[1]中，所以控件樣式引用直接在FoodAppLoginView.xaml中添加：

<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.Amber.xaml" /><ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" /></ResourceDictionary.MergedDictionaries></ResourceDictionary> </Window.Resources>

3.控件動畫效果

見上面GIF動畫，登錄窗口加載時，用戶名輸入框、密碼輸入框、記住密碼、右側背景圖片等元素有動畫效果，每個部分代碼結構類似，比如下面的用戶名輸入框代碼：

<!--#region User name textblox--> <materialDesign:TransitioningContent Grid.Row="2" Margin="90,20,00,0" HorizontalAlignment="Left"><materialDesign:TransitioningContent.OpeningEffects><materialDesign:TransitionEffect Kind="SlideInFromLeft" Duration="0:0:2"/></materialDesign:TransitioningContent.OpeningEffects><StackPanel Style="{StaticResource setVisibilityBasedLogin}" Orientation="Horizontal"><materialDesign:PackIcon Kind="Account" Width="16" Height="16" VerticalAlignment="Center"Margin="0,5,10,0" Foreground="{Binding ElementName=NameTextBox, Path=BorderBrush}"/><TextBox x:Name="NameTextBox" Width="140" materialDesign:HintAssist.Hint="{markup:I18n {x:Static i18NResources:Language.FoodAppLoginView_UserName}}"Style="{StaticResource MaterialDesignFloatingHintTextBox}"/></StackPanel> </materialDesign:TransitioningContent> <!--#endregion-->

使用了開源控件MD的TransitioningContent組件，其中TransitionEffect的Kind屬性設置控件動畫方向。

4. 模擬登錄

登錄按鈕布局代碼：

<!--#region control panel--> <materialDesign:TransitioningContent Grid.Row="4" Margin="40,20,0,0"><materialDesign:TransitioningContent.OpeningEffects><materialDesign:TransitionEffect Kind="SlideInFromBottom" Duration="0:0:2"/></materialDesign:TransitioningContent.OpeningEffects><StackPanel Style="{StaticResource setVisibilityBasedLogin}" Orientation="Horizontal" HorizontalAlignment="Center"><CheckBox Content="{markup:I18n {x:Static i18NResources:Language.FoodAppLoginView_RememberMe}}"/><Button Style="{StaticResource MaterialDesignRaisedButton}"Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"materialDesign:ButtonAssist.CornerRadius="20"Width="80" Height="40" Margin="120,0,0,0"Content="{markup:I18n {x:Static i18NResources:Language.FoodAppLoginView_Login}}"/></StackPanel> </materialDesign:TransitioningContent> <!--#endregion-->

點擊登錄時，打開等待對話框（點擊時綁定了materialDesign:DialogHost.OpenDialogCommand），在等待對話框的打開與關閉事件中做登錄邏輯處理。

private async Task<bool> ValidateCreds() {// 模擬登錄// 你可以發送登錄信息到服務器，得到認證回饋await Task.Delay(TimeSpan.FromSeconds(2));Random gen = new Random(DateTime.Now.Millisecond);int loginProb = gen.Next(100);return loginProb <= 20; }private async void OpenCB_DialogOpened(object sender, MaterialDesignThemes.Wpf.DialogOpenedEventArgs eventArgs) {try{this.IsJustStarted = true;this.LoginStatusmsg = "";bool isLoggedIn = await ValidateCreds();if (isLoggedIn){// 需要關閉登錄對話框并顯示主窗口eventArgs.Session.Close(true);}else{// 登錄失敗，設置false作為參數eventArgs.Session.Close(false);}}catch (Exception){//throw;} }private void ClosingCB_DialogClosing(object sender, MaterialDesignThemes.Wpf.DialogClosingEventArgs eventArgs) {if (eventArgs.Parameter == null){return;}IsLoggedIn = (bool)eventArgs.Parameter;IsJustStarted = false;if(IsLoggedIn){this.LoginStatusmsg = I18nManager.Instance.Get(I18nResources.Language.FoodAppLoginView_Success).ToString();}else{this.LoginStatusmsg = I18nManager.Instance.Get(I18nResources.Language.FoodAppLoginView_Fail).ToString();} }

等待對話框打開事件中，模擬登錄邏輯。

等待對話框關閉事件中，做界面響應信息。

5. 源碼下載

上面只貼了部分關鍵代碼，源碼已放Github中。

參考視頻：WPF Food App Login UI Material Design [Speed Design][2]

Demo源碼：FoodAppLoginUI[3]

[1]TerminalMACS.ManagerForWPF: https://github.com/dotnet9/TerminalMACS.ManagerForWPF

[2]WPF Food App Login UI Material Design [Speed Design]: https://www.youtube.com/watch?v=1i5oWNvIYmo

[3]FoodAppLoginUI: https://github.com/dotnet9/TerminalMACS.ManagerForWPF/tree/master/src/TerminalMACS.TestDemo/Views/FoodAppLoginUI

總結

以上是生活随笔為你收集整理的html登录界面设计代码_.NET 5 开发WPF - 美食应用登录UI设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。