Building a Silverlight 3 based RIA Image Management System - 1
page 5 of 7
by Xianzhong Zhu
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 36826/ 81

System Preview and Homepage Module

In this section, you will preview the main system interfaces so as to have a general understanding of the system.

System Preview

Figure 8 shows the main interface of the system. On this page, in addition to tell about the developing techniques and operational environment, the system also gave a brief description of the overall function. Finally, clicking the hyperlink at the bottom right corner of the page will start up your browser and navigate you to the author's blog page.

Figure 8-- the main interface of the system

Figure 9 shows the run-time screenshots of the image category management module. Through this page, you can browse, add, edit, and delete picture category data, as well as query your interested ones by specifying the picture category name in the Textbox control. This page represents the typical programming module that is associated with the backend data access techniques. Through this module, you can learn how to create data centric solutions under the Silverlight programming environment.

Figure 9-- the CRUD implementation of image category data

Figure 10 shows the run-time screenshot relating to upload and download image files, which is one of the most used parts in typical online image management systems. Note here, taking into account the system performance requirements, we've used the Silverlight-specific memory management technology, i.e. Isolated Storage, in the realization of this module.

Figure 10-- Upload and download snapshot

Image browser module is the most complex subsystem module, which is also a necessary part of any online image system. With the traditional image browsing techniques, through the use of multi-reference version of Silverlight technology, two-dimensional graphics and animation technology can be a very flexible way of browsing image data to display. Figure 11 gives the related snapshot, where you can click the thumbnail in the navigator bar to jump to appreciate your target image.

Figure 11-- Click the bottom thumbnail image to view it in the full-screen mode (non clicking happens now)

Nearly with all the necessary information in our mind, in the next section, we start to roll our sleeves to construct the application module by module.

Create the Sample Solution

Start Visual Studio 2008, open the "File" menu, and from the pop-up "New" sub-menu select "Project" option, then the "New Project" dialog box will appear. In the dialog box, select the template namely "Silverlight Application", enter the application name "S2PhotoAlbum", and click "OK" button.

As soon as you close the above dialog box, another dialog box "Add Silverlight Application" will appear before you. Here we select "ASP.NET Web Site" as the host project type.

From the beginning of the next section, we are going to create XAML pages and write the related background C# code.

Home and Welcome Page module

To simplify the problem and due to the time constraint, the image management system does not add a user registration and login module. Therefore, as soon as the system is activated, you can see the system's home page and welcome page module and directly use all the functionalities provided in the system. The home page and welcome page in the module are implemented through two Silverlight user controls, i.e. MainPage.xaml and Welcome.xaml.

(1) XAML Markup Code Page Design

First, we will explorer the layout design of the main page-- MainPage.xaml. Figure 12 gives the related snapshot (in Microsoft Expression Blend 3) for page MainPage.xaml.

Figure 12-- the design time snapshot of page MainPage.xaml

In this sample application, we simply use a few custom buttons on the left side of the page as navigation toolbar. The header at the top just shows a logo image, while the footer lies at the bottom line, and the most part on the right corresponds to a large and empty Grid control, used as a container control of the sub XAML pages (Silverlight controls).

Now, let's look at the related XAML markup code for page MainPage.xaml.

Listing 4-- the main XAML markup code for page MainPage.xaml

<!--Main Canvas-->
<Grid x:Name="_rootMain">
    <StackPanel x:Name="LayoutRoot" Orientation="Vertical" HorizontalAlignment="Center">
        <StackPanel x:Name="logoContainer" Height="100" Width="800" 
            Background="#FF423442" HorizontalAlignment="Center" >
            <Image Source="images/logo.jpg"></Image>
        <Grid x:Name="gridBody" Background="#FF574C5B" Height="450" 
                <RowDefinition />
                <ColumnDefinition Width="165" />
                <ColumnDefinition  Width="2" />
                <ColumnDefinition  Width="615" />
            <ListBox  x:Name="listCatalog" Margin="2,2,2,2"  Grid.Row="0" 
            Grid.Column="0" Background="#FF5C4141" Width="160" 
            HorizontalAlignment="Left" >
                <Button Height="32"  Width="130" x:Name="btnHome" Content="Home" 
                  Style="{StaticResource NewButtonTemplate}" FontSize="10.667" 
                  Background="#FFFFFFFF" Foreground="#FF06A500"/>
                <Button Height="32"  Width="130" x:Name="btnCata" 
                  Content="Category Management" 
                  Style="{StaticResource NewButtonTemplate}" 
                  FontSize="10.667" Foreground="#FF06A500"/>
                <Button Height="32" Width="130" x:Name="btnDownUp"  
                  Content="Upload &amp; Download"  
                  Style="{StaticResource NewButtonTemplate}" FontSize="10.667" 
                <Button Height="32"   Width="130" x:Name="btnBrow_Select" 
                  Content="Select Category"  
                  Style="{StaticResource NewButtonTemplate}" FontSize="10.667" 
                <Button Height="32"   Width="130" x:Name="btnBrow" 
                  Content="Image Browser"  
                  Style="{StaticResource NewButtonTemplate}" FontSize="10.667" 
                          Content="FullScreen/Window Switch"
                          Style="{StaticResource ToggleButtonStyle}" 
                         Visibility="Visible" Foreground="#FF00CBFF" />
            <basics:GridSplitter Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" 
            BorderThickness="1" BorderBrush="Blue" HorizontalAlignment="Stretch" 
            <Grid x:Name="gridRight"  Grid.Row="0" Grid.Column="2"  
                  Background="#FF5C4141"  Margin="2,2,2,2"  >
        <Canvas x:Name="footer" Height="50" Width="800" Background="#FF4C4C4C">
            <TextBlock Width="246.5" Text="By Xianzhong (WeiFang China) "  
                  FontSize="20" Foreground="#FF00FB75" 
                  HorizontalAlignment="Center" Height="32" 
                  Canvas.Top="18.909" Canvas.Left="288"/>
            <HyperlinkButton Style="{StaticResource CustHyperlink}" 
                  Content="HyperlinkButton" Height="51" TargetName="Contace me" 
                  FontSize="20" Width="144" HorizontalAlignment="Right" 
                  Foreground="#FF46FF00" Canvas.Left="648" VerticalAlignment="Top" 
                  Margin="0,0,0,0" Canvas.Top="5"/>

As is seen, the page itself is a user control (UserControl), at the top of which is a StackPanel control which contains an Image control. The Listbox control at the left side contains several Button controls used as the navigator bar. The footer part uses a Canvas control as the layout container.

Another thing to take notice of is that the above hyperlink control, button controls, full-screen/window switch control are all defined in the main application App.xaml within the Resources property. For more details about the Resources property in Silverlight apps, again please refer to MSDN.

Next, we will discuss the relevant background related programming.

(2) Background Code Design

Due to space limitations, we still will not give detailed explanation of all the code, but to focus on clarifying the whole process and crucial skills in Silverlight programming (for the other modules in this article are also the case).

In this section, we plan to explain the following three questions:

·         Sub .xaml pages switching principle inside a parent container control

·         Full-screen and window mode switching principle

·         Several .xaml pages switching principle

(a) Sub .Xaml Pages Switching Principle

When you are running the sample app you may notice that when you click the button controls on the left side a corresponding sub .xaml control will be loaded into the Grid control on the right side of the page and display the related contents. How to achieve this target?

In fact, the sub .xaml controls switching principle here is very simple. As is known, each page is a UserControl control in essence. So we can search through the control levels to find out the Grid control named gridRight. First, we can empty subset of its original control set, and then by invoking the Add() method we can fill the subset of control gridRight with our favorite .xaml control.

For example, the following code achieved the result to load the upload/download XAML page into the parent control gridRight.

Listing 5-- clear original sub controls and replace with new target .xaml control

void btnDownUp_Click(object sender, RoutedEventArgs e)
    gridRight.Children.Clear();//clear original sub controls
    //load current XAML control
    gridRight.Children.Add(new S2PhotoAlbum.XAMLs.UploadDownload());

(b) Full-Screen and Window Mode Switching Principle

Similar to other applications, in Silverlight applications, it is commonly required to provide the functionality to switch between the full-screen mode and window mode. In the Silverlight application, how to achieve it?

The principle here is still simple. We can resort to control ToggleButton which is defined in the namespace System.Windows.Controls.Primitives to meet our request.

As the parent control of controls CheckBox and RadioButton, ToggleButton provide the functionality to switch between two-state and three-state.

First of all, in the constructor of page MainPage, we create the following code:

Listing 6-- initialization for full-screen and window state switching related stuff

public Page()
//(others omitted)
    //specify the button Click event handler
    FullScreenButton.Click += new RoutedEventHandler(OnToggleFullScreen);
    //also setup the FullScreenChanged event handler
    if (Application.Current != null)
        Application.Current.Host.Content.FullScreenChanged += OnFullScreenChanged;
//(others omitted)

The following code corresponds to the above two event handlers.

Listing 7

// switch between the full-screen and window mode
private void OnToggleFullScreen(object sender, RoutedEventArgs e)
    Application.Current.Host.Content.IsFullScreen = 
// the FullScreenChanged event handler
private void OnFullScreenChanged(object sender, EventArgs e)
    //if app quits full-screen mode, then cancel checking button ToggleButton
    if (!Application.Current.Host.Content.IsFullScreen && 
      FullScreenButton != null)
        FullScreenButton.IsChecked = false;

Finally, let's pay special attention to the whole .xaml pages switching technique.

(c) Several .Xaml Pages Switching Principle

Our target here is that the current screen is one XAML page, and it should be replaced by another XAML page. How to achieve it?

When the user clicks on the "Image Browser" button, page MainPage.xaml should be turned into another XAML page--PhotoViewer.xaml which does not serves as a part of Page.xaml page like the a case discussed above.

Since currently Silverlight did not provide a similar mechanism to meet our request, we need to do it by ourselves referring to the case a solution used above and further generalize it. What we need to do is monitor the process of page switching. In this end, we designed three relevant classes to complete the above task:

·         TransitionCompletedEventArgs: responsible for monitoring the events of switching between the two old and new XAML controls.

·         TransitionBase: an abstract base class to take charge of XAML controls transition, whose derivation classes, such as FadeTransition, RotateTransition, WipeTransition and CompositeTransition) are able to finish the actual task of the old and new XAML pages transition (or switch) through class TransitionCompletedEventArgs.

·         NavigationHelper: a helper class, with the help of the above two classes, further encapsulates (or simplifies) switching manipulation between XAML pages.

Due to limited space, we are only going to discuss the realization of class NavigationHelper and detailed notes.

Listing 8-- source code for class NavigationHelper

public static class NavigationHelper
///variable root represents the root element of the XAML file
private static Grid root;
///assign value to variable root
///(here refer to the Grid control, which maybe varies in other cases)
static NavigationHelper()
    root = Application.Current.RootVisual as Grid;
///using specified dynamic transition effect achieve the target of switching 
///between the old and the new XAML controls 
public static void Navigate(TransitionBase transition, UserControl newPage)
    UserControl oldPage = root.Children[0] as UserControl;
    root.Children.Insert(0, newPage);
    transition.TransitionCompleted += transition_TransitionCompleted;
    transition.PerformTranstition(newPage, oldPage);
///make direct replacement (this simple case of above)
public static void Navigate(UserControl newPage)
    UserControl oldPage = root.Children[0] as UserControl;
///when the transition completes, the following event is triggered, where the old XAML is removed
private static void transition_TransitionCompleted(object sender, TransitionCompletedEventArgs e)

Finally, we take a look at how to use the above-mentioned classes to navigate the application pages.

Listing 9

void btnBrow_Click(object sender, RoutedEventArgs e)
    TransitionBase transition = new CompositeTransition(
        new FadeTransition(TimeSpan.FromSeconds(1)),
        new RotateTransition());
    NavigationHelper.Navigate(transition, new S2PhotoAlbum.XAMLs.PhotoViewer());

It is clear that the first line of code specifies the effect of dynamic transition, and using the static method Navigate of the helper class NavigationHelper to switch to the current page PhotoViewer using the specified transition effect.

In the last section, let's say a few words about the welcome page.

Welcome Page Design

As shown in Figure 8 given above, when the system successfully starts up, what appears before you is a simple system development introduction page. This page is named Welcome.xaml, which is loaded into page MainPage.xaml at the very beginning of the app is launched.

This welcome page is really simple and no more explanations shall be repeated.

View Entire Article

User Comments

Title: add to xml file   
Name: sir jone
Date: 2009-09-19 4:18:31 AM
hi dear ,
would you mind send me add to xml file from textbox sample
if you send my email is :
tnx so much .

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-02-26 8:28:57 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search