Silverlight Roles, Profile and Authentication Example Updated for Silverlight Beta2 Now with Visual State Manager (VSM) goodness!

  • Article

I am very excited about Silverlight Beta2 shipping recently...  I took a few minutes to update my recent sample "Accessing the ASP.NET Authentication, Profile and Role Service in Silverlight" post to Beta2.  While I was at it, I thought I'd take advantage of the new Visual State Manager (VSM) feature to simplify some of the UI. 

VSM is a new Beta2 feature of Silverlight (and soon WPF) that makes it much easier to define and transition between UI states in your application.  For more information  check out Christian Schormann’s VSM blog post and this great VSM screen cast and associated demo files which I stole from... ah, I mean "leveraged" in this example. 

Download:  Silverlight Beta2 Roles, Profile and Authentication Example Code (you need all the good stuff from https://silverlight.net/GetStarted/ to play)

 

Here are a few "states" now in the application.

Not logged in:

image

Transitioning to logged in...

image

Logged in as manager:

image

It is very simple to do this in blend... You simply use the new "States" tab in Blend to define a base state (highlighted below)  and a set of transition states...

image

For example, here is the logged in state...  the pattern I am using is basically to move Xaml elements on and off the screen

image

As you can see here, in the logged in state, the controls for logging in are simply moved off the screen.

image

 

Then the source code is super simple.  The key line is the first one in each function.  This where I programmatically tell Silverlight to change what state the UI should be in.   Much better than hiding a show a bunch of controls and very designer friendly.  Now I do not need to touch my code when some aspect of the design changes. 

 private void LogIn_Button_Click(object sender, RoutedEventArgs e)
{
    VisualStateManager.GoToState(this, "LoggedIn", true);
    AuthenticationServiceClient client = new AuthenticationServiceClient();
    client.LoginCompleted += new EventHandler<LoginCompletedEventArgs>(client_LoginCompleted);
    client.LoginAsync(UserName.Text, Password.Password, "", true, UserName.Text);
}

private void LogOut_Button_Click(object sender, RoutedEventArgs e)
{
    VisualStateManager.GoToState(this, "LoggedOut", true);
    WelcomeMessage.Text = "logging out..";
    AuthenticationServiceClient client = new AuthenticationServiceClient();
    client.LogoutCompleted += new EventHandler<System.ComponentModel.AsyncCompletedEventArgs>(client_LogoutCompleted);
    client.LogoutAsync();
}

 

Download:  Silverlight Beta2 Roles, Profile and Authentication Example Code (you need all the good stuff from https://silverlight.net/GetStarted/ to play).   Thanks to Hanu Kommalapati for help in porting to Silverlight beta2. 

I'd love to hear what you think!

 

Oh, while we are at it, Kathy updated her very popular controls sample page for Silverlight Beta2 as well. 

clip_image001

Silverlight Control Demo Sample

A sample of twenty-four Silverlight 2 controls that can be viewed live together with the source code used to drive the controls.

By clicking Download It you accept the license

View ItDownload It