After my last blog post on “Create a Login Window in WPF”, I had a lot of requests for how to create the same login screen in Silverlight 3. There are actually just a few changes that had to be made to get the same look in feel in Silverlight 3. Figure 1 shows what this login screen looks like under Silverlight.

Figure 1: A Login Screen in Silverlight 3 (SLLogin.jpg)

Let’s take a look at how to create this screen in Silverlight.

Create a Silverlight Application

The first step is to create a Silverlight Application using VS.NET 2008. Once you have this created, open the MainPage.xaml that is created by the template. For this particular User Control you will set a specific width and height on the Grid control.

<Grid x:Name="LayoutRoot" Width="500" Height="200">
</Grid>

Next you will create some resources to help style the various elements you will be using on this Silverlight page. I have set some specific height properties on the controls for this page. I did this so the controls would not look stretched out. There might be a better way to do this, but I am still just learning Silverlight!

<Grid.Resources>
  <Style x:Key="tbStyle"
         TargetType="TextBlock">
    <Setter Property="Margin"
            Value="4"></Setter>
  </Style>
  <Style x:Key="textBoxStyle"
         TargetType="TextBox">
    <Setter Property="Margin"
            Value="4"></Setter>
    <Setter Property="MinWidth"
            Value="200"></Setter>
    <Setter Property="HorizontalAlignment"
            Value="Left"></Setter>
  </Style>
  <Style x:Key="passStyle"
         TargetType="PasswordBox">
    <Setter Property="Margin"
            Value="4"></Setter>
    <Setter Property="MinWidth"
            Value="200"></Setter>
    <Setter Property="HorizontalAlignment"
            Value="Left"></Setter>
  </Style>
  <Style x:Key="buttonStyle"
         TargetType="Button">
    <Setter Property="Margin"
            Value="6"></Setter>
    <Setter Property="Padding"
            Value="4"></Setter>
    <Setter Property="MinWidth"
            Value="50"></Setter>
  </Style>
</Grid.Resources>

The Border

Now that you have created the Grid size and the resources to be used within the Grid you now create the look for the outside border of the window. A Border control is used to form the outside of this login screen. You will set the CornerRadius attribute to “10” to give the nice rounded corners. You can set the BorderBrush to “Gray” and the BorderThickness to “3”. To achieve the shadow effect on this window, you will use the Border.Effect and the DropShadowEffect. Below is the xaml for the Border control.

<Border CornerRadius="10"
        BorderBrush="Gray"
        BorderThickness="3"
        Background="Beige"
        Padding="4">
  <Border.Effect>
    <DropShadowEffect Color="Gray"
                      Opacity=".50"
                      ShadowDepth="16" />
  </Border.Effect>

   ...
   ...

</Border>

Using a Grid Layout

To place each of the login screen elements within the border, a Grid control is used with specific column and row definitions. There are three columns in this login screen. The first column is for the image of the key, the second is for the labels and the third is for the TextBox, PasswordBox and Button controls.

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="60" />
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

   ...
   ...

</Grid>

Placing the Key Image

The Key image that is in the upper left hand corner of this login screen is placed there by using a StackPanel control and an Image control. The StackPanel gives us just a little more control over the placement within the Grid. Notice the Grid.Column, Grid.Row and Grid.RowSpan attributes that are set on the StackPanel. The Grid.Row and Grid.Column specify in which row and column of the grid you wish to display the StackPanel. The Grid.RowSpan allows the key to float down over the next three rows of the Grid control. If you were to use a smaller or larger key image, then you would probably need to adjust this attribute accordingly. The Image control sets the source of its image to the Key.jpg file located in the Images folder. A drop shadow effect is applied to this image control just like you did with the Border control.

<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 Label

The large label across the top of the login screen is simply a Label control with the appropriate Grid.Row, Grid.Column and Grid.ColumnSpan attributes set for placement. A FontSize of 18 is applied to make the text appear larger than the other labels on this screen. A Margin of 10 is used to give us some spacing from the border of the grid.

<Label Grid.Column="1"
       Grid.Row="0"
       Grid.ColumnSpan="2"
       FontSize="18"
       Margin="10"
       Text="Please Login To Access This Application" />

The Login Data Controls

The controls that gather the user name and password should be fairly familiar to you if you have been doing any Silverlight development. Each control is placed into a specific row and column of the Grid control. Instead of a Label control like you use in WPF, a TextBlock control is used in Silverlight.

<TextBlock Style="{StaticResource tbStyle}"
           Grid.Column="1"
           Grid.Row="0"
           Grid.ColumnSpan="2"
           FontSize="18"
           Margin="10"
           Text="Please Login To Access This Application" />
<TextBlock Style="{StaticResource tbStyle}"
           Grid.Column="1"
           Grid.Row="1"
           Text="User Name" />
<TextBox Style="{StaticResource textBoxStyle}"
         Grid.Column="2"
         Grid.Row="1"
         Name="txtUserName" />
<TextBlock Style="{StaticResource tbStyle}"
           Grid.Column="1"
           Grid.Row="2">Password</TextBlock>
<PasswordBox Style="{StaticResource passStyle}"
             Grid.Column="2"
             Grid.Row="2"
             Name="txtPassword" />

Notice the use of the Style attribute to apply the styles defined in the Grid.Resources section. In WPF you can apply global styles to a target control. In Silverlight you have to assign the style individually to each control.

The Buttons

The two buttons at the bottom of the screen are placed into the last row of the Grid control 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’s Orientation attribute to Horizontal to allow the buttons to be centered within the StackPanel and to have the buttons appear side-by-side to each other.

<StackPanel Grid.Column="1"
            Grid.Row="3"
            Margin="10"
            HorizontalAlignment="Center"
            Orientation="Horizontal">
  <Button Style="{StaticResource buttonStyle}"
          Name="btnCancel"
          Content="Cancel">
    <Button.Effect>
      <DropShadowEffect Color="Gray"
                        Opacity=".50"
                        ShadowDepth="8" />
    </Button.Effect>
  </Button>
  <Button Style="{StaticResource buttonStyle}"
          Name="btnLogin"
          Content="Login">
    <Button.Effect>
      <DropShadowEffect Color="Gray"
                        Opacity=".50"
                        ShadowDepth="8" />
    </Button.Effect>
  </Button>
</StackPanel>

Summary

That is all there is to creating a nice looking login screen in Silverlight 3. Using the DropShadowEffect can add some spice to an otherwise flat-looking screen. I did not show any code for the login process as that will be dependent on your particular application. However, I hope this article gave you some ideas on how to layout screens in Silverlight 3.

NOTE: You can download the complete sample code at my website. http://www.pdsa.com/downloads. Choose Tips & Tricks, then "Silverlight 3 Login Screen" from the drop-down.

Good Luck With Your Coding,
Paul Sheriff

** SPECIAL OFFER FOR MY BLOG READERS **
Visit http://www.pdsa.com/Event/Blog for a free eBook on "Fundamentals of N-Tier".