Creating a reusable Silverlight login window – part 1

This post is an example showing how to create a reusable child window to allow a user to login to a silverlight application.

The first thing to do is add a new child window to your existing Silverlight project and name it Authenticate.xaml

Once we have added this item we can modify the xaml to meet our needs. I added a small message, a text box and a passsword box. I made use of the 2 buttons created in a child window by default. This is the xaml I ended up with.

<controls:ChildWindow xmlns:expressionDark="clr-namespace:System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.ExpressionDark"  x:Class="EMASolutions.CMS.Plugins.Silverlight.FolderBrowser.Authenticate"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    xmlns:themeing="clr-namespace:System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.Toolkit"

           Width="400" Height="300"
           Title="Authenticate">
    <Grid x:Name="LayoutRoot" Margin="2">

        <expressionDark:ExpressionDarkTheme>
            <StackPanel>
                <StackPanel Orientation="Vertical">

                    <Border Margin="2,2,2,2" Padding="2,2,2,2" Background="#333333" BorderThickness="1" BorderBrush="#000000" CornerRadius="2,2,2,2" >

                        <TextBlock Height="130" TextWrapping="Wrap" Foreground="#FFFFFF" Text="Please login">
                        </TextBlock>

                    </Border>

                    <TextBox Margin="2,2,2,2" themeing:ImplicitStyleManager.ApplyMode="Auto" Name="Username" Text="Enter username" />
                    <PasswordBox Margin="2,2,2,2" themeing:ImplicitStyleManager.ApplyMode="Auto"  Name="Password" PasswordChar="*" />
                    <StackPanel  Orientation="Horizontal" HorizontalAlignment="Right">
                        <Button x:Name="CancelButton" HorizontalAlignment="Right"   themeing:ImplicitStyleManager.ApplyMode="Auto" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" Margin="2,2,2,2" />
                        <Button x:Name="OKButton"  HorizontalAlignment="Right"  themeing:ImplicitStyleManager.ApplyMode="Auto" Content="Login" Click="OKButton_Click" Width="75" Height="23" Margin="2,2,2,2"  />
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </expressionDark:ExpressionDarkTheme>
    </Grid>
</controls:ChildWindow>

This gives us a child window that looks like the image below.

Next we need to open the code behind for this file. In this file we have added some actions to execute in various scenarios. The code looks like so.

public partial class Authenticate : ChildWindow
{

    #region "Properties"

    private readonly AuthenticationContext _authContext = new AuthenticationContext();

    public Action BeforeAuthentication { get; set; }
    public Action OnAuthenticated { get; set; }
    public Action AfterAuthentication { get; set; }
    public Action OnFailedAuthentication { get; set; }

    public bool IsAuthenticated
    {
        get { return (bool)GetValue(IsAuthenticatedProperty); }
        set { SetValue(IsAuthenticatedProperty, value); }
    }

    public static readonly DependencyProperty IsAuthenticatedProperty =
        DependencyProperty.Register("IsAuthenticated", typeof(bool), typeof(Authenticate), new PropertyMetadata(false));

    #endregion

    public Authenticate()
    {
        InitializeComponent();
    }

    private void OKButton_Click(object sender, RoutedEventArgs e)
    {
        DialogResult = true;
        if (BeforeAuthentication != null) BeforeAuthentication();
        _authContext.Authenticate(
            Username.Text, Password.Password,
               delegate(InvokeOperation<Boolean> inv)
               {
                   IsAuthenticated = inv.Value;
                   if (inv.Value)
                   {
                       IsAuthenticated = true;
                       if (OnAuthenticated != null)
                           OnAuthenticated();
                   }
                   else
                   {
                       if (OnFailedAuthentication != null)
                           OnFailedAuthentication();
                   }
               },
            null);
        if (AfterAuthentication != null) AfterAuthentication();
    }

    private void CancelButton_Click(object sender, RoutedEventArgs e)
    {
        DialogResult = false;
    }
}

In this example I call out to a RIA service to validate the username and password supplied by the user. Obviously this can be replaced to use other methods.

You can then make use of this child window in your xaml user control with code similar to the following.

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    var login = new Authenticate {Title = "Authenticate"};
    if (!login.IsAuthenticated)
        login.Show();

    login.BeforeAuthentication =
        () =>
         {
             Dispatcher.BeginInvoke(
                 () =>
                 {
                    IsBusy = true;
                 });
         };

    login.OnAuthenticated =
        ()=>
        {
            _folderContext.Load(
                _folderContext.GetFoldersQuery(),
                LoadBehavior.RefreshCurrent,
                delegate
                    {
                        Dispatcher.BeginInvoke
                            (
                            () =>
                                {
                                    folders.ItemsSource =
                                        _folderContext.Folders.Where(f => f.ParentId == 0);
                                    IsBusy = false;
                                }
                            );
                    },
                null);
        };

    login.OnFailedAuthentication = () => { login.Show(); };

}

In this example, we set a busy indicator using the BeforeAuthentication action, then using the OnAuthentication action we load some data and finally we wire up the OnFailedAuthentication to show the login window again.

This example is by no means perfect, but its a start, it only really works well in the context of simple Silverlight projects consisting of 1 user control. In a future post I’m going to expand on this and show it working in a more complex situation.

Advertisement