XAML Browser Application in ASP.NET

Akash Gaur
Feb 24, 2012

60.5k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

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.