The XAML Editor is intended to be used by developers who want to create Windows® Applications for the next generation Microsoft® operating system codenamed Longhorn®.

The Longhorn® operating system will use a new Extensible Application Markup Language called XAML. The XAML Editor will allow the developer to easily create the XAML code for applications they are developing.

The XAML Editor does not have a compiler to create an executable file. The developer must use the compiler in the Longhorn® SDK or from a third party such as Xamlon (See http://www.xamlon.com/ for more information) or MOBIFORM (See www.mobiform.com for more information). Hyperlinks to these web sites are provided in the application’s Web Help menu.

Copyrights and Legal Notice

Microsoft®, MSDN®, Windows®, and Visual Studio® are either registered trademarks or trademarks of Microsoft® Corporation in the United States and/or other countries.

Installing The Application

Directions XAML Editor Requirements

The application requires the Windows Installer to be installed. If it is not already installed you can download it from Microsoft.com.

The application requires the Microsoft® .NET Framework 1.1 to be installed. The software is provided on the CD and you will be prompted to install it if your system does not already have it installed. Your hard drive will need about 38 MB of free space to install Microsoft® .NET Framework 1.1.

Your hard drive will need about 5.6 MB of free space to install the XAML Editor software and the Mobiform Corona Browser installer package. The size of the XAML Editor files are less than one megabyte.

The XAML Editor is pre-configured to use the Mobiform Corona Browser to view the output of the XAML files that are created. This software is not mandatory. Other software may be used instead but may not run properly with the XAML Editor. If the Mobiform Corona Browser installer package is not needed it can be deleted.

The application will use 21 to 28 MB of memory when it starts up and may reach up to 59 MB of memory when running depending on the file size of the loaded XAML file.

Directions Directions For Installing The XAML Editor Application

Run the Setup.exe file and follow the wizard prompts and click the appropriate buttons. If you are asked, Would you like to install Microsoft .NET Framework 1.1 Package?, click the Yes button. After the Microsoft .NET Framework 1.1 Package is installed, the installation wizard will install the application and supporting software on your hard drive, add an icon on the users desktop, and add an icon in the Start Menu. The installer files are also available for download at https://lcbell4.tripod.com/softwareman4life/index.html. See the folder tree listing on the following page for the folders that will be created and the files that will be installed in the created folders.

Directions Directions For Installing The Mobiform Corona XAML Browser

The application uses the Mobiform Corona Browser to display the output of the code generated by the XAMLEditor. Run the MobiformXAMLSetUp.exe file in the Mobiform XAML Browser folder. Install the software in the default folder of the installer program or modify the software path in the categories.xml file under the File category and Run File menu item. The software web site is www.mobiform.com. Links to this web site are provided in the XAMLEditor Help section under Web Help.

Application Folder Tree

After the application is installed t~~The~~ he installed folder tree will be as follows:

Program Files\Softwareman4life\XAMLEditor

│

├─XAMLEditor.exe

│

├─preferences.bin

│

├─help

│ │

│ └─XAMLEditorUsersGuide.htm

│

├─xml

│ │

│ ├─categories.xml

│ │

│ ├─classes.xml

│ │

│ ├─dataTypes.xml

│ │

│ ├─elements.xml

│ │

│ └─multiStyleColumnTypes.xml

│

├─Mobiform XAML Browser

│ │

│ └─MobiformXAMLSetUp.exe

│

└─icons

│

└─XAMLcb.ICO

Running The Application

Open the application by clicking (either single or double, consistent with your folder settings) on the file ~~icon~~ icon or name or the shortcut that was created in the installation steps. Please wait for a few minutes while the program loads.

XAML And Its Structure

XAML is a declarative language used to create graphical interfaces for applications. In addition, Visual Basic and C# code can be used with XAML to execute logic and algorithms. In addition to the following text, refer to the web sites listed in the Help section to learn more about XAML.

XAML Element Attributes

The XAML elements are a subset of the Visual Basic and C# classes. They also contain a subset of the class’s events (i.e. Click) and properties (i.e. Width) collectively called attributes. The attributes of the element are used to modify the appearance of the element.

XAML Element Properties

Some of the Visual Basic and C# classes fields are used as XAML properties. The name of the XAML property is similar to the C# or Visual Basic field name. For example, the TopProperty field of the C# Canvas class is the Top property of the XAML Canvas element. If you know how to use a Visual Basic and/or C# classes then you will be familiar with the XAML attributes and properties available. The difference between the attributes and properties is that the properties of an element can only be used by its child elements. See the indentation example below.

XAML Structure

XAML is structured like XML documents.

Starting Tags And Ending Tags

Each element has a starting tag and an ending tag with optional data between them. Notice that the ending tag starts with a back slash /.

Simple Properties

example: <Button width=10 height=5 ID=upBtn>Up</Button>

Complex Properties

example: <Button.width>10</Button.width>

Self Ending Tags

Some elements that don’t require the optional data may omit the ending tag as long as the back slash / is at the end of the element tag.

example: <Button width=10 height=5 ID=upBtn />

Optional attributes of the element or properties of the parent element are included in the starting tag or the self ending tag.

Indentation

The XAML document child elements should be indented deeper than its parent element since it easily shows visually the relationships between the elements. If you want a Button to be in a Canvas then the Button element will be nested inside the Canvas element.

example: < Canvas width=100 height=500 ID=main>

</Button>

</ Canvas >

Root Elements

Since the Canvas in the above example contains all other elements it is called the root element. Every XAML document must contain exactly one root element. See the XAML Overview in the Help Menu for more information.

The XAML Editor will allow you to easily create the XAML code with the proper formatting, indentation, and syntax of the text.

Pop Up Help

Many items have descriptions that will be displayed when the mouse pointer is hovered over them. This is a quick and easy way to find more information about the program without having to read the Users Guide.

In the element’s attributes menu, the button below the Up button will say What is a element, where element is the name of the selected element. Hovering the mouse pointer will display the description of the element. If this description doesn’t pop up (due to a known issue) you may click on the button to display a dialog box with the description.

Using The Menus

The top of the menu bar has a label with the name of the menu that is displayed.

Navigating The Menus With A Mouse Or Keyboard

The menus can be navigated by using the mouse or by using the keyboard. The keyboard tab will move to the next control and shift tab will move back to the previous control. The space bar or enter key can be used to select a button. Using the space bar on a check box will check or uncheck the box.

The Main Menu

All the menus are on the left hand side in a menu bar. The Main Menu is the first menu that is shown when the application starts. The Main Menu consists of several categories and program function menus such as the File, Setup, and Help menus.

The Main Menu Categories

There are numerous XAML elements that are available. In order to make several elements available with a limited number of buttons, the elements are arranged into logical categories and sub menus. Clicking on a category button will reveal either sub menu or element buttons.

The top six buttons are categories of XAML elements. They are Root Elements, Containers, Controls, Grid/Table, Shapes, and Text. Just click on the button for the category you want. A sub menu for the category selected will replace the main menu.

You should usually start the XAML document with an element from the Root Elements menu. Root elements contain all other elements in the XAML document.

The Other Main Menu Buttons

The next three buttons are for the File, Setup, and Help menus. See the sub menus below. The Shutdown button will close the application.

The Bottom Left Menu

Below the Main Menu and sub menus are the Undo and Redo buttons. Below these two buttons are buttons to Cut and Paste text in the text area, Save the contents of the text area to a file, and insert a Code Block in the text area. Below these buttons are two check boxes used to enable and disable the Build Assist feature and to show or hide the Status Line. All of these components are always visible unless you hide them. See Controlling The Layout Of The Menu Bar below for more information.

The Sub Menus

All the buttons in the main menu (except for Shutdown) will bring up a sub menu. Sub menus can also be within sub menus. For example, the Buttons submenu is accessed from the Controls sub menu.

The top button in all sub menus will be labeled Up. This button will always take you back to the menu above the current menu. The idea is that the menus are stacked one on top of another with sub menus under the main menu.

The File Menu

The File menu is used to open, load, and save files. A Run File button is provided that will launch a third party program (if installed) to display the graphical user interface that the XAML document defines. The two companies that make the software to run the XAML files are listed in the Web Help menu. The software comes preconfigured to execute the Mobiform Corona XAML Browser when the Run File is clicked. Other browsers may not work correctly with this application.

The Setup Menu

The Setup menu is used to modify the menu categories, sub menus, and elements, to modify the elements available for the menus, to manage the program preferences, and to register the program. See the Adding, Deleting, and Changing Menus, the Adding, Deleting, and Changing Elements, and the Changing Preferences sections below.

The Help Menu

The Help menu is used to display help information about the program, XAML code, and web links to teach you about how to program with XAML.

Controlling The Layout Of The Menu Bar

The Menu Bar and Text Area Horizontal Size

The user can change the menu bar and text area horizontal size if desired to either show the menu and button labels better or to have more room to view code in the text area. This is accomplished by moving the mouse pointer to the vertical colored bar between the menu bar and the text area until the arrows and double line icon appears (←||→). When the icon appears, click and hold the mouse button then drag the vertical bar horizontally to the desired position, then release the mouse button. The text area and buttons will automatically scale larger or smaller accordingly. This vertical splitter bar can be configured in the preferences in the Setup menu.

Show Or Hide The Status Line

If you do not desire to see this information you may hide the Status Line by deselecting the check box to the left of the Status Line.

Show Or Hide The Bottom Left Menu

Select the Setup menu then select the Preferences menu. You will see a check box labeled Bottom Left Menu Visible. This controls whether the Bottom Left Menu is visible. If the check box is checked the Bottom Left Menu is visible. Use the mouse or keyboard to change the check box state.

Using The Element Attributes Table and Menu

When an XAML element is selected from a sub menu, a table of the elements attributes will appear on the right in the text area. If you want to see a description of the attribute or a data type click on it and read the description in the status line at the bottom of the text area. Choose the desired attributes values by filling in or selecting the desired attribute value to the right of the attribute. The status line will show whether or not the proper data has been entered. It will also show a description of the value selection that was made in combo boxes. The check box to the left of the attribute will automatically be selected if the value is the proper type of data.

Complex Properties vs. Simple Properties

Simple Properties

The table of the elements attributes that is shown in the text area will allow you to insert the attributes for an element in the start tag. These are called Simple Properties. There are some circumstances that this method isn’t appropriate. For example, when you want to nest an attribute within another attribute.

Complex Properties

Complex Properties are element attributes that are in angle brackets all by themselves and are nested in other attribute tags.

Example 1: <Button.width>10</Button.width>

Example 2: <Path Fill="#ffffff">

<Path.Data>

<PathGeometry.Figures>

…

</ PathGeometry.Figures>

</ PathGeometry >

</Path.Data>

</Path>

How To Use Complex Properties

When an XAML element is selected from a sub menu, a table of the elements attributes will appear on the right in the text area. In the menu bar on the left are two check boxes that control the visibility of the table and Complex Properties combo box. To use Complex Properties instead of Simple Properties, click on the Show Complex Properties check box. The Complex Properties combo box will be shown in the menu bar just under the check box and the table will be hidden. Select a property from the list of attributes.

Inserting Code Into The Text Area

After the attribute’s values are entered/selected (see the Using The Element Attributes Menu section above) click on the Insert Code button to insert the code into the text area at the current cursor position. Only the attributes that have a check mark in the check box will be added to the text area. After the code is inserted the cursor position will move to the beginning of the end tag that was just inserted. This allows the user to add a child element immediately without moving the cursor manually. The cursor may be manually moved to any location in the file before the Insert Code button is clicked. New lines of code will always be inserted above the line that the cursor is in. If the current line is blank when the code is inserted, additional blank lines may be inserted.

If you desire to see the inserted code without leaving the element menu, click on the Show Attributes check box to hide the attributes table. Clicking the Show Attributes check box again will show the table.

When you are finished adding elements of the current type, click the Up button to go back to the previous submenu. The table will no longer be shown and you may view the code that was just entered.

If you need to edit the code manually see the next section, Using Build Assist vs. Editing By Hand.

Using Build Assist vs. Editing By Hand

Build Assist is the best way to insert code into the text area. It will prevent most errors so your code will compile. It also will display an error if an element is not recognized. If you don’t like the way the XAML Editor accomplishes this, you may deselect Build Assist in the lower left hand corner to allow you to insert XAML code at any location or to manually edit the XAML code in the text area. This will also disable the unrecognized element warning messages.

If you use Complex Properties and you want to insert a value between the start and end tags of the attribute, you must disable Build Assist and enter the values manually.

Changing Preferences

Select the Setup menu then select the Preferences menu. You will see the items that can be changed.

Descriptions Of The Preferences Controls

To see the description of a control in the Preferences menu, hover the mouse pointer over the control.

Navigation

The Preferences menu can be navigated with a mouse or by using the tab (and shift tab to move backwards) and the enter key. Using the space bar on a check box will check or uncheck the box. Using the up and down arrow keys on a combo box will change the values that can be selected.

Splitter Setup

To change the splitter bar width and/or color select the desired values in the combo boxes by clicking on the down arrow on the right side of the box, then selecting the desired value. An alternate method is to either click on a combo box or press the tab key until the box contents is highlighted then use the up and down arrow keys to change the values. This method will quickly change the splitter bar properties so you can change them until the desired effect is achieved.

Text Area Setup

Height

The text area can be made shorter or taller with the buttons.

Text Formatting

The formatting of the text area can be selected with the remaining controls. They are the font, font size, background color, text color, text color for element names, and word wrapping. The font size can either be selected or typed.

The Color Element Text will allow the element names in the text area to be colored according to the color selection made. If the program takes a long time to color the text, this check box can be unchecked to stop the coloring. It can be restarted where it left off when the check box is checked again.

Window Size

The Window Maximized check box will make the window either normal size or maximized.

Menu Button Setting

There is a box that can be used to select the number of buttons in the menu. It can either be selected or typed.

Saving and Loading Preferences

Once the preferences are selected they can be saved from the Setup menu with the Save Preferences button. These preferences will be loaded when the program is started. They can also be reloaded manually with the Load Preferences button in the Setup menu.

The Status Line

The Status Line shows various information during execution of the XAML Editor.

When you click on an item or select a value in a combo box from the Attributes table, the description of that item will be shown in the status line.

During code editing and insertion the Status Line shows the number of characters in the text area.

If the length of the text in the Status Line exceeds the width of the Status Line, use the left and right arrow keys and/or the Home and End keys on your keyboard to scroll through the text.

If you do not desire to see this information you may hide the Status Line by deselecting the check box to the left of the Status Line.

Adding, Deleting, and Changing Menus

To change the main menu categories and/or the elements listed in each menu, you may either use the Setup submenu buttons or use a text editor or XML editor make the changes.

Using The Setup Submenu Buttons

From the Main Menu click on the Setup button. From the Setup menu use one of three buttons to modify the categories.

Add Category to Menu - Opens a form for the user to add a category to the main menu and category.xml file.

Delete Menu Category - Opens a form for the user to delete a menu category. Change Menu Items - Opens a form for the user to change elements in menu categories.

Forms will appear and prompt you for the information to make the desired changes. The changes will be saved to the categories.xml file and will be used by the XAML Editor when the appropriate menu is loaded again.

Using A Text Editor Or XML Editor

In this guide, words that are in bold print are words and phrases that you will find verbatim in the application and XML files. If you manually edit the XML files you must ensure that these words and phrases are entered exactly as shown (spelling and capitalization, but without bold type). The changes made to the categories.xml file will be used by the XAML Editor when the categories.xml file is saved and the appropriate menu is loaded again.

If you use a text editor or XML editor to edit the categories.xml file, please be mindful of the following.

· The categories.xml file is located in the xml folder.

· The categories will be listed in the Main Menu in the order they appear in the categories.xml file. The order of the items can be arranged as desired.

· The program will work better and the file will be easier to read if you keep the attributes in order of type, name, and then comment.

· All comment attributes can be changed as desired.

· Do not change any of the File, Setup, Help or Shutdown categories name or type attributes. The application will not run normally if they are altered in any way.

Category Menu Items

· Each category has one or more menu items that must start with the word menuItem. This is true for submenus as well as elements.

· The menu items for each category can either be elements or submenus.

· Elements

o Must have a self ending tag and must not have an ending tag.

o Must be of type element.

o The value of the name attribute is the text that is shown on the menu button. This name must match exactly the element name spelling and capitalization as in the elements.xml file.

o The comment attributes for elements are optional and have no affect on the program. They are for the readers understanding only.

· Submenus

o Must have a starting tag and an ending tag with optional menu items between them.

o Must be of type menu.

o If you want a pop up description of the submenu button then complete the comment attribute as desired.

· Menu Items Example:
<menuItem type="menu" name="Sliders" comment="Two kinds of them." >

</menuItem>

Do not change any other aspects of the file. The application will not run normally if the format (schema) is altered.

Add A Category To The Main Menu

To add a category to the main menu, copy one of the existing categories and paste it to the desired location or type it in. See the example below.

</category>

Delete Menu Category

To delete a category from the main menu, delete the existing category from the starting tag to the ending tag with all the menu items between them.

Change Menu Items

Follow the rules as above and make desired changes.

Adding, Deleting, and Changing Elements

To change the elements available for the menu, you may either use the Setup submenu buttons or use a text editor or XML editor to change the values of the name attributes in the elements.xml file. If you are adding an element, also follow the directions in the Adding, Deleting, and Changing Element Attribute and Property Data Types section. If new data types are added to element attributes or properties the data types will need to be added to the multiStyleColumnTypes.xml file and the dataTypes.xml file. See the following sections on how to edit these files.

Using The Setup Submenu Buttons

From the Main Menu click on the Setup button. From the Setup menu use one of three buttons to modify the elements. The changes will be saved to the elements.xml file and will be used by the XAML Editor immediately.

Add Element to XML File - Opens a form for the user to an element to the elements.xml file. Elements that are of type XAML will be available for use in the forms combo boxes that contain element names.

Delete Elements from XML File - Opens a form for the user to delete elements. Elements that are of type XAML will no longer be available for use in the forms combo boxes that contain element names after they are deleted.

Change Element Attributes/Properties - Opens a form for the user to add or delete element attributes or properties in the elements.xml file.

Forms will appear and prompt you for the information to make the desired changes.

Using A Text Editor Or XML Editor

In this guide, words that are in bold print are words and phrases that you will find verbatim in the application and XML files. If you manually edit the XML files you must ensure that these words and phrases are entered exactly as shown (spelling and capitalization, but without bold type). The changes made to the elements.xml file will be used by the XAML Editor when the elements.xml file is saved and the XAML Editor is restarted.

If you use a text editor or XML editor to edit the elements.xml file, please be mindful of the following.

· The elements.xml file is located in the xml folder.

· The program will work better and the file will be easier to read if you keep the attributes in order of name, type, and then comment.

· All elements must start with the word element.

· All elements must have a starting tag and an ending tag with data between them.

· All elements must be of type XAML or nonXAML.

o Use type XAML for all elements that are listed in the XAML Element Reference web site that is maintained by Microsoft. The application contains hyperlinks to the web site in the Web Help menu. The URL is http://winfx.msdn.microsoft.com/library/default.asp?url=/library/en-us/wcp_conceptual/WinFX/port_ref_elements.asp

o Use type nonXAML for all elements that are parent elements of XAML elements.

§ These elements are needed for the attribute and property inheritance of the child elements.

§ These elements will not be available to be selected in the menus.

· The value of the name attribute is the name of the element.

· All comment attributes can be changed as desired. These comments will be shown in the status line when they are clicked on in the attributes table.

· Ensure the attribute values are within quotation marks. For example, name = “Canvas”.

· All elements must have a parent element between the starting tag and an ending tag.

· The parent element must have a name. If the element does not have a parent element then the name must be NONE.

· Elements may have any number of attribute and/or property elements between the starting tag and an ending tag.

· attribute and property elements must have a name, type, and comment.

o If the type value needs to have a list of possible values such as Boolean (true,false) the type must be included in the dataTypes.xml file.

· Element example:

</element>

· Elements may have a Namespace and/or Assembly element between the starting tag and an ending tag. The only necessary attribute is name.

Adding, Deleting, and Changing Element Attribute and Property Data Types

In the elements.xml file, the attributes contain a type for the data type of the attribute. Every element attribute data type in the elements.xml file must be listed in the multiStyleColumnTypes.xml file. You must use a text editor or XML editor to edit the multiStyleColumnTypes.xml file.

ComboBoxType

If the value of the type is one of any number of discrete values, the discrete values need to be displayed in a ComboBox for the user to select one. Having the values in a ComboBox instead of typing the values by the user prevents errors. These types are referred to as ComboBoxTypes. In the multiStyleColumnTypes.xml file, insert the type name (within angle brackets and with a back slash at the end of the type) between the <ComboBoxType> and </ComboBoxType> tags. For example, to insert the Brush type it should look similar to

…

…

</ComboBoxType>

The ComboBoxTypes must also be listed in the dataTypes.xml file, which contains all the discrete values for the ComboBoxTypes.

You must use a text editor or XML editor to edit the dataTypes.xml file. Please be mindful of the following.

· The dataTypes.xml file is located in the xml folder.

· The program will work better and the file will be easier to read if you keep the attributes in order of name, Value, and then Description.

· All data type elements must start with the name of the data type.

· All elements must have a starting tag and an ending tag with discrete values between them.

· All discrete values must start with the word Member and end with a back slash.

· Example

</PenLineJoin>

TextBoxType

If the value of the type is a non-discrete number or non-discrete characters, the values need to be entered in a TextBox by the user. These types are referred to as TextBoxTypes. In the multiStyleColumnTypes.xml file, insert the type name (within angle brackets and with a back slash at the end of the type) between the <TextBoxType> and </TextBoxType> tags. For example, to insert the int type it should look similar to

…

<int/>

…

</TextBoxType>

Appendix A – Glossary

Attribute Attributes for XAML elements are the items that can be modified to change the appearance of the element. For example, height and width. These attributes are used for the element that they belong to.

Avalon "Avalon" is the code name for the presentation subsystem class libraries in WinFX. Avalon provides the foundation for building applications and high fidelity experiences, blending together application UI, documents, and media content, while exploiting the full power of your computer. The functionality extends to the support for Tablet and other forms of input, a more modern imaging and printing pipeline, accessibility and UI automation infrastructure, data-driven UI and visualization.

Source: http://msdn.microsoft.com/Longhorn/understanding/pillars/avalon/default.aspx

"Avalon" is a new graphics subsystem that will enable developers to build applications that provide breakthrough user experiences. It provides a unified architecture for presenting user interfaces, documents and media. “Avalon” also will enable developers to easily take advantage of leading-edge graphics hardware, and will provide native support for declarative, markup-based programming, making it simpler to build Windows-based applications.

Source: http://winfx.msdn.microsoft.com/library/default.asp?url=/library/en-us/gettingstarted/html/ffe748b2-6309-445d-a4f3-9a5eb3ac6c51.asp

discrete 1 : constituting a separate entity : individually distinct
2 a : consisting of distinct or unconnected elements : NONCONTINUOUS b : taking on or having a finite or countably infinite number of values <discrete probabilities> <a discrete random variable>
synonym see DISTINCT. (http://www.m-w.com)

Element An XAML Element is a Visual Basic or C# class that is supported by the XAML Language. These can be used to generate the markup required to create a Graphical User Interface.

Longhorn The code-name for the version of Microsoft® Windows® Operating System that is currently under development. It will have a 32 and 64 bit version as well as home and professional versions.

Property Properties for XAML elements are the items that can be modified to change the appearance of the child elements that are contained within the element. For example, the Canvas element properties (Top, Bottom, Left, and Right) are used to position elements within the Canvas (such as a button) with respect to the Canvas boundaries. These properties are used within the tags of the child elements.

SDK Software Development Kit.

XAML The code-name for the new "Longhorn" markup language. An acronym for Extensible Application Markup Language.

A markup language that maps XML markup to objects in the .NET Framework and WinFX™, enabling developers and designers to work together to create user experiences much the way HTML enables developers and designers to create user experiences. XAML is not Avalon specific, but it is designed to work with the type system of the .NET Framework’s common language runtime.

Source: http://winfx.msdn.microsoft.com/library/default.asp?url=/library/en-us/gettingstarted/html/ffe748b2-6309-445d-a4f3-9a5eb3ac6c51.asp

Credits

http://www.m-w.com

http://winfx.msdn.microsoft.com/library/