Creating XAML Designer in Window Phone 7

Riya Sehgal
12y
8.5k
0
0

Article

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:

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);
        }
    }
}