Join Dotnetcodes DotnetCodes.com is online Discussion Forum for Software professionals . It lets you find friends around the world and Create professional network that share similar interests as you. Get help on ur projects by industry specialists. Also get answers to all ur technical/placement related querries.Get an edge over others.
Already MemberClick here to login
ASP.net MVC Interview Questions Answers Interview Questions
Get Started Developing for Android Apps with Eclipse Articles
Serial Number in SSRS Articles
.Net framework 4.0 Interview Questions Answers Interview Questions
SQL server reporting services Interview Questions (SSRS) part 1 Articles
Whats New in ASP.NET 4.0 Part 2 Articles
How to Print a Crystal Report direct to printer Articles
Difference between Encapsulation and Abstraction Interview Questions
Explaining SDLC -System Development Life Cycle Articles
Html5 interview questions and answers Interview Questions
SharePoint 2010 interview Questions Answers Interview Questions
Infosys Interview Questions Interview Questions
Dynamic Menu using HTML List Tag and CSS in ASP.Net Articles
Populate or bind Dropdownlist in Asp.net using Jquery and Json Articles
ASP.NET MVC Overview Interview Questions
Submit Articles | More Articles..

XAML An Intoduction

Posted By: [email protected] On:8/2/2010 3:46:04 AM in:Articles Category:WPF Hits:1450
In Windows Presentation Foundation, the screens are built with a dialect of XML called Extensible Markup Language (XAML). XML is data centric and is viewed as a technology in its own right. Data on certain web pages or a web service request (response message) is in the form of an XML document.

Introduction

In Windows Presentation Foundation, the screens are built with a dialect of XML called Extensible Markup Language (XAML). XML is data centric and is viewed as a technology in its own right. Data on certain web pages or a web service request (response message) is in the form of an XML document. Any data (any alphanumeric character) is tagged, as the rules for XML are very strict. That is, controls, images, or any item that are marked up on a page via HTML comprises the presentation content. Alphabetic letters or numbers are separately tagged via XML. The idea is to separate the presentation content on a web page from the data. This outputs a more dazzling-looking page. XAML is more declarative than imperative. By declarative, I mean that a control is specified as an XML element with attributes and sub-elements to describe what the control will look like. You do not have to be concerned with how this done because when you tell WPF what you want, it will figure out how to build the controls (instantiating objects and assigning properties) under the hood. This parallels dragging and dropping a control onto a Windows Form. The partial classes enable code to be generated, where the developer is only responsible for writing the event handler code. In addition, the designer is split between a graphical design surface on top and XAML on the bottom. The designer works the same as Windows Forms in that you can drag and drop controls onto it and edit them in the Properties window. But XAML is new, and we therefore must take a close look at XAML and define some terms that are used in WPF. 

In Windows Forms, everything translates directly into code. However, WPF translates its user interface to XAML, which gets compiled into code later. This is a key distinction: XAML compiles into a binary form called BAML. At this point, however, it is not necessary to go into a description of BAML Just note that when working in the UI designer for a WPF project, Visual Studio 2008 produces XAML, instead of code for all UI elements.

<Window x:Class="MainWindow1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<
Grid>
</
Grid>
</
Window>

The XAML defines a window with a title, dimensions, and an empty grid. A later section on layout explains the grid. Because it's XML, you also have namespaces: xmlns and xmlns:x. Windows are often associated with a code-behind file, which is C#. But where does the C# code come into play? WPF uses events, just like Windows Forms, so you need a place for the handlers to go, which is 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;
public partial class Window1 : Window
{

public Window1()

{

InitializeComponent();

 }

 }

Notice that the Window1 class in the code-behind is partial and that its constructor calls InitializeComponent. In Windows Forms, the InititalizeComponent was in a separate file that you could get to. However, WPF generates InitializeComponent from the XAML. You see, WPF will ensure that the XAML creates a partial class named Window1 with an InitializeComponent method, and then C# will combine and compile the partials. If you get an error message that underlines the InitializeMethod, then drag your mouse over that underline noting the error. A box should appear that when clicked, gives you the option to generate a "stub method" to correct the error. 


XAML Controls

XAML has all the controls you've come to expect from Windows—buttons, check boxes, radio buttons, list boxes, combo boxes, menus, scroll bars, sliders, and so on. This sample demonstrates some of the common controls provided in Longhorn. You can see the results in below figure 

Figure . An example of XAML controls


<Border
       xmlns="http://schemas.microsoft.com/2003/xaml"
       xmlns:def="Definition"
       Background="BlanchedAlmond" >
<DockPanel>
  <Menu DockPanel.Dock="Top">
    <MenuItem Header="File">
      <MenuItem Header="New" />
      <MenuItem Header="Open" />
    </MenuItem>

    <MenuItem Header="Edit">
      <MenuItem Header="Cut"/>
      <MenuItem Header="Copy"/>
      <MenuItem Header="Paste"/>
    </MenuItem>
  </Menu>

<FlowPanel>

<Button> Button </Button>
<Border Width="15"/>

<CheckBox Checked="true"> CheckBox </CheckBox>
<Border Width="15"/>

<RadioButtonList>
  <RadioButton> RadioButton 1 </RadioButton>
  <RadioButton Checked="true"> RadioButton 2 </RadioButton>
  <RadioButton> RadioButton 3 </RadioButton>
</RadioButtonList>
<Border Width="15"/>

<ListBox>
   <ListItem> ListItem 1 </ListItem> 
   <ListItem> ListItem 2 </ListItem> 
   <ListItem> ListItem 3 </ListItem> 
</ListBox>
<Border Width="15"/>

<ComboBox>
   <ListItem> ListItem 1 </ListItem> 
   <ListItem> ListItem 2 </ListItem> 
   <ListItem> ListItem 3 </ListItem> 
</ComboBox>
<Border Width="15"/>

    <DockPanel>
      <VerticalSlider DockPanel.Dock="Top"  Height="200"
             Minimum="0" Maximum="255" Value="75"
             SmallChange="1" LargeChange="16"/> 
      <Text DockPanel.Dock="Bottom">Slider</Text>
    </DockPanel>
<Border Width="15"/>

    <DockPanel>
      <VerticalScrollBar DockPanel.Dock="Top" 
             Minimum="0" Maximum="255" Value="125" Height="200"
             SmallChange="1" LargeChange="16"/> 
      <Text DockPanel.Dock="bottom">ScrollBar</Text>
    </DockPanel>
<Border Width="15"/>
   
<TextBox> TextBox </TextBox> 

</FlowPanel>
</DockPanel>
</Border>


XAML also allows you to combine elements and controls to create rich effects. We call this combining of elements control composition, and it is one of the most powerful aspects of Longhorn. For instance, to create a button with an image, you put an Image element inside Button:


<Button> 
  <Image Source="tulip.jpg"/>
</Button>

To have both an image and text in the Button, as you can see in Figure 3-11, we use our old friend DockPanel:


<Button> 
  <DockPanel>
     <Image Source="tulip.jpg"/>
     <Text DockPanel.Dock="fill" VerticalAlignment="center"> Button 
         <Italic>with Image!</Italic>
     </Text>
  </DockPanel>
</Button>

Figure : A button with an image and text

You can put pretty much anything inside anything, including this strange example of a CheckBox inside a Button:


<Button> 
  <CheckBox Checked="true"> CheckBox </CheckBox>
</Button>

Composition is powerful enough that many of the Longhorn controls are actually defined using composition. For instance, a ScrollBar is actually two buttons and a slider, plus some event handler logic to hook them together.

XAML also includes some control "primitives," which are primarily used with control composition to build larger effects. For instance,ScrollViewer takes one child (typically a panel) and adds scroll bars to it. This example places a very large list of CheckBox elements inside aScrollViewer, something which prior to Longhorn required a separate control such as Windows Forms' CheckedListBox:


<Border BorderThickness="1" BorderBrush="black">
  <ScrollViewer Height="100" Width="200">
    <GridPanel Columns="1">
      <CheckBox Checked="true"> CheckBox 1</CheckBox>
      <CheckBox Checked="true"> CheckBox 2</CheckBox>
      <CheckBox Checked="true"> CheckBox 3</CheckBox>
      <CheckBox Checked="true"> CheckBox </CheckBox>
      <CheckBox Checked="true"> CheckBox </CheckBox>
      <CheckBox Checked="true"> CheckBox </CheckBox>
      <CheckBox Checked="true"> CheckBox </CheckBox>
      <CheckBox Checked="true"> CheckBox </CheckBox>
    </GridPanel>
  </ScrollViewer>
</Border>

comments powered by Disqus
User Profile
Toni bhalla
Team Lead at Wipro
Hydrabad , India
Email :You must Log In to access the contact details.
Latest Post from :[email protected]
XAML An Intoduction
View: 1450 | Submitted on: 8/2/2010 3:46:04 AM
JSON An Introduction Part2
View: 1529 | Submitted on: 7/28/2010 7:39:49 AM
Google Interview Questions
View: 2060 | Submitted on: 7/22/2010 1:42:10 AM
Submit Articles | All Post of This User..

All rights reserved to dotnetcodes. Logos, company names used here if any are only for reference purposes and they may be respective owner's right or trademarks.
Best viewed at 1024 x 768 resolution with Internet Explorer 5.0 or Mozila Firefox 3.5 or Google Crome and higher