點(diǎn)擊上方“Dotnet9”添加關(guān)注哦

Demo演示：

演示動(dòng)畫(huà)

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

1. 新建項(xiàng)目

站長(zhǎng)開(kāi)發(fā)環(huán)境：

• VS 2019企業(yè)版 16.70

• .NET 5 Preview 5

.NET 5 WPF 項(xiàng)目模板和 .NET Core 3.1 WPF 項(xiàng)目模板沒(méi)有區(qū)別，創(chuàng)建好項(xiàng)目后，NuGet 引入 MaterialDesignThemes 庫(kù)：

安裝MaterialDesignThemes庫(kù)

2.引入樣式

演示Demo就一個(gè)xaml文件和xaml.cs文件，為了方便后面收集WPF界面設(shè)計(jì)效果，統(tǒng)一放在了開(kāi)源項(xiàng)目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.控件動(dòng)畫(huà)效果

見(jiàn)上面GIF動(dòng)畫(huà)，登錄窗口加載時(shí)，用戶(hù)名輸入框、密碼輸入框、記住密碼、右側(cè)背景圖片等元素有動(dòng)畫(huà)效果，每個(gè)部分代碼結(jié)構(gòu)類(lèi)似，比如下面的用戶(hù)名輸入框代碼：

<!--#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-->

使用了開(kāi)源控件MD的TransitioningContent組件，其中TransitionEffect的Kind屬性設(shè)置控件動(dòng)畫(huà)方向。

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

點(diǎn)擊登錄時(shí)，打開(kāi)等待對(duì)話(huà)框（點(diǎn)擊時(shí)綁定了materialDesign:DialogHost.OpenDialogCommand），在等待對(duì)話(huà)框的打開(kāi)與關(guān)閉事件中做登錄邏輯處理。

private?async?Task<bool>?ValidateCreds() {//?模擬登錄//?你可以發(fā)送登錄信息到服務(wù)器，得到認(rèn)證回饋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){//?需要關(guān)閉登錄對(duì)話(huà)框并顯示主窗口eventArgs.Session.Close(true);}else{//?登錄失敗，設(shè)置false作為參數(shù)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();} }

等待對(duì)話(huà)框打開(kāi)事件中，模擬登錄邏輯。

等待對(duì)話(huà)框關(guān)閉事件中，做界面響應(yīng)信息。

5. 源碼下載

上面只貼了部分關(guān)鍵代碼，源碼已放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

關(guān)注Dotnet9，分享更多好文

如果本文對(duì)你有用，

不妨點(diǎn)個(gè)“在看”或者轉(zhuǎn)發(fā)朋友圈

????Github源碼查詢(xún)

總結(jié)

以上是生活随笔為你收集整理的.NET 5 开发WPF - 美食应用登录UI设计的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。