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.

1.jpg

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:

2.jpg

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:

3.jpg

4.jpg

5.jpg

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