locked
Handling mutiple pages in Silverlight 4 application ? RRS feed

  • Question

  • Hi friends,

    I want to create different pages in silverlight for my project like Registraion, Login, Home, etc. But  it'll be very problematic, If I create the individual silverlight application for every page and adding them to the project one by one. Can I create all the pages in one silverlight application and add them in my project.

    Saturday, February 25, 2012 10:36 PM

Answers

  • Atinesh,

    I made a simple sample for you that makes use of the frame control.

    https://skydrive.live.com/redir.aspx?cid=513b70517e544edb&resid=513B70517E544EDB!213&parid=513B70517E544EDB!131

    The concept is that you have a MainPage with a frame and you display pages within that frame.

    If you have any specific questions just let me know.

    ~Christine

    I keep getting called away for work, but I wanted to explain this a bit better.

    This was my set up.  No need to place your pages in one folder, I just do it to organize the project.

    I created a MainPage which contained nothing but a frame.

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    	x:Class="NavigatingSilverlight.MainPage"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<sdk:Frame x:Name="mainFrame" Source="/NavigatingSilverlight;component/Pages/Page1.xaml"/>
    	</Grid>
    </UserControl>

    I set that frame's "Source" to page 1.

    On page 1 I placed a button that when clicked navigates to page 2.

    <sdk:Page	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"	xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    	mc:Ignorable="d"
    	x:Class="NavigatingSilverlight.Page1" 
    	Title="Page1 Page"
    	d:DesignWidth="640" d:DesignHeight="480">
    	
    	<Grid x:Name="LayoutRoot" >
    		<toolkit:BubbleCremeTheme d:LayoutOverrides="Width, Height">
    			<Grid>
    				<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" Margin="0" Text="This is a sample log in page.  Clicking the button below will navigate the frame on the MainPage.xaml to page 2." Width="300"/>
    				<Button Content="Navigate To Page 2" VerticalAlignment="Bottom" Margin="220,0,199,135" Height="34" Click="goToPage2"/>
    			</Grid>
    		</toolkit:BubbleCremeTheme>
    	</Grid>
    </sdk:Page>

    and the code-behind for the click event...

    private void goToPage2(object sender, System.Windows.RoutedEventArgs e)
            {
    			Frame mainFrame = this.Parent as Frame;
    			mainFrame.Navigate(new Uri("/NavigatingSilverlight;component/Pages/Page2.xaml", UriKind.RelativeOrAbsolute));
            }

    Notice my use of the BubbleCreme Theme. :D

    Hope that explains it better.  And if you have time watch those videos I had suggested.  I think you will learn alot from them.  I know I have.

    ~Christine

    • Edited by Christine L. _ Saturday, February 25, 2012 11:46 PM
    • Marked as answer by Atinesh Thursday, March 1, 2012 6:00 PM
    Saturday, February 25, 2012 11:16 PM

All replies

  • Atinesh,

    I made a simple sample for you that makes use of the frame control.

    https://skydrive.live.com/redir.aspx?cid=513b70517e544edb&resid=513B70517E544EDB!213&parid=513B70517E544EDB!131

    The concept is that you have a MainPage with a frame and you display pages within that frame.

    If you have any specific questions just let me know.

    ~Christine

    I keep getting called away for work, but I wanted to explain this a bit better.

    This was my set up.  No need to place your pages in one folder, I just do it to organize the project.

    I created a MainPage which contained nothing but a frame.

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    	x:Class="NavigatingSilverlight.MainPage"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<sdk:Frame x:Name="mainFrame" Source="/NavigatingSilverlight;component/Pages/Page1.xaml"/>
    	</Grid>
    </UserControl>

    I set that frame's "Source" to page 1.

    On page 1 I placed a button that when clicked navigates to page 2.

    <sdk:Page	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    	xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"	xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    	mc:Ignorable="d"
    	x:Class="NavigatingSilverlight.Page1" 
    	Title="Page1 Page"
    	d:DesignWidth="640" d:DesignHeight="480">
    	
    	<Grid x:Name="LayoutRoot" >
    		<toolkit:BubbleCremeTheme d:LayoutOverrides="Width, Height">
    			<Grid>
    				<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" Margin="0" Text="This is a sample log in page.  Clicking the button below will navigate the frame on the MainPage.xaml to page 2." Width="300"/>
    				<Button Content="Navigate To Page 2" VerticalAlignment="Bottom" Margin="220,0,199,135" Height="34" Click="goToPage2"/>
    			</Grid>
    		</toolkit:BubbleCremeTheme>
    	</Grid>
    </sdk:Page>

    and the code-behind for the click event...

    private void goToPage2(object sender, System.Windows.RoutedEventArgs e)
            {
    			Frame mainFrame = this.Parent as Frame;
    			mainFrame.Navigate(new Uri("/NavigatingSilverlight;component/Pages/Page2.xaml", UriKind.RelativeOrAbsolute));
            }

    Notice my use of the BubbleCreme Theme. :D

    Hope that explains it better.  And if you have time watch those videos I had suggested.  I think you will learn alot from them.  I know I have.

    ~Christine

    • Edited by Christine L. _ Saturday, February 25, 2012 11:46 PM
    • Marked as answer by Atinesh Thursday, March 1, 2012 6:00 PM
    Saturday, February 25, 2012 11:16 PM
  • Hi Christine,

    Can we use master pages in silverlight applications.

    Do you have skype account mine is "atinesh22990"

    Sunday, February 26, 2012 8:54 AM
  • I would second what Christine said about using Frames and Pages. You should be able to find many examples with a web search.
    Monday, February 27, 2012 3:04 AM
    Moderator
  • Hi Christine,

    Can we use master pages in silverlight applications.

    Do you have skype account mine is *********

    Hey Atinesh,

    You don't create master pages like you would with Expression Web, but there is a way to set your styles and easily have the whole project make use of those styles. 

    This tutorial is an ideal example... http://www.microsoft.com/design/toolbox/school/modules.aspx?lid=3&mid=9

    I don't have video on my office computer so I'll send you a Skype invite tonight.  I've copied your account name and emailed it to myself, so you can go ahead and delete it from your above post for privacy. :) 

    ~Christine

    • Marked as answer by Atinesh Thursday, March 1, 2012 6:00 PM
    • Unmarked as answer by Atinesh Thursday, March 1, 2012 6:00 PM
    Monday, February 27, 2012 6:38 PM
  • Hi Christine,

    Thanks for the help. I've accepted your request on skype.

    See my next post.

    Atinesh

    Tuesday, February 28, 2012 9:23 PM