Navigation in silverlight using Frame

Purpose:

                If application contain multiple pages or user control, which requires navigating between pages. It requires silverlight navigation frame work.

 Navigation types:

                1. Application Navigation

1.       Frame based navigation

2.       Page based navigation

                2. Web Browser-Integrated Navigation

                3. External Navigation

                4. Extending the Navigation System

Navigation using frame or page:

          In frame based navigation, frame acts as a container for page controls, and facilitates navigation to pages. At any one time, the frame displays the content of a single page. You change the page that is displayed within the frame by navigating, either programmatically or through user action, to a new page.

Example:

<UserControl x:Class="NavigationApplication.MasterPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

  <Grid x:Name="LayoutRoot">

      <sdk:Frame x:Name="ChildFrame" Source="/Views/Home.xaml">

      </sdk:Frame>

  </Grid>

</UserControl>

Navigating between pages in XAML:

        HyperlinkButton control in Silverlight is used to navigate between pages; it has NavigateUri property, which is used to set target URI of the page. Make sure that HyperlinkButton control should resides outside the frame.

Example: 

<UserControl x:Class="NavigationApplication.MasterPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

  <Grid x:Name="LayoutRoot">

        <HyperlinkButton NavigateUri="/Home.xaml" Content="Home" />

                <HyperlinkButton NavigateUri=" /Pages/contacts.xaml" Content="Contact Us" />

      <sdk:Frame x:Name="ChildFrame" Source="/Views/Home.xaml">

      </sdk:Frame>

  </Grid>

</UserControl>

Navigating between pages using code behind:

        The above navigation will navigate to target URI without making any validation. If you don’t want to make some validation or pass some values from one page to another page means, can use navigation in code behind.

XAML:

     Create click event in xaml

<HyperlinkButton Name="aboutUs" Content="About Us"                                                                                        Click="aboutUs_Click"

 Width="100" Height="20"/>

XAML.cs:

      Map frame to target URI, here About.Xaml page

ChildFrame.Navigate(new Uri("/Pages/About.xaml", UriKind.Relative));

Error Handling in Navigation:

            Frame had inbuilt support to handle navigation errors. This is called NavigationFailed event, in this event we can show some error details during navigation.

XAML:

<sdk:Frame x:Name="ChildFrame" Source="/Views/Home.xaml" NavigationFailed=" ChildFrame_NavigationFailed">

      </sdk:Frame>

XAML.cs:

       Handle navigation errors in code behind, by using the way

private void ChildFrame_NavigationFailed(object sender, NavigationFailedEventArgs e)

  {

   e.Handled = true;

   masterCtrl.Navigate(new Uri("/Pages/ErrorDetails.xaml",UriKind.Relative));

  }

Data Template in Silverlight / WPF

OverView:

       This article is about how to use Data Template in silverlight or WPF.

Data Template:

         Template gives you option to change appearance of data item in controls like Grid, ListBox, ComboBox etc, for example simple ComboBox contain multiple value in drop down format but with the help of Template we can change the appearance of it like drop down with image enclosed it and even something more.

When using data template in control it replace the existing appearance with new appearance,

Create Data Template:

It can be create in different ways

1.  in XAML

2. in Code behind

3. Using XamlReader

In Xaml:

In this method it’s directly defined in XAML page under <UserControl.Resources> section,

Example:

<UserControl.Resources>

        <DataTemplate>

            <ComboBox x:Name="ddChar" SelectionChanged="ddChar_SelectionChanged">

                <ComboBoxItem>A</ComboBoxItem>

                <ComboBoxItem>B</ComboBoxItem>

                <ComboBoxItem>C</ComboBoxItem>

                <ComboBoxItem>D</ComboBoxItem>

                <ComboBoxItem>F</ComboBoxItem>

                <ComboBoxItem>G</ComboBoxItem>

            </ComboBox>

        </DataTemplate>

    </UserControl.Resources>

It can be applied to any control in code behind by using Resources Dictionary, its nothing but key value pair dictionary which hold some set of resources, template etc

lstNames = Resources["oddNumberTemplate"] as DataTemplate;

lstNames is an ListBox, in which we are binding our ComboBox, this method can be used in both Silverlight and WPF

In Code Behind:

 This method can only be used in WPF, Silverlight doesn’t support direct creation of DataTemplate, it can be created by

Example:

ListView lstView; //  ListView

// create and add the data template to the parent control

DataTemplate dTemp = new DataTemplate(typeof(ComboBox ));

lstView.ItemTemplate = dTemp;

// create and add the Combo box to the data template

FrameworkElementFactory cmbElement =

    new FrameworkElementFactory(typeof(ComboBox ));

dTemp.VisualTree = cmbElement;

// Create binding

Binding bind = new Binding();

bind.Path = new PropertyPath("ComboBoxItem");

bind.Mode = BindingMode.TwoWay;

// set the binding in the Combo Box

cmbElement.SetBinding(ComboBox.ComboBoxItem, bind);

cmbElement.SetValue(ComboBox.ComboBoxItem, "hello");

Steps:

1.  Create DataTemplate by specifying type ex: ComboBox

2. Attach Created Template to parent Element ItemTemplate

3. Create FrameworkElementFactory by specifying type of DataTemplate

4. Attach DataTemplate to Visual Tree.

5. Create Binding by specifying mode and path

Using XAML Reader:

It can be used in both Silverlight and WPF, but widely used in Silverlight, it can be created with the help of string builder or string

Example:

StringBuilder xamlData = new StringBuilder();

     xamlData.Append("<DataTemplate xmlns='http://schemas.microsoft.com/client/2007'  xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>");

     xamlData.Append("<ComboBox ");

     xamlData.Append("SelectionChanged=\"ComboBox_SelectionChanged\" ");

     xamlData.Append(">");

     foreach (var number in Enumerable.Range(1,100))

        {

          xamlData.Append(String.Format("<ComboBoxItem Content='{0}'  />", number ));

        }

     xamlData.Append("</ComboBox> ");

     xamlData.Append("</DataTemplate>");

Add DataTemplate(ComboBox) in silverlight page programmatically

Here we have DataGridTemplateColumn,add this template column into datagrid as Follow.

        DataGridTemplateColumn template = new DataGridTemplateColumn();
               templateColumn.Header = "";
               templateColumn.CellTemplate = (DataTemplate)
               XamlReader.Load(@xamlData);
        this.dataGrid1.Columns.Add(template);