WPF - Food App Login UI Design

Demo:

Your time is valuable, and you don't want to read verbose text. You can scroll directly to the end of the article to download the source code!

1. Create a New Project

Site admin's development environment:

• VS 2019 Enterprise 16.70
• .NET 5 Preview 5

The .NET 5 WPF project template is no different from the .NET Core 3.1 WPF project template. After creating the project, use NuGet to import the MaterialDesignThemes library:

2. Import Styles

The demo consists of only one xaml file and one xaml.cs file. To facilitate the later collection of WPF interface design effects, they are uniformly placed in the open-source project TerminalMACS.ManagerForWPF. Therefore, control style references are added directly in 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. Control Animation Effects

As seen in the GIF animation above, when the login window loads, elements such as the username input box, password input box, "Remember Me" checkbox, and the right-side background image have animation effects. Each part has a similar code structure, for example, the username input box code below:

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

It uses the TransitioningContent component from the MD open-source control, where the Kind property of TransitionEffect sets the animation direction of the control.

4. Simulate Login

Login button layout code:

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

When clicking the login button, a waiting dialog opens (it binds to materialDesign:DialogHost.OpenDialogCommand). Login logic is handled in the opening and closing events of the waiting dialog.

private async Task<bool> ValidateCreds()
{
    // Simulate login
    // You can send login info to the server and get authentication feedback
    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)
        {
            // Need to close the login dialog and show the main window
            eventArgs.Session.Close(true);
        }
        else
        {
            // Login failed, set false as parameter
            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();
    }
}

In the waiting dialog open event, login logic is simulated.

In the waiting dialog close event, the UI responds with the appropriate message.

5. Source Code Download

Only some key code is shown above. The full source code has been placed on GitHub.

• Reference video: WPF Food App Login UI Material Design [Speed Design]
• Demo source code: FoodAppLoginUI