locked
i want to put usercontrol opening closing tags in navigation page... RRS feed

  • Question

  • hi to all... i am new to SILVERLIGHT... and i am stuck in a scenario... please help me out...

    i have a navigation page, user control and contentcontrol...

    i made a usercontrol, in which i have added a stylish revolving navigation strip... now my purpose is that... when i click on any of that icon in navigation strip... i want to show its relevant page in contentcontrol... suppose there are five icons in navigation... that are placed in usercontrol's navigation strip... when i click on [add new item] icon... its relevant page opens up just below that navigation strip... in contentcontrol...

    now i wonder where would i place usercontrol and contentcontrol... i tried to put in navigation page, but it wont work... :(

    Thursday, August 11, 2011 8:14 PM

Answers

  • Hi Dizki,

    Here a simple complete sample: There are four Pages, FirstPage, SecondPage, ThirdPage and FourthPage. FirstPage call the other by individual button, and each button is pressed, related page is coming to the contentBorder of FirstPage.

    XAML FirstPage:

    <navigation:Page x:Class="HomePlanet.Views.FirstPage" 
               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"
               mc:Ignorable="d"
               xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
               d:DesignWidth="640" d:DesignHeight="480"
               Title="FirstPage Page">
        <Grid x:Name="LayoutRoot">
            <Border BorderBrush="Silver" BorderThickness="1" Margin="43,83,46,40" Name="ContentBorder" />
            <Button Content="Second Page" Height="23" HorizontalAlignment="Left" Margin="52,30,0,0" Name="SecondPageButton" VerticalAlignment="Top" Width="102" Click="SecondPageButton_Click" />
            <Button Content="Third Page" Height="23" HorizontalAlignment="Left" Margin="187,30,0,0" Name="ThirdPageButton" VerticalAlignment="Top" Width="115" Click="ThirdPageButton_Click" />
            <Button Content="Fourth Page" Height="23" HorizontalAlignment="Left" Margin="336,30,0,0" Name="FourthPageButton" VerticalAlignment="Top" Width="110" Click="FourthPageButton_Click" />
        </Grid>
    </navigation:Page>
    

    XAML SecondPage:

    <navigation:Page x:Class="HomePlanet.Views.SecondPage" 
               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"
               mc:Ignorable="d"
               xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
               d:DesignWidth="640" d:DesignHeight="480"
               Title="SecondPage Page">
        <Grid x:Name="LayoutRoot">
            <TextBox Height="23" HorizontalAlignment="Left" Margin="122,101,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
            <TextBox Height="23" HorizontalAlignment="Left" Margin="122,130,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" />
            <TextBox Height="23" HorizontalAlignment="Left" Margin="122,159,0,0" Name="textBox3" VerticalAlignment="Top" Width="120" />
        </Grid>
    </navigation:Page>
    

    XAML ThirdPage:

    <navigation:Page x:Class="HomePlanet.Views.ThirdPage" 
               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"
               mc:Ignorable="d"
               xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
               d:DesignWidth="640" d:DesignHeight="480"
               Title="ThirdPage Page">
        <Grid x:Name="LayoutRoot">
            <TextBlock Height="50" HorizontalAlignment="Left" Margin="260,195,0,0" Name="textBlock1" Text="" VerticalAlignment="Top" Width="172" />
            <TextBlock Height="23" HorizontalAlignment="Left" Margin="81,195,0,0" Name="textBlock2" Text="A + B + C =" VerticalAlignment="Top" Width="150" />
        </Grid>
    </navigation:Page>
    

    XAML FourthPage:

    <navigation:Page x:Class="HomePlanet.Views.FourthPage" 
               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"
               mc:Ignorable="d"
               xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
               d:DesignWidth="640" d:DesignHeight="480"
               Title="FourthPage Page">
        <Grid x:Name="LayoutRoot">
     
        </Grid>
    </navigation:Page>
    

    Code behind FirstPage:

    using System.Windows.Controls;
    using System.Windows.Navigation;
     
    namespace HomePlanet.Views
    {
        public partial class FirstPage : Page
        {
            public FirstPage()
            {
                InitializeComponent();
            }
     
            // Executes when the user navigates to this page.
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                theObject = new MyObject();
                theObject.MyProperty1 = 10000;
                theObject.MyProperty2 = 20000;
                theObject.MyProperty3 = 30000;
            }
     
            MyObject theObject;
            private void SecondPageButton_Click(object sender, System.Windows.RoutedEventArgs e)
            {
                UserControl userControl = new SecondPage(theObject);
                ContentBorder.Child = null;
                ContentBorder.Child = userControl;
            }
     
            private void ThirdPageButton_Click(object sender, System.Windows.RoutedEventArgs e)
            {
                int addition = theObject.MyProperty1 + theObject.MyProperty2 + theObject.MyProperty3;
                UserControl userControl = new ThirdPage(addition);
                ContentBorder.Child = null;
                ContentBorder.Child = userControl;
            }
     
            private void FourthPageButton_Click(object sender, System.Windows.RoutedEventArgs e)
            {
                UserControl userControl = new FourthPage();
                ContentBorder.Child = null;
                ContentBorder.Child = userControl;
            }
     
        }
    }
    

    Code behind Second Page:

    using System.Windows.Controls;
    using System.Windows.Navigation;
     
    namespace HomePlanet.Views
    {
        public partial class SecondPage : Page
        {
            public SecondPage(MyObject myObject)
            {
                InitializeComponent();
                anObject = myObject;
            }
     
            MyObject anObject;
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                textBox1.Text = anObject.MyProperty1.ToString();
                textBox2.Text = anObject.MyProperty2.ToString();
                textBox3.Text = anObject.MyProperty3.ToString();
            }
     
        }
    }
    

    Code behing ThirdPage:

    using System.Windows.Controls;
    using System.Windows.Navigation;
     
    namespace HomePlanet.Views
    {
        public partial class ThirdPage : Page
        {
            public ThirdPage(int addition)
            {
                InitializeComponent();
                addValue = addition;
            }
     
            int addValue;
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                textBlock1.Text = addValue.ToString();
            }
     
        }
    }
    

    Code Behind FourthPage:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using System.Windows.Navigation;
     
    namespace HomePlanet.Views
    {
        public partial class FourthPage : Page
        {
            public FourthPage()
            {
                InitializeComponent();
            }
     
            // Executes when the user navigates to this page.
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
            }
     
        }
    }
    

    An Object:

    namespace HomePlanet.Views
    {
        public class MyObject
        {
            public int MyProperty1 { getset; }
            public int MyProperty2 { getset; }
            public int MyProperty3 { getset; }
        }
    }
    

    Hope this can help you friend.

    Jannen

     

    Friday, August 12, 2011 9:45 AM

All replies

  • Hi Dizki,

    Welcome to the SL world. The complete answer is start a Silverlight project, choose "Silverlight Business Application" template. It automatically generate a main page called MainPage and two other pages as UserControl they are Home.XAML and About.XAML. At the MainPage you can there is a Hyperlink to navigate to Home and About page, and you can customized the Hyperlink so it can also contain your Icon. You can add several other Pages if you want, just add a new hyperlink like navigate the Home and About page.

    For a good learning please download training kit and video at http://msdn.microsoft.com/en-us/silverlight4trainingcourse.aspx

    Hope this can help you

    Jannen  

    Thursday, August 11, 2011 9:17 PM
  • hi jsiahaan... thanks for your reply...

    but i guess you havnt understood my question...

    i have a silverlight page... a contentcontrol in that silverlight page and a user control... i want to put that usercontrol in silverlight page... and when i click on usercontrol's icons(my customized icons) then there respective page should be shown in contentcontrol of that silverlight page...

    thanks in advance... plz help me... i am badly trapped in this silverlight application...


    Friday, August 12, 2011 9:13 AM
  • Hi Dizki,

    Here a simple complete sample: There are four Pages, FirstPage, SecondPage, ThirdPage and FourthPage. FirstPage call the other by individual button, and each button is pressed, related page is coming to the contentBorder of FirstPage.

    XAML FirstPage:

    <navigation:Page x:Class="HomePlanet.Views.FirstPage" 
               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"
               mc:Ignorable="d"
               xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
               d:DesignWidth="640" d:DesignHeight="480"
               Title="FirstPage Page">
        <Grid x:Name="LayoutRoot">
            <Border BorderBrush="Silver" BorderThickness="1" Margin="43,83,46,40" Name="ContentBorder" />
            <Button Content="Second Page" Height="23" HorizontalAlignment="Left" Margin="52,30,0,0" Name="SecondPageButton" VerticalAlignment="Top" Width="102" Click="SecondPageButton_Click" />
            <Button Content="Third Page" Height="23" HorizontalAlignment="Left" Margin="187,30,0,0" Name="ThirdPageButton" VerticalAlignment="Top" Width="115" Click="ThirdPageButton_Click" />
            <Button Content="Fourth Page" Height="23" HorizontalAlignment="Left" Margin="336,30,0,0" Name="FourthPageButton" VerticalAlignment="Top" Width="110" Click="FourthPageButton_Click" />
        </Grid>
    </navigation:Page>
    

    XAML SecondPage:

    <navigation:Page x:Class="HomePlanet.Views.SecondPage" 
               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"
               mc:Ignorable="d"
               xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
               d:DesignWidth="640" d:DesignHeight="480"
               Title="SecondPage Page">
        <Grid x:Name="LayoutRoot">
            <TextBox Height="23" HorizontalAlignment="Left" Margin="122,101,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
            <TextBox Height="23" HorizontalAlignment="Left" Margin="122,130,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" />
            <TextBox Height="23" HorizontalAlignment="Left" Margin="122,159,0,0" Name="textBox3" VerticalAlignment="Top" Width="120" />
        </Grid>
    </navigation:Page>
    

    XAML ThirdPage:

    <navigation:Page x:Class="HomePlanet.Views.ThirdPage" 
               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"
               mc:Ignorable="d"
               xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
               d:DesignWidth="640" d:DesignHeight="480"
               Title="ThirdPage Page">
        <Grid x:Name="LayoutRoot">
            <TextBlock Height="50" HorizontalAlignment="Left" Margin="260,195,0,0" Name="textBlock1" Text="" VerticalAlignment="Top" Width="172" />
            <TextBlock Height="23" HorizontalAlignment="Left" Margin="81,195,0,0" Name="textBlock2" Text="A + B + C =" VerticalAlignment="Top" Width="150" />
        </Grid>
    </navigation:Page>
    

    XAML FourthPage:

    <navigation:Page x:Class="HomePlanet.Views.FourthPage" 
               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"
               mc:Ignorable="d"
               xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
               d:DesignWidth="640" d:DesignHeight="480"
               Title="FourthPage Page">
        <Grid x:Name="LayoutRoot">
     
        </Grid>
    </navigation:Page>
    

    Code behind FirstPage:

    using System.Windows.Controls;
    using System.Windows.Navigation;
     
    namespace HomePlanet.Views
    {
        public partial class FirstPage : Page
        {
            public FirstPage()
            {
                InitializeComponent();
            }
     
            // Executes when the user navigates to this page.
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                theObject = new MyObject();
                theObject.MyProperty1 = 10000;
                theObject.MyProperty2 = 20000;
                theObject.MyProperty3 = 30000;
            }
     
            MyObject theObject;
            private void SecondPageButton_Click(object sender, System.Windows.RoutedEventArgs e)
            {
                UserControl userControl = new SecondPage(theObject);
                ContentBorder.Child = null;
                ContentBorder.Child = userControl;
            }
     
            private void ThirdPageButton_Click(object sender, System.Windows.RoutedEventArgs e)
            {
                int addition = theObject.MyProperty1 + theObject.MyProperty2 + theObject.MyProperty3;
                UserControl userControl = new ThirdPage(addition);
                ContentBorder.Child = null;
                ContentBorder.Child = userControl;
            }
     
            private void FourthPageButton_Click(object sender, System.Windows.RoutedEventArgs e)
            {
                UserControl userControl = new FourthPage();
                ContentBorder.Child = null;
                ContentBorder.Child = userControl;
            }
     
        }
    }
    

    Code behind Second Page:

    using System.Windows.Controls;
    using System.Windows.Navigation;
     
    namespace HomePlanet.Views
    {
        public partial class SecondPage : Page
        {
            public SecondPage(MyObject myObject)
            {
                InitializeComponent();
                anObject = myObject;
            }
     
            MyObject anObject;
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                textBox1.Text = anObject.MyProperty1.ToString();
                textBox2.Text = anObject.MyProperty2.ToString();
                textBox3.Text = anObject.MyProperty3.ToString();
            }
     
        }
    }
    

    Code behing ThirdPage:

    using System.Windows.Controls;
    using System.Windows.Navigation;
     
    namespace HomePlanet.Views
    {
        public partial class ThirdPage : Page
        {
            public ThirdPage(int addition)
            {
                InitializeComponent();
                addValue = addition;
            }
     
            int addValue;
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                textBlock1.Text = addValue.ToString();
            }
     
        }
    }
    

    Code Behind FourthPage:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using System.Windows.Navigation;
     
    namespace HomePlanet.Views
    {
        public partial class FourthPage : Page
        {
            public FourthPage()
            {
                InitializeComponent();
            }
     
            // Executes when the user navigates to this page.
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
            }
     
        }
    }
    

    An Object:

    namespace HomePlanet.Views
    {
        public class MyObject
        {
            public int MyProperty1 { getset; }
            public int MyProperty2 { getset; }
            public int MyProperty3 { getset; }
        }
    }
    

    Hope this can help you friend.

    Jannen

     

    Friday, August 12, 2011 9:45 AM
  • thank you sooo much for your help Jannen... it worked out hurrahhh...

    i have another problem... please help me out in knowing that how would i manage my silveright application state...

    i have a login page... when i logged in to it and reach homepage and suppose i want to move from homepage to another page... and if i press's f5 in my second page... i go back to login page... i only want to go back to login page when i press's logout... not by pressing f5...

    thanks in advance...

    Friday, August 12, 2011 9:33 PM