My Master's Thesis Problems and solutions encountered…


Linking from User Control to User Control

As I showed in a recent post, it is possible to link from a Silverlight User Control to a Silverlight page using the Silverlight Navigation Framework. But at times you will need to link from a User Control to another User Control, and there you won't be able to use it.

In my case, I encoutered this situation because my application has three different user types, who each have their own Navigation Framework. They have this because they each have vastly different tasks to perform, and thus there's need of different menus to access different pages. But there is one task that they must all carry out: Before any user can access the application, they must log in. Of course, the login page is a User Control, so I needed to link the Login page to one of the Navigation Framework user pages, which are also User Controls.

Basically, you will need too add a small code snippet outside the Grid on the page you wish to link from (in my case, the login-page), and an event EventHandler to a button. In the EventHandler you specify which grids are visible, and which are not.

Below, I have posted a very simplified version of my MainPage.xaml, that I use for the login. Notice that there are two grids at the top, and that we have named the inner grid Login, and its Visibility is set to Visible:

<UserControl x:Class="QM_v1.MainPage"
xmlns:d="" mc:Ignorable="d"
xmlns:mc="" d:DesignHeight="437" d:DesignWidth="947">
<!--Background layout-->
<Grid x:Name="LayoutRoot">

   <Grid x:Name="Login" Background="White" Width="Auto" Height="auto" ShowGridLines="False" Visibility="Visible">

  <!-- Focus on the 'Enter' button -->

           <TextBox x:Name="Mail">
           <PasswordBox x:Name="Pass" >

            <StackPanel Grid.Row="2" Grid.Column="2" Orientation="Horizontal">
                <Button Content="Cancel" Click="Cancel_button"/>
                <Button Content="Enter" Click="Enter_button"/>



<!-- Important bit: -->
<local:Customer x:Name="Customer" Visibility="Collapsed"/>
<local:Supplier x:Name="Supplier" Visibility="Collapsed"/>
<local:ETS x:Name="ETS" Visibility="Collapsed"/>

Notice that the local:Customer bit is outside the second grid. In here you specify the name of the .xaml pages that you wish to link to, depending on which user logs in. Here I have just specified that I have three .xaml pages (Customer, supplier and ETS), and that each of these pages at this point in time are collapsed, ie. not visible/active.

When the user presses the Enter_Button you want your EventHandler to check who the user is, and depending on the outcome they should be directed to either customer.xaml, supplier.xaml or ETS.xaml. For simplicity, I have hardcoded the user name and password, but they should of course be gathered from a database.

private void Enter_button(object sender, RoutedEventArgs e)

   if (Mail.Text != "" && Pass.Password != "")//there is some content.

     if (Mail.Text == "" && Pass.Password == "customer")
        Customer.Visibility = System.Windows.Visibility.Visible; //customer = Name of .xaml page
         Login.Visibility = System.Windows.Visibility.Collapsed; //Login = inner grid at MainPage.xaml
     else if (Mail.Text == "" && Pass.Password == "supplier")
      Supplier.Visibility = System.Windows.Visibility.Visible;
      Login.Visibility = System.Windows.Visibility.Collapsed;
     else if (Mail.Text == "" && Pass.Password == "ets")
     ETS.Visibility = System.Windows.Visibility.Visible;
     Login.Visibility = System.Windows.Visibility.Collapsed;
     MessageBox.Show("Please enter correct e-mail and password.");
  MessageBox.Show("Please type your e-mail and password.", "Error", MessageBoxButton.OK);

Notice that the two things happen: 1) The users' own page is set to visible (Customer.Visibility = System.Windows.Visibility.Visible;) and the current page, the MainPages' Login-grid, is closed/collapsed (Login.Visibility = System.Windows.Visibility.Collapsed;).

VoilĂ !

Comments (0) Trackbacks (0)

No comments yet.

Leave a comment

seven × 4 =

No trackbacks yet.