WPF XAML Browser Applications

XAML browser applications (XBAPs) combines features of both Web applications and rich-client applications.

XAML is an acronym for Extensible Application Markup Language, which is used to create a user interface.

Like Web applications, XBAPs can be deployed to a Web server and started from Internet Explorer or any other browser. Like rich-client applications, XBAPs can take advantage of the capabilities of WPF. Developing XBAPs is also similar to rich-client development.

This article provides a simple, high-level introduction to XBAP development and describes where XBAP development differs from standard rich-client development.

You can create a Windows Presentation Foundation (WPF) application which runs in a browser. This application model is named XAML Browser Application (XBAP). Creating an XBAP project is easy using the Visual Studio IDE.

To create a new WPF Browser Application project

  1. Start Visual Studio 2010.
  2. On the File menu, point to New, and then select Project.

The New Project dialog box appears.

  1. In the Installed Templates pane, expand Visual Basic or Visual C#, and then select Windows.
  2. Above the middle pane, select the target framework from the drop-down list.
  3. In the middle pane, select the WPF Browser Application template.
  4. In the Name text box, specify a name for the project.
  5. In the Location text box, specify a folder to save the project.
  6. Click OK.

The WPF Designer for Visual Studio opens and displays Page1.xaml of the project.

  1. On the Debug menu, and select Start Debugging.

A browser window opens and displays the WPF browser application.

EXAMPLE (With Database Connectivity)

  1. Create new WPF Browser Application.
  2. Change background color of the form as per your desire (by changing “Backgound” property).
  3. Drag a “Grid” control from Toolbox onto the form. (to align controls on the WPF page, you will need to add “Grid” control first.
  4. Drag a “Lable” control from Toolbox onto the form.
  5. Drag a “Button” control from Toolbox onto the form.
  6. Drag a “DataGrid” control from Toolbox onto the form
  7. Switch to XAML view. (you will see the following code)

<Page x:Class=”WpfBrowserApplication1.Page1″

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;

mc:Ignorable=”d”

d:DesignHeight=”703″ d:DesignWidth=”733″

Title=”Page1″ Loaded=”Page_Loaded” Background=”#FF0E3F55″ Foreground=”#FFDFEAEF”>

<Grid Height=”641″ Name=”grid1″ Width=”719″>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”8*” />

<ColumnDefinition Width=”534*” />

</Grid.ColumnDefinitions>

<Label Content=”Label” Height=”26″ HorizontalAlignment=”Left” Margin=”4,12,0,0″ Name=”label1″ VerticalAlignment=”Top” Width=”347″ Grid.Column=”1″ Foreground=”#FFEBEFF4″ FontFamily=”Trebuchet MS” FontSize=”12″ />

<DataGrid RowHeight=”30″ ColumnWidth=”100″ AutoGenerateColumns=”True” Height=”566″ HorizontalAlignment=”Left” Margin=”4,44,0,0″ Name=”dataGrid1″ VerticalAlignment=”Top” Width=”692″ ItemsSource=”{Binding}” Grid.Column=”1″ BorderBrush=”#FF53E7F8″ Background=”#FFD1FFFF” FontFamily=”Trebuchet MS” FontSize=”10″ />

<Button Content=”Load” Height=”23″ HorizontalAlignment=”Left” Margin=”622,15,0,0″ Name=”button1″ VerticalAlignment=”Top” Width=”75″ Click=”button1_Click” Grid.Column=”1″ Background=”#FFADCDF5″ />

</Grid>

</Page>

8.  Switch to .xaml.cs view (the code behind)

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;

using System.Data;

using System.Data.SqlClient;

namespace WpfBrowserApplication1

{

/// <summary>

/// Interaction logic for Page1.xaml

/// </summary>

public partial class Page1 : Page

{

public Page1()

{

InitializeComponent();

}

private void Page_Loaded(object sender, RoutedEventArgs e)

{

using (SqlConnection con = ConnectionOpen())

{

try

{

// Check the connection state

con.Open();

if (con.State == System.Data.ConnectionState.Open)

{

label1.Content = “Success. Connected to SQL server.”;

ConnectionClose(con);

}

else

{

label1.Content = “Failed. Not connected to SQL server.”;

}

}

catch (Exception)

{

label1.Content = “Unknown exception.”;

}

}

}

private string ConnectionString()

{

// Create SQL Server 2005 connection string, change the credentials here

StringBuilder strConn = new StringBuilder();

strConn.Append(“Data Source = cygnus\\sql2005;”);

strConn.Append(“uid = sa;”);

strConn.Append(“pwd = goga;”);

strConn.Append(“Initial Catalog = AdventureWorks”);

return strConn.ToString();

}

private SqlConnection ConnectionOpen()

{

return new SqlConnection(ConnectionString().ToString());

}

private void ConnectionClose(SqlConnection xConnection)

{

xConnection.Close();

xConnection.Dispose();

}

private void BuildList()

{

SqlDataAdapter sqlAdapter;

DataSet sqlDataset;

DataTable sqlTable = new DataTable();

// Select SQL Query

string _Query = “Select Top 100 ContactID, Title, FirstName, LastName, EmailAddress, Phone From Person.Contact;”;

sqlAdapter = new SqlDataAdapter(_Query, ConnectionOpen());

sqlDataset = new DataSet();

sqlAdapter.Fill(sqlTable);

dataGrid1.DataContext = sqlTable.DefaultView;

sqlAdapter.Dispose();

sqlDataset.Dispose();

}

private void button1_Click(object sender, RoutedEventArgs e)

{

dataGrid1.AutoGenerateColumns = true;

BuildList();

}

}

}

9.  Go to “Project-Properties” and then Security Tab.

10. Select “This is a full trust application” option.

This option is to tell the application and all of its related assemblies to run on browser with full trust mode.

11. Build solution.

12. Start running project by pressing F5.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s