---

WPF

---

A productive, unified approach to UI, media and documents to deliver unmatched user experience

---

Architecture of WPF

---

---

Let's get into some simple exercises on WPF

A simple example on creating Groupbox, expander controls

<window class="WpfApplication2.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x="http://schemas.microsoft.com/winfx/2006/xaml" title="Window1" height="300" width="300"> <stackpanel orientation="Vertical"> <groupbox header="A GroupBox Test" padding="5" margin="5" verticalalignment="Top"> <stackpanel> <radiobutton margin="3">One</radiobutton> <radiobutton margin="3">Two</radiobutton> <radiobutton margin="3">Three</radiobutton> <button margin="3">Save</button> </stackpanel> </groupbox> <!-- --> <expander margin="5" padding="5" header="Region One"> <button padding="3" name="button1" click="button1_Click">Hidden Button One</button> </expander> <expander margin="5" padding="5" header="Region Two"> <textblock textwrapping="Wrap"> Hi, How is it going? </textblock> </expander> <expander margin="5" padding="5" header="Region Three"> <button padding="3">Hidden Button Two</button> </expander> </stackpanel></window>

---

An array of controls - Labels, List, Buttons, Statusbars etc…



<window class="WpfApplication1.AboutDailog" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x="http://schemas.microsoft.com/winfx/2006/xaml" title="AboutDailog" height="300" width="300" background="Orange"> <stackpanel> <label fontweight="Bold" fontsize="20" foreground="White">WPF Sample </label> <label>11th Dec 2007</label> <label>I like</label> <listbox> <listboxitem>Ice creams</listboxitem> <listboxitem>Potato Chips</listboxitem> <listboxitem>Sweets - Jammuns and Rosgullas</listboxitem> </listbox> <stackpanel orientation="Horizontal" horizontalalignment="Center"> <button minwidth="75" margin="10">Help</button> <button minwidth="75" margin="10">Ok</button> </stackpanel> <statusbar>Status Bar - Is that all you like</statusbar> <stackpanel orientation="Horizontal" horizontalalignment="Center"> <button minwidth="75" margin="10" click="Button_Click">Print Logical Tree</button> <button minwidth="75" margin="10" click="Button_Click_1">Print Physical Tree</button> </stackpanel> </stackpanel></window>

---

Example for command

---

Commands are the tasks to be executed. Command Binding links command to application logic. Command source ensues the flow and Command target is where the action/activity is being performed
If we have to execute Open document. Facility for the same has been provided through File->Open, Toolbutton, a button control at the bottom of the window and finally as context menu item. Managing all of them enabling/disabling could be a lot of pain. Trough Command, it is an easy implementation
We have several in-built commands like Application, Edit, Navigation, Media etc…Apart from this, we will be also able to create our own custom commands, shortly I'll add few samples on custom commands too

<window class="WpfApplication4.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x="http://schemas.microsoft.com/winfx/2006/xaml" title="Window1" height="300" width="300"> <window.commandbindings> <commandbinding command="ApplicationCommands.New" executed="NewCommand_Executed"> <commandbinding command="ApplicationCommands.Save" executed="SaveCommand_Executed" canexecute="SaveCommandBinding_CanExecute"> <commandbinding command="NavigationCommands.Zoom" executed="ZoomCommand_Executed"> </Window.CommandBindings> <stackpanel margin="5" height="252" orientation="Vertical" horizontalalignment="Stretch"> <menu> <menuitem header="File"> <menuitem command="ApplicationCommands.New"></menuitem> <menuitem command="ApplicationCommands.Save"></menuitem> </menuitem> </menu> <stackpanel orientation="Vertical" horizontalalignment="Stretch"> <stackpanel horizontalalignment="Stretch"> <label content="Name" margin="5" horizontalalignment="Left"> <textbox name="txtName" horizontalalignment="Stretch" margin="5" horizontalcontentalignment="Stretch"> </stackpanel> <stackpanel horizontalalignment="Stretch"> <label content="Designation" margin="5" horizontalalignment="Left"> <textbox name="txtDesignation" horizontalalignment="Stretch" margin="5" horizontalcontentalignment="Stretch"> </stackpanel> <stackpanel orientation="Horizontal"> <button name="newButton" command="ApplicationCommands.New" margin="5">New</button> <button name="zoomButton" command="NavigationCommands.Zoom" margin="5" commandparameter="{Binding ElementName=txtDesignation, Path=Text}" content="Zoom" click="zoomButton_Click"> </stackpanel> <stackpanel orientation="Horizontal"> <label horizontalalignment="Stretch" verticalalignment="Stretch" borderbrush="AliceBlue" borderthickness="1" margin="15"> </stackpanel> <stackpanel orientation="Horizontal" horizontalalignment="Stretch" verticalalignment="Bottom"> <statusbar name="statusBar" borderbrush="AliceBlue" horizontalcontentalignment="Stretch" horizontalalignment="Stretch" borderthickness="1" margin="10"> <label name="stLabel1"> </statusbar> </stackpanel> </stackpanel> </stackpanel></window>




Code behind for the above application is



namespace WpfApplication4{ /// <summary> /// Interaction logic for Window1.xaml /// </summary> public partial class Window1 : Window { public Window1() { InitializeComponent(); } private void NewCommand_Executed(object sender, ExecutedRoutedEventArgs e) { MessageBox.Show("New Command is being Executed"); } private void SaveCommand_Executed(object sender, ExecutedRoutedEventArgs e) { MessageBox.Show("Save Command is being executed"); } private void SaveCommandBinding_CanExecute(object sender, CanExecuteRoutedEventArgs e) { if (txtName.Text.Length > 0) e.CanExecute = true; else e.CanExecute = false; } private void ZoomCommand_Executed(object sender, ExecutedRoutedEventArgs e) { stLabel1.Content = e.Parameter.ToString(); //statusBar.Text = "Sample Text"; } private void zoomButton_Click(object sender, RoutedEventArgs e) { } }}

---

Example to show Bubling and tunning of events

---

Steps to reproduce are

1. Create a simple application with a label containing a label, image and label in sequence


2. Generate click event for all controls. Both container and contained


3. Provide MessageBox for the click event on each of the control and in the code behind, do not set evenHandled property to True.

You'll see there is tunneling of events

To see bubling

1. Same as step 1


2. Generate Click event for the top level label control alone


3. On clicking the label control, though you'd have clicked on the internal label/image control, only the outter label control reacts. This is because, the controls deep inside, check to see their event handling, if they do not have any corresponding handlers, they pass it on to the immediate parent, until the message/event is handled. This is no different from the way MFC/Win32 has been handling events in the past. Just theat it's new to a selected commnunity of .NET developers

Sample for the above is appended

<window class="WpfApplication2.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x="http://schemas.microsoft.com/winfx/2006/xaml" title="Window1" height="300" width="300" windowstyle="ThreeDBorderWindow"> <grid> <wrappanel> <stackpanel orientation="Vertical"> <label borderbrush="Black" borderthickness="1" mousedown="Label_MouseDown"> <stackpanel> <textblock margin="3" mousedown="Label_MouseDown"> Image and text label</textblock> <image source="C:\\Documents and Settings\\krishnanr\\Desktop\\happyface.jpg" stretch="None" mousedown="Label_MouseDown"> <textblock margin="3" mousedown="Label_MouseDown"> Courtesy of the StackPanel</textblock> </stackpanel> </label> <separator margin="10" horizontalalignment="Stretch"> <stackpanel click="StackPanel_Click"> <button name="button1">Threaded Dialog</button> <button name="button2">Registry Manipulation</button> <button name="button3">Show Popup</button> <button name="button4">Transparent Window</button> <button name="button5">Non Regular Window</button> <viewbox height="100" name="viewbox1" width="200"> </stackpanel> </stackpanel> </wrappanel> <popup name="popup1" isopen="False" placement="Mouse" maxwidth="200" popupanimation="Slide" allowstransparency="True"> <border borderbrush="Beige" borderthickness="2" background="White"> <textblock margin="10" textwrapping="Wrap"> For more information click on this button <button name="popup_button" click ="popup_button_Click" content="Close"> </textblock> </border> </popup> </grid></window>



Code behind for the application is appended

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Imaging;using System.Windows.Navigation;using System.Windows.Shapes;namespace WpfApplication2{ /// <summary> /// Interaction logic for Window1.xaml /// </summary> public partial class Window1 : Window { public Window1() { InitializeComponent(); Mouse.OverrideCursor = Cursors.Pen; //if (Environment.OSVersion.Version.Major >= 6) //{ // MessageBox.Show("Can have Vista features"); //} //else //{ // MessageBox.Show("Cannot have vista private"); //} } void Label_MouseDown(object sender, RoutedEventArgs e) { //This method handles click based on the component clicked String msg; msg = "Source = " + e.Source + "\nOriginal Source = " + e.OriginalSource; MessageBox.Show(msg); System.Windows.Window w = new Window2(); w.ShowDialog(); //if handled is false, message is bubbled, else, message handling stops here e.Handled = false; } private void StackPanel_Click(object sender, RoutedEventArgs e) { string msg; System.Windows.Window window = null; Button b = e.Source as Button ; msg = b.Content.ToString(); if (msg.Equals("Threaded Dialog")) { window = new Window2(); window.ShowDialog(); } else if (msg.Equals("Registry Manipulation")) { if (window != null) { window = null; } window = new Window3(); window.ShowDialog(); } else if(msg.Equals("Show Popup")) { popup1.IsOpen = true; } else if (msg.Equals("Transparent Window")) { window = new Window4(); window.Owner = this; window.Show(); } else if (msg.Equals("Non Regular Window")) { window = null; window = new Window5(); window.Show(); } else { MessageBox.Show(msg); } } private void popup_button_Click(object sender, RoutedEventArgs e) { popup1.IsOpen = false; } }}

---

In the process you'll also notice few other operations like Popup control Transperant window creation, non-rectangular window creation, manipulating registry etc

---

Popup control creation

---

<popup name="popup1" isopen="False" placement="Mouse" maxwidth="200" popupanimation="Slide" allowstransparency="True"> <border borderbrush="Beige" borderthickness="2" background="White"> <textblock margin="10" textwrapping="Wrap"> For more information click on this button <button name="popup_button" click ="popup_button_Click" content="Close"> </textblock> </border> </popup>


From code behind set the following code

popup1.IsOpen = true;

---

Registry Manipuations

---

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Imaging;using System.Windows.Shapes;using Microsoft.Win32;namespace WpfApplication2{ /// <summary> /// Interaction logic for Window3.xaml /// </summary> public partial class Window3 : Window { public Window3() { InitializeComponent(); } private void Window_Loaded(object sender, RoutedEventArgs e) { } private void StoreInRegistryButton_Click(object sender, RoutedEventArgs e) { //update window title first this.Title = title_text.Text; if (MessageBox.Show("Update Registry") == MessageBoxResult.OK) { //store window name in registry string RegPath = @"Software\MyApp\WinTitle\"; RegistryKey key; key = Registry.CurrentUser.CreateSubKey(RegPath + this.Name); key.SetValue("WinidowTitle", title_text.Text); } } private void FetchFromRegistryButton_Click(object sender, RoutedEventArgs e) { string RegPath = @"Software\MyApp\WinTitle\"; RegistryKey key; key = Registry.CurrentUser.OpenSubKey(RegPath + this.Name); string sValue = key.GetValue("WinidowTitle").ToString(); this.Title = sValue; } }}

---

Transparent window creation

---

<window class="WpfApplication2.Window4" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x="http://schemas.microsoft.com/winfx/2006/xaml" title="Window4" height="300" width="300" windowstyle="None" allowstransparency="True"> <window.background> <imagebrush imagesource="squares.png"> </Window.Background> <grid> <grid.rowdefinitions> <rowdefinition></rowdefinition> <rowdefinition></rowdefinition> <rowdefinition></rowdefinition> <rowdefinition></rowdefinition> </Grid.RowDefinitions> <button margin="20" row="0">A Sample Button</button> <button margin="20" row="2">Another Button</button> </grid></window>

---

Non-rectangular window

---

<window class="WpfApplication2.Window5" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x="http://schemas.microsoft.com/winfx/2006/xaml" title="Window5" height="300" width="300" allowstransparency="True" windowstyle="None"> <border width="Auto" height="Auto" name="windowFrame" borderbrush="#395984" borderthickness="1" cornerradius="0,20,30,40"> <border.background> <lineargradientbrush> <gradientbrush.gradientstops> <gradientstopcollection> <gradientstop color="#E7EBF7" offset="0.0"> <gradientstop color="#CEE3FF" offset="0.5"> </gradientstopcollection> </GradientBrush.GradientStops> </lineargradientbrush> </Border.Background> <grid> <grid.rowdefinitions> <rowdefinition height="Auto"></rowdefinition> <rowdefinition></rowdefinition> <rowdefinition height="Auto"></rowdefinition> </Grid.RowDefinitions> <textblock text="Title Bar" margin="1" padding="5"></textblock> <grid row="1" background="#B5CBEF"> <textblock verticalalignment="Center" horizontalalignment="Center" foreground="White" fontsize="20">Content Goes Here</textblock> </grid> <textblock row="2" text="Footer" margin="1,10,1,1" padding="5" horizontalalignment="Center"></textblock> </grid> </border></window>

---

Data Binding

---

We can bind one controls value into another control so that we are able to see value reflection. Say for e.g. we have a slider control to adjust volume and a text control to directly key in required volume. If the values entered in one do not reflect on the other, than it has no value. A similar example has been displayed below. Enter a value in text, see it's reflection in slider and vice-versa.


<window class="WpfApplication5.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x="http://schemas.microsoft.com/winfx/2006/xaml" title="Window1" height="300" width="300" loaded="Window_Loaded"> <stackpanel> <slider name="slider1" minimum="0" maximum="100" value="20"> <textbox name="textbox1" margin="10" text="{Binding ElementName=slider1,Path=Value,Mode=TwoWay}"> </stackpanel></window>

There can be more interesting work on this Two-way reflections and Onewaysource. I'll add samples for both of them shortly

We can also bind classes so that we could read data from DB into these classes. Tie these classes with forms/pages, so that respective controls are populated accordingly


Let's consider a simple class as the following


using System;using System.Collections.Generic;using System.Linq;using System.Text;namespace WpfApplication6.Entities{ class IssueTrack { private int _issueID; public int IssueID { get { return _issueID; } set { _issueID = value; } } private string _reportedBy; public string ReportedBy { get { return _reportedBy; } set { _reportedBy = value; } } private string _context; public string Context { get { return _context; } set { _context = value; } } private string _description; public string Description { get { return _description; } set { _description = value; } } private int _priority; public int Priority { get { return _priority; } set { _priority = value; } } private String _raisedOn; public String RaisedOn { get { return _raisedOn; } set { _raisedOn = value; } } private string _owner; public string Owner { get { return _owner; } set { _owner = value; } } private string _reference; public string Reference { get { return _reference; } set { _reference = value; } } public IssueTrack(int issueId, string reportedBy, string context, string description, int priority, String raisedOn, string owner, string reference) { this.IssueID = issueId; this.ReportedBy = reportedBy; this.Context = context; this.Description = description; this.Priority = priority; this.RaisedOn = raisedOn; this.Owner = owner; this.Reference = reference; } public IssueTrack(string reportedBy, string context, string description, int priority, String raisedOn, string owner) { this.ReportedBy = reportedBy; this.Context = context; this.Description = description; this.Priority = priority; this.RaisedOn = raisedOn; this.Owner = owner; } public IssueTrack(int issueId, string reportedBy, string context, string description, int priority, String raisedOn, string owner) { this.IssueID = issueId; this.ReportedBy = reportedBy; this.Context = context; this.Description = description; this.Priority = priority; this.RaisedOn = raisedOn; this.Owner = owner; } public IssueTrack(string reportedBy, string context, string description, int priority, String raisedOn, string owner, string reference) { this.ReportedBy = reportedBy; this.Context = context; this.Description = description; this.Priority = priority; this.RaisedOn = raisedOn; this.Owner = owner; this.Reference = reference; } }}

We create a form to display above details. Way we would do it is connect to DB fetch records and manually populate fetched records into fields.


Before we populate into fields, let's take a look at the DB class



using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Data;using System.Data.SqlClient;using System.Configuration;using System.Collections.Specialized;using System.Collections.ObjectModel;using System.Diagnostics;using WpfApplication6.Settings;using WpfApplication6.Entities;namespace WpfApplication6.DBOps{ class DBOperation { private string _connectionString; public DBOperation() { } public string GetConnectionStirngForIssuesDB() { AppConfigReader acr = new AppConfigReader(); int nCount = acr.GetCountOfConnectionStrings(); String sConnectionStr; Debug.WriteLine("Count of AppSettings :" + nCount); if (nCount >= 0) { sConnectionStr = acr.GetConnectionString("IssueTrackerDB"); } else sConnectionStr = ""; return sConnectionStr; } public IssueTrack GetFirstIssue() { bool bOpen = false; IssueTrack it = null; _connectionString = GetConnectionStirngForIssuesDB(); if(_connectionString == null _connectionString.Length <=0) return null; //connect to DB using (SqlConnection con = new SqlConnection()) { con.ConnectionString = _connectionString; SqlCommand cmd = new SqlCommand("SELECT * FROM ISSUETRACKER", con); cmd.CommandType = CommandType.Text; try { con.Open(); bOpen = true; SqlDataReader reader = cmd.ExecuteReader(); if (reader.Read()) { it = new IssueTrack((int)reader[0], (string)reader[1], (string)reader[2], (string)reader[3], (int)reader[4], (string)reader[5], (string)reader[6]); } } catch (System.Exception ex) { Debug.WriteLine(ex.Message); } finally { if (bOpen == true) con.Close(); } } return it; } } }


Once the instance of the class is populated with data from DB, we need to display them in form. Take a look at the form population


<window class="WpfApplication6.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x="http://schemas.microsoft.com/winfx/2006/xaml" title="Window1" height="400" width="300"> <scrollviewer cancontentscroll="False"> <stackpanel orientation="Vertical" margin="10"> <listbox width="Auto" name="lstBox" height="150"> <grid name="grdIssueTracker"> <grid.columndefinitions> <columndefinition></columndefinition> <columndefinition></columndefinition> </Grid.ColumnDefinitions> <grid.rowdefinitions> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="*"> </Grid.RowDefinitions> <textblock margin="7">Issue Number:</textblock> <textbox margin="5" column="1" text="{Binding Path=IssueID}"></textbox> <textblock margin="7" row="1">Reported By:</textblock> <textbox margin="5" row="1" column="1" text="{Binding Path=ReportedBy}"></textbox> <textblock margin="7" row="2">Context:</textblock> <textbox margin="5" row="2" column="1" text="{Binding Path=Context}"></textbox> <textblock margin="7,7,7,0" row="3">Description:</textblock> <textbox margin="7" row="4" column="0" columnspan="2" textwrapping="Wrap" text="{Binding Path=Description}"></textbox> <textblock margin="7" row="5">Priority:</textblock> <textbox margin="5" row="5" column="1" text="{Binding Path=Priority}"></textbox> <textblock margin="7" row="6">Raised On:</textblock> <textbox margin="5" row="6" column="1" text="{Binding Path=RaisedOn}"></textbox> <textblock margin="7" row="8">Owner:</textblock> <textbox margin="5" row="8" column="1" text="{Binding Path=Owner}"></textbox> <textblock margin="7" row="9">Reference:</textblock> <textbox margin="5" row="9" column="1" text="{Binding Path=Reference}"></textbox> </grid> </stackpanel> </scrollviewer></window>


Code behind for the form



using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Imaging;using System.Windows.Navigation;using System.Windows.Shapes;namespace WpfApplication6{ /// <summary> /// Interaction logic for Window1.xaml /// </summary> public partial class Window1 : Window { public Window1() { InitializeComponent(); DBOps.DBOperation dbOp = new WpfApplication6.DBOps.DBOperation(); this.grdIssueTracker.DataContext = dbOp.GetFirstIssue(); } private void window1_Loaded(object sender, RoutedEventArgs e) { DBOps.DBOperation dbOp = new WpfApplication6.DBOps.DBOperation(); } }}

Application Configuration reader


using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Configuration;namespace WpfApplication6.Settings{ class AppConfigReader { public AppConfigReader() { } public string GetConfigValueFor(string sKey) { return ConfigurationSettings.AppSettings[sKey]; } public int GetCountOfAppSettings() { return ConfigurationSettings.AppSettings.Count; } public int GetCountOfConnectionStrings() { return ConfigurationManager.ConnectionStrings.Count; } public String GetConnectionString(string sConnection) { return ConfigurationManager.ConnectionStrings["IssueTrackerDB"].ConnectionString; } }}



Here ini this example we have pulled just a single record. Shortly I'll add more items on to populate multiple records into List, Combo and grid controls

---

XBAP

---

XBAP has been around for some time and there are a lot of questions to be answered here. I see there will be a lot of stuff to be added here. I wouldn't be surprised if all those to do items are added as XBAP solutions

Here is a way you create XBAP application


1. From Visual Studio 2008, select File->New Project and select "WPF Browser Application"


2. Give it a name, and click on OK


3. Open Page1.XAML and fill it with the following code

<page class="WpfBrowserApplication1.Page1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x="http://schemas.microsoft.com/winfx/2006/xaml" title="Page1" height="300" width="300"> <stackpanel orientation="Vertical" margin="0,-3,0,3"> <textblock margin="10" horizontalalignment="Center">This is a simple Text</textblock> <separator margin="10" horizontalalignment="Stretch"> <stackpanel orientation="Horizontal" horizontalalignment="Center"> <button name="ok">OK</button> <button name="cancel">Cancel</button> </stackpanel> <separator margin="10"> <stackpanel orientation="Horizontal" horizontalalignment="Left"> <button name="button1"> <hyperlink navigateuri="Page2.xaml">Page2</hyperlink> </button> <button name="button2"> <hyperlink navigateuri="Page3.xaml">Page3</hyperlink> </button> <button name="button3"> <hyperlink navigateuri="Page4.xaml">Page4</hyperlink> </button> </stackpanel> </stackpanel> </page>


From the build menu select Publish and accept default options and click on Finish


Visual Studio take some time to copy files into inetput/wwwroot folder, once done, Visual Studio opens up brower and shows the application executing as a web application


Here are some questions that are answered


How is it different from aspx application/pages

Well, this is a lot different from them. In the sense UI is rendered as XML. This means a lot. As both windows and XBAP can share same code. Say we create a windows application (using WPF) and on the way, client requests for a similar web application. On a normal course (.NET 2.0/1.1..) we need a fresh development for the same and achieving it can be time consuming, especially when we have some complex implementation around Grid controls. We can easily get away from them, as we have plenty of reuse. All that you need to do here is copy XAML file from windows aplpication and load it into your new WPF Browser application. And if you have been one of those nice developers who has kept UI away from underlying application, then you can continue to use the sasme code for Browser application. Now look at the time for acheving this milestone, I'm sure your PM would prmote you soon, and your client would be impressed by your prowess.
This is one of the biggest and greatest changes from .NET 2.0



Can I have all the controls that are supported in Windows get alon with XBAP?

Majority of the controls are supported. I'll keep myself occupied with more such research and keep releasing them here. Please watch out. For now, pathience and Shanthi :



Are there any restrictions on XBAP?

Yes, all those restrictions on browser applications apply to XBAP too



Can XBAP run on bowsers other than IE?

Need to find out. Will update soon



Do client systems need .NET 3.0/5 to execute this?

Need to find out. Will update soon



Now let's sit back and taste XBAP


In the sample I had showed above, you would have seen three buttons pointing to Page 2, page 3 and Page 4. But where are they. I've put just some simple form controls into XBAP and created these pages. More is to come shortly. What impressed me was the navigation system and the way once page can be contained into another. Thos this sample do not have any thing in terms of containemnet, I do have bits of them coming in the end of the page, so please sit tight till then


Page2.xaml


<page class="WpfBrowserApplication1.Page2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x="http://schemas.microsoft.com/winfx/2006/xaml" title="Page2"> <stackpanel orientation="Vertical" width="300" margin="10"> <textblock margin="10">This is another Page "Page 2"</textblock> <grid name="grdIssueTracker"> <grid.columndefinitions> <columndefinition></columndefinition> <columndefinition></columndefinition> </Grid.ColumnDefinitions> <grid.rowdefinitions> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="Auto"> <rowdefinition height="*"> </Grid.RowDefinitions> <textblock margin="7">Issue Number:</textblock> <textbox margin="5" column="1" text="{Binding Path=IssueID}"></textbox> <textblock margin="7" row="1">Reported By:</textblock> <textbox margin="5" row="1" column="1"></textbox> <textblock margin="7" row="2">Context:</textblock> <textbox margin="5" row="2" column="1"></textbox> <textblock margin="7,7,7,0" row="3">Description:</textblock> <textbox margin="7" row="4" column="0" columnspan="2" textwrapping="Wrap"></textbox> <textblock margin="7" row="5">Priority:</textblock> <textbox margin="5" row="5" column="1"></textbox> <textblock margin="7" row="6">Raised On:</textblock> <textbox margin="5" row="6" column="1"></textbox> <textblock margin="7" row="8">Owner:</textblock> <textbox margin="5" row="8" column="1"></textbox> <textblock margin="7" row="9">Reference:</textblock> <textbox margin="5" row="9" column="1"></textbox> </grid> <stackpanel orientation="Horizontal" horizontalalignment="Left"> <button name="button1"> <hyperlink navigateuri="Page1.xaml">Page1</hyperlink> </button> <button name="button2"> <hyperlink navigateuri="Page3.xaml">Page3</hyperlink> </button> <button name="button3"> <hyperlink navigateuri="Page4.xaml">Page4</hyperlink> </button> </stackpanel> </stackpanel></page>



Page3.xaml


<page class="WpfBrowserApplication1.Page3" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x="http://schemas.microsoft.com/winfx/2006/xaml" title="Page3"> <stackpanel margin="10" width="300"> <textblock>This is Page3</textblock> <separator horizontalcontentalignment="Stretch" margin="10"> <grid name="gridProductDetails"> <grid.columndefinitions> <columndefinition width="Auto"></columndefinition> <columndefinition></columndefinition> </Grid.ColumnDefinitions> <grid.rowdefinitions> <rowdefinition height="Auto"></rowdefinition> <rowdefinition height="Auto"></rowdefinition> <rowdefinition height="Auto"></rowdefinition> <rowdefinition height="Auto"></rowdefinition> <rowdefinition height="*"></rowdefinition> </Grid.RowDefinitions> <textblock margin="7">Model Number:</textblock> <textbox margin="5" column="1" text="{Binding Path=ModelNumber}"></textbox> <textblock margin="7" row="1">Model Name:</textblock> <textbox margin="5" row="1" column="1" text="{Binding Path=ModelName}"></textbox> <textblock margin="7" row="2">Unit Cost:</textblock> <textbox margin="5" row="2" column="1" text="{Binding Path=UnitCost}"></textbox> <textblock margin="7,7,7,0" row="3">Description:</textblock> <textbox margin="7" row="4" column="0" columnspan="2" textwrapping="Wrap" text="{Binding Path=Description}"></textbox> </grid> <stackpanel orientation="Horizontal" horizontalalignment="Left"> <button name="button1"> <hyperlink navigateuri="Page1.xaml">Page1</hyperlink> </button> <button name="button2"> <hyperlink navigateuri="Page2.xaml">Page3</hyperlink> </button> <button name="button3"> <hyperlink navigateuri="Page4.xaml">Page4</hyperlink> </button> </stackpanel> </stackpanel></page>



Page4.xaml


<page class="WpfBrowserApplication1.Page4" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x="http://schemas.microsoft.com/winfx/2006/xaml" title="Page4"> <stackpanel margin="10"> <textblock>What did you expect? This is just a page4.xaml</textblock> <stackpanel orientation="Horizontal" horizontalalignment="Left" margin="50"> <button name="button1"> <hyperlink navigateuri="Page1.xaml">Page1</hyperlink> </button> <button name="button2"> <hyperlink navigateuri="Page2.xaml">Page3</hyperlink> </button> <button name="button3"> <hyperlink navigateuri="Page3.xaml">Page4</hyperlink> </button> </stackpanel> </stackpanel></page>

---

Do we always need to use only Hyperlink for navigation between Pages?

No. Here is a sample on other choices

NavigationService nav;nav = NavigationService.GetNavigationService(this);nav.Navigate(new System.Uri("Page1.xaml", UriKind.RelativeOrAbsolute));

---

Containing One page in another

A simple way of achieving this is mentioned below. Sometime Visual Studio crashes on code as below. Looks like a bug that needs Microsoft attention. As Visual Studio 2008 is in Beta version and is strong otherwise, I'm sure this would get corrected eventually


<page class="WpfApplication3.Page4" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x="http://schemas.microsoft.com/winfx/2006/xaml" title="Page4"> <stackpanel orientation="Vertical"> <wrappanel> <label>This is Page4</label> <frame name="frame1" source="page3.xaml" navigationuivisibility="Hidden" borderthickness="1" borderbrush="Blue"> </wrappanel> <separator margin="10"> <stackpanel orientation="Horizontal" horizontalalignment="Left"> <button name="button1"> <hyperlink navigateuri="Page2.xaml">Page2</hyperlink> </button> <button name="button2"> <hyperlink navigateuri="Page3.xaml">Page3</hyperlink> </button> <button name="button3"> <hyperlink navigateuri="Page4.xaml">Page4</hyperlink> </button> </stackpanel> </stackpanel></page>

There is more to be added to show better navigation and usage of window controls like toolbars, menus, passing data between pages, accessing data across pages ets. You'll soon see them here. My hands are itching to go on….