Introduction
Xaml stands for eXtensible Application Markup
Language. It is a declarative XML-based language created by Microsoft which is
used to initialize structured values and objects. You can think of it as HTML
for Windows applications, but it is really quite a bit more expressive and
powerful. XAML is the language behind the visual presentation of an application
that you develop in Microsoft Expression Blend, just as HTML is the language
behind the visual presentation of a Web page. Creating an application in
Expression Blend means writing XAML code, either by hand or visually by working
in the Design view of Expression Blend.
Windows Phone provides an exciting opportunity
to build applications that are available wherever the user is. These
applications can be just as useful and engaging as anything built for desktop
computing platforms. That is XAML mobile controls for Microsoft Windows
Phone 7, including barcodes and barcode readers, bullet graphs, gauges, dialog
windows, message boxes, sliders, treemaps, and more.
When you open a new windows phone 7 application
you see some auto generated code like in MainPage.xaml file you see some code in
this code the very first 8 lines are very important lines it is required for the
Operating System on the phone to know by them what to do with your application.
Here I am going to create a XAML designer which read XAML at run-time and
producing a dynamic user interface for editing the XAML in Window Phone 7.
Lets start
Step 1: Start new Windows Phone 7
application
Step 2: Go to the MainPage.xaml page and
create a main grid and drag a TextBlock inside the grid for heading:
<Grid
x:Name="MainGrid"
Background="Transparent">
<TextBlock
Height="57"
HorizontalAlignment="Left"
Margin="12,25,0,0"
Name="textBlock3"
Text="XAML
Designer "
VerticalAlignment="Top"
Width="456"
FontSize="25"
/>
</Grid>
Step 3: Create another grid inside the
main grid for controls and xaml code area. Now drag one TextBlock, two
RadioButton's, two TextBox's and one Button and place according to its position
like below:
<Grid
x:Name="LayoutRoot"
Background="Transparent"
Margin="0,78,0,12">
<TextBlock
Height="30"
HorizontalAlignment="Left"
Margin="12,0,0,0"
Name="textBlock2"
Text="Chosse
one shape and Edit if you want"
VerticalAlignment="Top"
Width="456"
FontSize="25"
/>
<RadioButton
Height="72"
HorizontalAlignment="Left"
Margin="12,42,0,0"
Name="radioButton1"
VerticalAlignment="Top"
Content="Ellipse"
Checked="radioButton1_Checked"
/>
<RadioButton
Content="Rectangle"
Height="72"
HorizontalAlignment="Left"
Margin="202,42,0,0"
Name="radioButton2"
VerticalAlignment="Top"
Checked="radioButton2_Checked"
/>
<TextBox
Height="523"
AcceptsReturn="True"
TextWrapping="Wrap"
InputScope="Text"
Name="textBox1"
Text=""
VerticalAlignment="Top"
Background="White"
Margin="0,87,0,0"
/>
<TextBox
Height="492"
AcceptsReturn="True"
TextWrapping="Wrap"
InputScope="Text"
Name="textBox2"
Text=""
VerticalAlignment="Top"
Background="White"
Margin="0,186,0,0"
Visibility="Collapsed"
/>
<Button
Content="Design"
Height="72"
HorizontalAlignment="Left"
Name="button2"
VerticalAlignment="Top"
Width="160"
BorderThickness="0"
Background="Silver"
Click="button2_Click"
Margin="153,600,0,0" />
</Grid>
Step 4:
Create one another grid inside main
grid, ("its containing
DesignArea
grid which display the design") set its
Visibility property as "Collapsed".
Collapsed because it will shows when you click to design button:
<Grid
x:Name="DesignGrid"
Background="Transparent"
Margin="0,0,0,12"
Visibility="Collapsed"
>
<Button
Content="Code"
Height="72"
HorizontalAlignment="Left"
Margin="154,678,0,0"
Name="button1"
VerticalAlignment="Top"
Width="160"
Background="Silver"
BorderThickness="0"
Click="button1_Click"
/>
<TextBlock
Height="63"
HorizontalAlignment="Left"
Margin="12,61,0,0"
Name="textBlock1"
Text="Design
View of you XAML"
VerticalAlignment="Top"
Width="455"
FontSize="25"
/>
</Grid>
Step 5:
Create one more grid inside DesignGrid
to display the design:
<Grid
x:Name="DesignArea"
Background="Transparent"
Margin="12,103,0,84"
Visibility="Collapsed">
// Design Area
</Grid>
Below is the complete
code for MainPage.xaml:
<phone:PhoneApplicationPage
x:Class="XamlDesigner.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignWidth="480"
d:DesignHeight="768"
FontFamily="{StaticResource
PhoneFontFamilyNormal}"
FontSize="{StaticResource
PhoneFontSizeNormal}"
Foreground="{StaticResource
PhoneForegroundBrush}"
SupportedOrientations="Portrait"
Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<Grid
x:Name="MainGrid"
Background="Transparent">
<TextBlock
Height="57"
HorizontalAlignment="Left"
Margin="12,25,0,0"
Name="textBlock3"
Text="XAML
Designer "
VerticalAlignment="Top"
Width="456"
FontSize="25"
/>
<Grid
x:Name="LayoutRoot"
Background="Transparent"
Margin="0,78,0,12">
<TextBlock
Height="30"
HorizontalAlignment="Left"
Margin="12,0,0,0"
Name="textBlock2"
Text="Chosse
one shape and Edit if you want"
VerticalAlignment="Top"
Width="456"
FontSize="25"
/>
<RadioButton
Height="72"
HorizontalAlignment="Left"
Margin="12,42,0,0"
Name="radioButton1"
VerticalAlignment="Top"
Content="Ellipse"
Checked="radioButton1_Checked"
/>
<RadioButton
Content="Rectangle"
Height="72"
HorizontalAlignment="Left"
Margin="202,42,0,0"
Name="radioButton2"
VerticalAlignment="Top"
Checked="radioButton2_Checked"
/>
<TextBox
Height="523"
AcceptsReturn="True"
TextWrapping="Wrap"
InputScope="Text"
Name="textBox1"
Text=""
VerticalAlignment="Top"
Background="White"
Margin="0,87,0,0"
/>
<TextBox
Height="492"
AcceptsReturn="True"
TextWrapping="Wrap"
InputScope="Text"
Name="textBox2"
Text=""
VerticalAlignment="Top"
Background="White"
Margin="0,186,0,0"
Visibility="Collapsed"
/>
<Button
Content="Design"
Height="72"
HorizontalAlignment="Left"
Name="button2"
VerticalAlignment="Top"
Width="160"
BorderThickness="0"
Background="Silver"
Click="button2_Click"
Margin="153,600,0,0" />
</Grid>
<Grid
x:Name="DesignGrid"
Background="Transparent"
Margin="0,0,0,12"
Visibility="Collapsed"
>
<Button
Content="Code"
Height="72"
HorizontalAlignment="Left"
Margin="154,678,0,0"
Name="button1"
VerticalAlignment="Top"
Width="160"
Background="Silver"
BorderThickness="0"
Click="button1_Click"
/>
<TextBlock
Height="63"
HorizontalAlignment="Left"
Margin="12,61,0,0"
Name="textBlock1"
Text="Design
View of you XAML"
VerticalAlignment="Top"
Width="455"
FontSize="25"
/>
<Grid
x:Name="DesignArea"
Background="Transparent"
Margin="12,103,0,84"
Visibility="Collapsed">
// Design Area
</Grid>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Now see
the code behind in MainPage.xaml.cs file
Step 6:
First create two default shapes which
helps the user to load and view some design as a example:
public class
shape
{
public
static string Shape1 =
@"<Canvas>
<Ellipse Canvas.Left=""150"" Canvas.Top=""150"" Fill=""Red""
Width=""225"" Height=""225""/>
</Canvas>";
}
public class
shape1
{
public
static string Shape2 =
@"<Canvas>
<Rectangle Fill=""Blue"" Width=""225"" Height=""225""/>
</Canvas>";
}
Step 7:
Code for Design button click:
this.LayoutRoot.Visibility =
Visibility.Collapsed;
this.DesignGrid.Visibility =
Visibility.Visible;
this.DesignArea.Visibility =
Visibility.Visible;
DesignView();
Step 8:
Code for Code button click:
this.DesignGrid.Visibility =
Visibility.Collapsed;
this.DesignArea.Visibility =
Visibility.Collapsed;
this.DesignArea.Children.Clear();
this.LayoutRoot.Visibility =
Visibility.Visible;
Step 9:
Now create a method to which converts
the xaml code into UI view
public void
DesignView()
{
string design =
@"<phone:PhoneApplicationPage
xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""
xmlns:phone=""clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"">"
+
this.textBox1.Text
+ "</phone:PhoneApplicationPage>";
UIElement root =
System.Windows.Markup.XamlReader.Load(design)
as UIElement;
this.DesignArea.Children.Add(root);
}
Below is the complete
code for MainPage.xaml.cs file:
using
System;
using
System.Collections.Generic;
using
System.Linq;
using System.Net;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Documents;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Animation;
using
System.Windows.Shapes;
using
Microsoft.Phone.Controls;
namespace
XamlDesigner
{
public partial
class MainPage
: PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
}
public class
shape
{
public
static string Shape1 =
@"<Canvas>
<Ellipse Canvas.Left=""150"" Canvas.Top=""150"" Fill=""Red""
Width=""225"" Height=""225""/>
</Canvas>";
}
public class
shape1
{
public
static string Shape2 =
@"<Canvas>
<Rectangle Fill=""Blue"" Width=""225"" Height=""225""/>
</Canvas>";
}
private void
button2_Click(object sender,
RoutedEventArgs e)
{
this.LayoutRoot.Visibility =
Visibility.Collapsed;
this.DesignGrid.Visibility =
Visibility.Visible;
this.DesignArea.Visibility =
Visibility.Visible;
DesignView();
}
private void
button1_Click(object sender,
RoutedEventArgs e)
{
this.DesignGrid.Visibility =
Visibility.Collapsed;
this.DesignArea.Visibility =
Visibility.Collapsed;
this.DesignArea.Children.Clear();
this.LayoutRoot.Visibility =
Visibility.Visible;
}
private void
radioButton1_Checked(object sender,
RoutedEventArgs e)
{
this.textBox1.Text =
shape.Shape1;
}
private void
radioButton2_Checked(object sender,
RoutedEventArgs e)
{
this.textBox1.Text =
shape1.Shape2;
}
public void
DesignView()
{
string design =
@"<phone:PhoneApplicationPage
xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""
xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""
xmlns:phone=""clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"">"
+
this.textBox1.Text
+ "</phone:PhoneApplicationPage>";
UIElement root =
System.Windows.Markup.XamlReader.Load(design)
as UIElement;
this.DesignArea.Children.Add(root);
}
}
}
Step 9:
Build and run the application, the
output of XamlDesigner application shows like below:
Now choose the shape which
you want to draw like I choose Ellipse and click on Design Button
The Ellipse will draw and
shows in different grid
When you click on Code
Button you will go back to the previous step where you choose the shape
Now choose the second shape
and click on Design Button
The Rectangle will draw
Now go back by click on
Code Button and edit the shape like color, size etc.
Click on Design Button and
see the changes
Thank You for reading the
article..........