Creating XAML Designer in Window Phone 7

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