Create the UI in "Blend"

1. Open Blend for Visual Studio" (2012) from the Start menu under Microsoft Visual Studio 2012.

Figure 15.1: The Blend start up dialog

2. Select New Project

Figure 15.2: The Blend New Project Dialog

3. Select Silverlight (Yes it still says Silverlight!)

4. Select XAML (Windows Embedded Compact)

5. Set Language as C#.
This could also be VB. Note that is no C++ option.

6. Call the application WindowsEmbeddedXamlApplication

7. Create a suitable folder for all your XWE C# apps.
For example:
C:\WINCE800\WindowsEmbeddedXAMLApps

Note: The folder and must not have any spaces in its path.

Figure 15.3: Create a suitable folder for the application under the Windows Embedded Compact tree.

8. Press [OK]

Figure 15.4: The Blend IDE

9. Add some controls, e.g. Button and Textbox, e.g..:

Figure 15.5: The UI layout.

10. Name the Time button TimeButton, the Exit button ExitButton and the TextBox TextBox1.

Note that by default, Blend does not automatically name controls added to the UI unlike .NET UI development tools.
This can be enabled in the Project—>Options – Options Tab (First Option).

11. View associated XAML code in Split View

Figure 15.6: The UI XAML code in Split View.

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="WindowsEmbeddedXamlApplication.MainPage"
	Width="640" Height="480">
	<Grid x:Name="LayoutRoot" Background="White">
	   <Button x:Name="TimeButton" Content="Time"  Click="TimeButton_Click"/>
	   <TextBox x:Name="TextBox1" Height="91" " Width="344"/>
	   <Button x:Name="ExitButton" Content="Exit"  Click="ExitButton_Click"/>
	Grid>
UserControl>

Listing 15.1 – The XAML code for the UI as generated by Blend Visual Designer

Create an event handler for each button

12. Select the Button:

Figure 15.7: Selecting a button in Blend

13. On the Properties tab give the each control a name, including the TextBox:

Figure 15.8: Adding a button event handler in Blend –1  

14. Click the "Lightning" icon next to the "Spanner" icon:

Figure 15.9: Adding a button event handler in Blend –2

15. Double-Click on the Click Event:

Figure 15.10: Adding a button event handler in Blend-3

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;
namespace WindowsEmbeddedXamlApplication
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			// Required to initialize variables
			InitializeComponent();
			this.TextBox1.Text = "Started";
		}
		private void TimeButton_Click(object sender, 
						System.Windows.RoutedEventArgs e)
		{
			// TODO: Add event handler implementation here.			        
                 }
	}
} 

Listing 15.2: The Time Button event handler as generated.

16. Do a Build of the project:
Project—>Build Project

17. Do same for the other Button, and add the event handler code as indicated in bold:

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;
namespace WindowsEmbeddedXamlApplication
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			// Required to initialize variables
			InitializeComponent();
			this.TextBox1.Text = "Started";
		}
		private void TimeButton_Click(object sender, 
						System.Windows.RoutedEventArgs e)
		{
			this.TextBox1.Text=DateTime.Now.ToString();
		}
		private void ExitButton_Click(object sender,
 					        System.Windows.RoutedEventArgs e)
		{
			Application.Current.MainWindow.Close();
		}
	}
} 

Listing 15.3: C# code for button event handlers

18. Build and test the application in Blend

The application can be run and tested for its UI functionality from within Blend. It  will run in a web browser

Note that the desktop version of XAML-Managed Code applications can run out-of-browser.
This is not possible for the XAML for Windows Embedded templates

Figure 15.11: The running WindowsEmbeddedXamlApplication.

19. Press the Time button to test the app.
The Exit button won't do anything in this context.

Figure 15.12: The WindowsEmbeddedXamlApplication exercising the time button press.

NEXT: 15.3 Generate the C++ Windows Embedded XAML project

Click here to provide feedback and input