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

<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,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"
                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]

Demo原始碼：FoodAppLoginUI