By Larry C. Bell
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.
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).
Microsoft®, MSDN®, Windows®, and Visual Studio® are either registered trademarks or trademarks of Microsoft® Corporation in the United States and/or other countries.
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.
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 http://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.
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 is installed t
The installed folder tree will be as follows:
├─Mobiform XAML Browser
Open the application
by clicking (either single or double, consistent with your folder settings) on
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.
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.
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 is structured like XML documents.
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 /.
example: <Button width=10 height=5 ID=upBtn>Up</Button>
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.
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 width=10 height=5 ID=upBtn Canvas.Top=100>
</ Canvas >
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.
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.
The top of the menu bar has a label with the name of the menu that is displayed.
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.
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.
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 next three buttons are for the File, Setup, and Help menus. See the sub menus below. The Shutdown button will close the application.
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.
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 , the Adding, Deleting, and , 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.
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.
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.
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.
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.
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 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">
</ PathGeometry >
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.
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.
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.
Select the Setup menu then select the Preferences menu. You will see the items that can be changed.
To see the description of a control in the Preferences menu, hover the mouse pointer over the control.
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.
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.
The text area can be made shorter or taller with the buttons.
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.
The Window Maximized check box will make the window either normal size or maximized.
There is a box that can be used to select the number of buttons in the menu. It can either be selected or typed.
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 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.
main you may either use the Setup submenu buttons or make the changes.
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 file and will be used by the XAML Editor when the appropriate menu is loaded again.
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 file will be used by the XAML Editor when the file is saved and the appropriate menu is loaded again.
If you use a to edit file,please be mindful offollowing.
· The will be listed in the Main Menu in the order they appear in 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.
· the File, Setup, Help or Shutdown or type s if they are altered in any way.
· All items in the Main Menu must start with the word category.
· All must have a starting tag and an ending tag with optional menu items between them.
· All menus (including submenus) must be of type menu.
· that is shown on the Main Menu button
· Ensure attribute valuesare
· If you want a pop up description of the button then complete the comment attribute as desired. See the example below.
· Category Example:
<category type="menu" name="Root Elements" comment="Elements that can be the parent element for all other elements. Must have only one root element.">
· 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.
o Must have a self ending tag and must not have an ending tag.
o Must be of type element.
o that is shown on the menu button This name must match exactly the element name spelling and capitalization as in the elements file.
o The comment attributes for elements are optional and have no affect on the program. They are for the readers understanding only.
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 type="element" name="HorizontalSlider" comment=""/ >
To add a category to the main menu, copy one of the existing and paste it to the desired location or type it in. See the example below.
<category type="menu" name="the name you want to appear on the button" comment="the description you want to appear when the mouse pointer is over the button">
To delete a category from the main menu, delete the existing y from the starting tag to the ending tag with all the menu items between them.
Follow the rules as above and make desired changes.
available for theyou may either use the Setup submenu buttons or elements If you are adding an element, also follow the directions in the Adding, Deleting, and 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 . See the following sections on how to edit these files.
From the Main Menu click on the Setup button. From the Setup menu use one of three buttons to modify the . The changes will be saved to the elements 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 elementsfile. 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 elementsfile.
Forms will appear and prompt you for the information to make the desired changes.
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 file will be used by the XAML Editor when the elements file is saved and the XAML Editor is restarted.
If you use a to edit elements file,please be mindful offollowing.
· 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.
· 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 attribute valuesare
· 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 name="Button" type="XAML" comment="Represents the standard button component that inherently reacts to the Click event. The Button control is one of the most basic forms of user interface (UI). The Button element allows child elements of any type.">
<parent name="ButtonBase" />
<attribute name="IsCancel" type="bool" comment="Gets or sets a value that indicates whether a button is the cancel button." />
· Elements may have a Namespace and/or Assembly element between the starting tag and an ending tag. The only necessary attribute is name.
<Namespace name="System.Windows.Explorer.Dialogs" />
<Assembly name="emailwiz.dll" />
In elements file, the attributes contain a type for the data type of the attribute. Every element attribute data type in the elements file must be listed in the multiStyleColumnTypes.xml file. You must use a to edit multiStyleColumnTypes.xml file.
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
The ComboBoxTypes must also be listed in the dataTypes.xml file, which contains all the discrete values for the ComboBoxTypes.
You must use a to edit dataTypes.xml file. Please be mindful offollowing.
· 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.
<PenLineJoin Description="Enum which descibes the drawing of the corners on the line.">
<Member name="Miter" Value="0" Description="Regular angular vertices."/>
<Member name="Round" Value="2" Description="Rounded vertices."/>
<Member name="Bevel" Value="1" Description="Beveled vertices"/>
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
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.
"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.
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.