Create Modern WPF application using Material Design in XAML
And make it look attractive!
Let us go step by step on how to create a similar Login page :
Of course nobody can deny how Material Design can give your app a nice UI, well using MaterialDesignInXaml, now we can achieve the same with WPF.
Let us go step by step on how to create a similar Login page :
First thing we need to do is to create a WPF project, call it WPFMaterialDesign and install Material Design nuget package using :
Install-Package MaterialDesignThemes -Version 2.6.0
Next thing we need to do is add MaterialDesignThemes to our 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.Purple.xaml" /><ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Blue.xaml" /></ResourceDictionary.MergedDictionaries>
Now we are ready to start adding controls to build the Login.
Let us get rid of the window bar at the top by adding the following to our MainWindow.xaml :
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"mc:Ignorable="d"Height="370"Width="300"WindowStartupLocation="CenterScreen"ResizeMode="NoResize"WindowStyle="None"Background="#FF410A66"
Let us create a Grid to serve as layout for the other controls, StackPanel and a border :
<Grid><StackPanel ><Border Background="WhiteSmoke"Margin="10 20"CornerRadius="5"><StackPanel Margin="25">----------- We will add other controls here ---------</StackPanel></Border></StackPanel></Grid>
Now, inside the inner TextBlock, let us add a Label as follows :
<TextBlockStyle="{StaticResource MaterialDesignSubheadingTextBlock}"HorizontalAlignment="Center"Text="Please enter your credentials"></TextBlock>
One of the amazing controls, I used very often is the TextBox (PasswordBox) with a Floating Hint, let’s use two for the username and the password :
<TextBox Margin="20"materialDesign:HintAssist.Hint="Username"materialDesign:HintAssist.Foreground="Green"materialDesign:TextFieldAssist.UnderlineBrush="Green"Style="{StaticResource MaterialDesignFloatingHintTextBox}"/><PasswordBoxMargin="20"materialDesign:HintAssist.Hint="Password"materialDesign:HintAssist.Foreground="Green"materialDesign:TextFieldAssist.UnderlineBrush="Green"Style="{StaticResource MaterialDesignFloatingHintPasswordBox}" />
You can not really build a login view without a Login (and maybe a Register/Sign up) button :
<StackPanel Orientation="Horizontal"HorizontalAlignment="Center"><Button Margin="15 20"Content="Login"/></StackPanel><StackPanel Orientation="Horizontal"HorizontalAlignment="Center"><Label Content="You can always"Margin="0 0 0 0" /><Button Margin="-15 -5 0 0"Style="{StaticResource MaterialDesignFlatButton}"ToolTip="MaterialDesignFlatButton"Content="Register"/></StackPanel>
Hope it was useful and helpful !