Dynamic Menu Sample

Description

This sample demonstrates how to develop a dynamic user interface, which can be layed out in code or in xml, or a combination of both. This sample also provides a library that can be directly placed into your project solution. The sample shows a multi-page scene which demonstrates the functionality of the Dynamic Menu controls and features.

Sample Overview

When launched, the sample shows two sections. The Page Buttons can be used to choose between three different sets of controls, which are shown with a checkerboard background. Note that this sample can be used either in landscape or in portrait modes.

Page 1

This page demonstrates transitions: effects that can be applied to a button to make a user interface come alive, as seen in most modern games. These controls are layed out in code. The first button changes to a random color (with a random alpha component) when you tap it. The second responds to a tap event by incrementing a value. The third is moved in code when you tap it. The last button makes use of a transition that increases its size.

The transitions are accomplished using the Transition class, which allows you to change the size, position, and color of a control, or any combination of these over a given amount of time. The "Change Hue" button only changes the color of the control, while the "Get Big" button uses both position and size, so that the button gets larger but remains in the same place. The Transition class allows you to create a few default animations easily: Fly out, Fly in, Fade out, and Fade in

The "Bounce" button shows how you can modify the properties of a control at run time, in this case changing the position of the button.

The code used to set up this page can be found in DynamicMenuSample.cs by searching for "Page 1"

Page 2

This page is one of two pages loaded from xml documents. The controls in this page are defined in the Menus\MenuPage2.xml file of the Content project. Shown here are an image and a multiline text control, which wraps based on the width of the control.

To see how this Page is loaded at run time, search for the function LoadControls in DynamicMenuSample.cs

Page 3

This page is one of two pages loaded from xml documents. The controls in this page are defined in the Menus\MenuPage3.xml file of the Content project. Shown here are a label, a progress bar, and a button. Click on the button to change the position of the progress bar.

To see how this Page is loaded at run time, search for the function LoadControls in DynamicMenuSample.cs

Adding the Dynamic Menu controls to your Windows Phone Project

You can include the controls from this sample directly into your own project in a few steps. You can also extend the controls and create new ones using the pattern the existing ones use

To add the DynamicMenu library to your solution do the following:

• Copy the DynamicMenu folder into your solution's directory
• From within Visual Studio, right click on your solution in the Solution Explorer and choose Add->Existing Project
• Add both the Phone and the Windows projects (you will need the windows project to compile xml content)
• Add a reference to your phone project by right clicking on the project in the Solution Explorer and choosing Add Reference...
• Change to the Projects tab and choose DynamicMenu - Phone
• Add a reference to your content project by right clicking on the project and choosing Add Reference...
• Change to the Projects tab and choose DynamicMenu - Windows

You will now be able to use the Dynamic Menu controls, either with xml definitions or within code, as demonstrated in this sample.