Click here to Skip to main content
15,893,487 members
Articles / Desktop Programming / WPF

Smart WPF Login Overlay (Windows 8 Style)

Rate me:
Please Sign up or sign in to vote.
5.00/5 (23 votes)
3 Dec 2012CPOL12 min read 135.2K   18.1K   76  
Login Overlay for WPF applications with a styling similar to the Windows 8 Login Screen.
<Window x:Class="SmartLoginOverlayDemo.Views.MainWindow" x:Name="RootWindow"
		  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
		  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
		  xmlns:wpfsl="http://schemas.softarcs.com/wpfsmartlibrary"
		  mc:Ignorable="d" wpfsl:WindowKeysHandling.EscapeClosesWindow="True"
		  d:DataContext="{d:DesignData Source='../DesignData/LoginSampleData.xaml'}"
		  WindowStartupLocation="CenterScreen" SizeToContent="WidthAndHeight" Background="#FF16499A"
		  Title="Smart Login Overlay Demo (by DotNetMastermind)" MinWidth="600" MinHeight="550">

	<Window.Resources>
		<ResourceDictionary>
			<ResourceDictionary.MergedDictionaries>
				<ResourceDictionary Source="/WPFSmartLibraryLight35;component/ResourceDictionaries/CommonRD.xaml" />
				<ResourceDictionary Source="../ResourceDictionaries/LoginDialogRD.xaml" />
			</ResourceDictionary.MergedDictionaries>
		</ResourceDictionary>
	</Window.Resources>

	<Grid x:Name="LayoutRoot">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>

		<Label Grid.Row="0" Grid.Column="0" Content="This" Background="{StaticResource GreenTileBrush}" />
		<Label Grid.Row="0" Grid.Column="1" Content="is" Background="{StaticResource TomatoTileBrush}" />
		<Label Grid.Row="0" Grid.Column="2" Content="the" Background="{StaticResource PurpleTileBrush}" />
		<Label Grid.Row="1" Grid.Column="0" Content="Main" Background="{StaticResource BlueTileBrush}" />
		<Label Grid.Row="1" Grid.Column="1" Content="Application" Background="{StaticResource PlumTileBrush}" />
		<Label Grid.Row="1" Grid.Column="2" Content="Screen" Background="{StaticResource DarkRedTileBrush}" />
		<Button x:Name="btnLock" Grid.Row="2" Grid.Column="1" Content="Lock" Click="btnLock_Click" Focusable="False" />
		<Button x:Name="btnChangeUser" Grid.Row="2" Grid.Column="2" Click="btnChangeUser_Click" Focusable="False">
			<TextBlock Text="Change User and Animation Type" TextWrapping="Wrap" TextAlignment="Center" />
		</Button>

		<!--~~~~~~~~~  Demo 1 (english labels and commanding "full mvvm - no code behind needed")  ~~~~~~~~~-->
		<wpfsl:SmartLoginOverlay x:Name="SmartLoginOverlayControl"
										 FullSpan="On" Background="#FF16499A"
										 UserName="{Binding UserName}"
										 Password="{Binding Password}"
										 AccessPassword="{Binding UserPassword}"
										 UserImageSource="{Binding UserImageSource}"
										 AdditionalUserInfo="{Binding EMailAddress}"
										 AdditionalSystemInfo="Locked" />

		<!--**** Try also setting the Background Property to this : Background="#FF182067"    ****-->

		<!--**** You can also use commands and validate the user data on your own. Try it ... ****-->
		<!-- Command="{Binding SubmitCommand}" CommandParameter="{Binding RelativeSource={RelativeSource Self} }" -->


		<!--~~~~~~~~~~~~~~~~~~~  Demo 2 (german labels and with event - no commanding)  ~~~~~~~~~~~~~~~~~~~-->
		<!--<wpfsl:SmartLoginOverlay x:Name="SmartLoginOverlayControl"
										 SubmitRequested="SmartLoginOverlay_SubmitRequested"
										 UserName="{Binding UserName}" Password="{Binding Password}"
										 UserImageSource="{Binding UserImageSource}" AdditionalUserInfo="{Binding EMailAddress}"
										 AdditionalSystemInfo="Gesperrt" Watermark="Kennwort" SubmitButtonTooltip="Übermitteln"
										 CapsLockInfo="Feststelltaste ist aktiviert" NoCredentialsInfo="Geben Sie ihre Anmeldeinformationen ein und versuchen Sie es erneut."
										 WrongCredentialsInfo="Das Kennwort ist falsch. Stellen Sie sicher, dass Sie das Kennwort für Ihr Konto verwenden. Sie können das Kennwort jederzeit unter 'meinkonto.de/kennwort/zurücksetzen' zurücksetzen." />-->

		<Label Grid.RowSpan="3" Grid.ColumnSpan="3" FontSize="9"
				 HorizontalAlignment="Center" VerticalAlignment="Bottom" Foreground="LightSkyBlue"
				 Content="Demo Data Information  =>  User: GingerBreadMan * Password: gingy1   /   User: BlueHairBeauty * Password: blue1" />
	</Grid>
</Window>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect SoftArcs
Germany Germany
Experience:
More than 20 years with software design, architecture and development. More than 9 years with the .NET Framework.

Preferences:
C#, .NET 2.0, .NET 3.5, .NET 4.0, .NET 4.5, WPF (3, 4 and 4.5), MVVM, XAML, Silverlight, Windows Phone, Windows 8 Apps, ASP.NET, WCF, T-SQL and especially GUI-Development and GUI-Design.

I would say I am a dotNet Developer with a keen affinity for developing and enriching user interfaces.

Comments and Discussions