XAML Browser Application in ASP.NET

Introduction

XAML Browser Applications are applications that run in a web browser. XAML files are XML-based files that have the extension .xaml. It provides the capability of creating UI elements in the XAML markup, seperating the UI from the application logic. Microsoft Visual Studio provides a project template for creating XAML browser applications.

Now, lets create a simple application using the following steps.

Step 1 : Open Microsoft Visual Studio 2010.

Step 2 : Select File->New->Project.

Step 3 : Select WPF Browser Application and then click Ok.



Step 4 : Now drag two button controls and three label controls from the toolbox onto the design window of Page1.xaml.

Step 5 : Now set the Content Property of the controls; the design view looks like as:



The source code of Page1.xaml file is as follows:

<Page x:Class="WpfBrowserApplication1.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="309" d:DesignWidth="442"Title="Page1">
<Grid>
<Button Content="1.click me " Height="23" HorizontalAlignment="Left"Margin="12,80,0,0"
Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click"> </Button>
<Label Content="click any button below" Height="28" HorizontalAlignment="Left" Margin="12,25,0,0"
Name="label1" VerticalAlignment="Top" FontSize="15" />
<Button Content="2.press me" Height="23" HorizontalAlignment="Left" Margin="103,80,0,0" Name="button2"
VerticalAlignment="Top" Width="75" Click="button2_Click" />
<Label Height="49" HorizontalAlignment="Left" Margin="77,123,0,0" Name="label2"VerticalAlignment="Top"/>
<Label Content="Output:" Height="28" HorizontalAlignment="Left" Margin="12,123,0,0" Name="label3"
VerticalAlignment="Top" FontSize="15" BorderThickness="1" BorderBrush="#FFC15148" />
</Grid>
</Page>

Step 6 : Write the following code for the click event of the buttons:

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 WpfBrowserApplication1
{
public partial class Page1 : Page
{
public Page1()
{
InitializeComponent();
}
private void button1_Click(object sender, RoutedEventArgs e)
{
label2.Content = "you have clicked first button thank you for click me";
label2.FontSize = 20;
}
private void button2_Click(object sender, RoutedEventArgs e)
{
label2.Content = "Now you have clicked the second button thanx for press me";
label2.FontSize = 26;
}
}
}

Step 7 : Run the application by pressing F5 key. The output is as follows:







Here are some other useful resources which may help you.

User Control in WPF
Support Mobile Browsers with Browser Detection and Redirection Using C#
How to create Silverlight Object in the HTML-Interop
How to Localize ASP.NET Controls Based on Browser's Language and Culture Settings
Sending Automatic Mails in ASP.NET