Creating XAML Designer in Window Phone 7

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..........