WPF创建登陆画面

Create a LoginWindow in WPF Most business applications require some sort of security system. You can always use Windows Authentication to authenticate a user, but sometimes you might want your own authentication scheme. When you do, you will need to create a login screen for your user to enter her login id and password. This article will explore creating a login window in WPF.The UI for your login screen can contain any images and controls that you would like. In Figure 1 you can see a sample login screen that has an image of a key, a large title label across the top, two labels, a text box, a password box and twobutton controls. You can also make the border of the window rounded so that thereis no close, minimize or maximize button and no title bar.Figure 1: A Login Screen (WPFLogin.jpg)Of course this is just one version of a login screen but let’s take a look at how thisis put together.Create a Login Window in WPFCreating the WindowTo start, you need to create a window with no border and can be made into anyshape you want. To do this you will set a few different attributes. The WindowStyleattribute normally allows you to set a single border, three-D border, or a ToolWindow border. Setting this attribute to None will eliminate the border. TheShowInTaskbar attribute is optional, but if you are building a login screen youprobably won’t want this window to show up in the Task Bar as it is going to bemodal style form. The next two attributes, AllowsTransparency and Backgroundwork together. You must set AllowsTransparency to True to allow the Backgroundto be set to Transparent. If you do not set these two attributes, then your border willstill show up. Below is the xaml for this window.<Window ...WindowStartupLocation="CenterScreen"AllowsTransparency="True"ShowInTaskBar=FalseBackground="Transparent"WindowStyle="None"SizeToContent="WidthAndHeight"FocusManager.FocusedElement="{Binding ElementName=txtUserName}">......</Window>There are three additional attributes that are set on this window. TheWindowStartupLocation attribute is set to “CenterScreen” to ensure that the loginscreen is displayed in the middle of the screen when it is shown. You also set theSizeToContent attribute to WidthAndHeight to just take as much room for thiswindow as the controls need that are contained within this window. TheFocusManager.FocusedElement attribute is data-bound to the textbox control nextto the User Name label. This tells WPF to place the cursor in this textbox once thescreen is displayed.The BorderNow that you have the Window xaml defined you now can create the look for theoutside border of the window. A Border control is used to form the outside of thislogin screen. You will set the CornerRadius attribute to “10” to give the nicerounded corners. You can set the BorderBrush to “Gray” and the BorderThicknessto “3”. You also want to give this border a nice wide Margin to allow room for the2 Create a Login Window in WPFCopyright © 2009 by PDSA, Inc.All rights reserved. Reproduction is strictly prohibited.Using a Grid Layout DropShadowEffect that we add to the outside of this border. If you do not do this,then the drop shadow will be chopped off. To achieve the shadow effect on thiswindow, you will use the new Border.Effect and the DropShadowEffect that wasadded in WPF 3.5. This drop shadow effect is drawn using the GraphicalProcessing Unit (GPU) instead of being drawn using software. Thus drawing dropshadows is much more performant than in previous versions of WPF.<Border CornerRadius="10"BorderBrush="Gray"BorderThickness="3"Background="Beige"Margin="24"Padding="4"><Border.Effect><DropShadowEffect Color="Gray"Opacity=".50"ShadowDepth="16" /></Border.Effect>......</Border>Using a Grid LayoutTo place each of the login screen elements within the border, a Grid control is usedwith specific column and row definitions. There are three columns in this loginscreen. One for the image of the key, one for the labels and one for the TextBox,PasswordBox and Button controls.Create a Login Window in WPF 3 Copyright © 2009 by PDSA, Inc.All rights reserved. Reproduction is strictly prohibited.Create a Login Window in WPF<Grid><Grid.ColumnDefinitions><ColumnDefinition Width="60" /><ColumnDefinition Width="100" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition /><RowDefinition /><RowDefinition /><RowDefinition /></Grid.RowDefinitions>......</Grid>Placing the Key ImageThe Key image that is in the upper left hand corner of this login screen is placedthere by using a StackPanel control and an Image control. The StackPanel givesus just a little more control over the placement within the Grid. Notice theGrid.Column, Grid.Row and Grid.RowSpan attributes that are set on theStackPanel. The Grid.Row and Grid.Column specify in which row and column ofthe grid you wish to display the StackPanel. The Grid.RowSpan allows the key tofloat down over the next three rows of the Grid control. If you were to use a smalleror larger key image, then you would probably need to adjust this attributeaccordingly. The Image control sets the source of its image to the Key.jpg filelocated in the /Images folder. A drop shadow effect is applied to this image controljust like you did with the Border control.4 Create a Login Window in WPFCopyright © 2009 by PDSA, Inc.All rights reserved. Reproduction is strictly prohibited.The Large Title Label <StackPanel Grid.Column="0"Grid.Row="0"Grid.RowSpan="3"><Image Name="imgKey"Margin="8"Source="/Images/Key.jpg"><Image.Effect><DropShadowEffect Color="Gray"Opacity=".50"ShadowDepth="8" /></Image.Effect></Image></StackPanel>The Large Title LabelThe large label across the top of the login screen is simply a Label control with theappropriate Grid.Row, Grid.Column and Grid.ColumnSpan attributes set forplacement. A FontSize of 18 is applied to make the text appear larger than theother labels on this screen. A Margin of 10 is used to give us some spacing fromthe border of the grid.<Label Grid.Column="1"Grid.Row="0"Grid.ColumnSpan="2"FontSize="18"Margin="10">Please Login To Access This Application</Label>The Login Data ControlsThe controls that gather the user name and password should be fairly familiar toyou if you have been doing any WPF at all. Each control is placed into a specificrow and column of the Grid control. Notice the use of the Tooltip attribute on theTextBox and the PasswordBox control. This gives the user an idea of what to putinto each control if they hover their mouse over that control.Create a Login Window in WPF 5 Copyright © 2009 by PDSA, Inc.All rights reserved. Reproduction is strictly prohibited.Create a Login Window in WPF<Label Grid.Column="1"Grid.Row="1">User Name</Label><TextBox Grid.Column="2"Grid.Row="1"ToolTip="Enter Your User Name"Name="txtUserName" /><Label Grid.Column="1"Grid.Row="2">Password</Label><PasswordBox Grid.Column="2"Grid.Row="2"ToolTip="Enter Your Password"Name="txtPassword" />The ButtonsThe two buttons at the bottom of the screen are placed into the last row of the Gridcontrol and into the second column of the grid by wrapping them into a StackPanel.The StackPanel has its HorizontalAlignment attribute set to Center and it’sOrientation attribute to Horizontal to allow the buttons to be centered within theStackPanel and to have the buttons appear side-by-side to each other.6 Create a Login Window in WPFCopyright © 2009 by PDSA, Inc.All rights reserved. Reproduction is strictly prohibited.Writing the Code for the Login Screen <StackPanel Grid.Column="2"Grid.Row="3"Margin="10"HorizontalAlignment="Center"Orientation="Horizontal"><Button Name="btnCancel"IsCancel="True"Content="Cancel"Click="btnCancel_Click"><Button.Effect><DropShadowEffect Color="Gray"Opacity=".50"ShadowDepth="8" /></Button.Effect></Button><Button Name="btnLogin"IsDefault="True"Content="Login"Click="btnLogin_Click"><Button.Effect><DropShadowEffect Color="Gray"Opacity=".50"ShadowDepth="8" /></Button.Effect></Button></StackPanel>There are two special attributes that are set on these buttons. The IsCancelattribute is set to true on the Cancel button. Setting this attribute to true will fire theclick event procedure on the Cancel button if the user presses the Escape key. TheIsDefault attribute is set to true on the on the Login button. Setting this attribute totrue will fire the click event procedure on the Login button if the user presses theEnter key.Writing the Code for the Login ScreenIn each of the click event procedures you will need to close the screen. In theCancel click event procedure you will set the DialogResult property of the screen toa false value. This will inform the calling procedure that the user clicked on theCancel button on this screen. In the Login click event procedure you will set theDialogResult property of the screen to a true value. This informs the callingprocedure that the user clicked on the Login button and was authenticated. I amleaving it up to you to write the code for authenticating the user. Here is the codefor the Cancel event procedure.Create a Login Window in WPF 7 Copyright © 2009 by PDSA, Inc.All rights reserved. Reproduction is strictly prohibited.Create a Login Window in WPFC#private void btnCancel_Click(object sender, RoutedEventArgs e){DialogResult = false;this.Close();}Visual BasicPrivate Sub btnCancel_Click(ByVal sender As System.Object, _ByVal e As System.Windows.RoutedEventArgs)DialogResult = FalseMe.Close()End SubAnd, here is the code for the Login event procedure.C#private void btnLogin_Click(object sender, RoutedEventArgs e){// Write code here to authenticate user// If authenticated, then set DialogResult=trueDialogResult = true;this.Close();}Visual BasicPrivate Sub btnLogin_Click(ByVal sender As System.Object, _ByVal e As System.Windows.RoutedEventArgs)DialogResult = TrueMe.Close()End SubDisplaying the Login ScreenAt some point when your application launches, you will need to display your loginscreen modally. Below is the code that you would call to display the login form(named frmLogin in my sample application). This code is called from the mainapplication form, and thus the owner of the login screen is set to “this”. You thencall the ShowDialog method on the login screen to have this form displayedmodally. After the user clicks on one of the two buttons you need to check to seewhat the DialogResult property was set to. The DialogResult property is a nullabletype and thus you first need to check to see if the value has been set.8 Create a Login Window in WPFCopyright © 2009 by PDSA, Inc.All rights reserved. Reproduction is strictly prohibited.Displaying the Login Screen C#private void DisplayLoginScreen(){frmLogin frm = new frmLogin();frm.Owner = this;frm.ShowDialog();if (frm.DialogResult.HasValue && frm.DialogResult.Value)MessageBox.Show("User Logged In");elsethis.Close();}Visual BasicPrivate Sub DisplayLoginScreen()Dim frm As New frmLogin()frm.Owner = Mefrm.ShowDialog()If frm.DialogResult.HasValue And frm.DialogResult.Value ThenMessageBox.Show("User Logged In")ElseMe.Close()End IfEnd SubCreate a Login Window in WPF 9 Copyright © 2009 by PDSA, Inc.All rights reserved. Reproduction is strictly prohibited.Create a Login Window in WPFSummaryCreating a nice looking login screen is fairly simple to do in WPF. Using theDropShadowEffect can add a nice finished look to not only your form, but imagesand buttons as well. Using a border-less window is a great way to give a customlook to a login screen or splash screen. The DialogResult property on WPFWindows allows you to communicate back to the calling routine what happened onthe modal screen. I hope this article gave you some ideas on how to create a loginscreen in WPF.10 Create a Login Window in WPFCopyright © 2009 by PDSA, Inc.All rights reserved. Reproduction is strictly prohibited.。