xaml designer for .net 3...graphics authoring product that generates xaml documents. it can be used...
TRANSCRIPT
XAML Designer for .Net 3.5
2
Table of Contents
Table of Contents ................................................................................................................ 2
1 Introduction ................................................................................................................. 6
1.1 Aurora for Architects for .NET 3.5 ..................................................................... 6
1.2 Aurora for Architects Features............................................................................ 6 1.3 Who This Guide is For ........................................................................................ 7 1.4 Aurora for Architects Product Support ............................................................... 7
2 AURORA for Architects BASICS: Getting to Know Aurora for Architects ............. 8
2.1 Panels in the Design Environment ...................................................................... 8 2.2 Test Run .............................................................................................................. 9
2.3 View Source ........................................................................................................ 9
3 The Aurora for Architects Workspace ...................................................................... 11
3.1 Document Tree.................................................................................................. 11
3.1.1 Document Tree Icons and Symbols .............................................................. 11
3.2 Current Document Panel ................................................................................... 13 3.3 Toolbox Panel ................................................................................................... 13
3.3.1 Adding an Object from the Toolbox ............................................................. 14
3.3.2 Third Party Control Support ......................................................................... 14
3.4 Resources panel ................................................................................................ 15
3.4.1 Resource Types Understood by the Resources Panel ................................... 15
3.5 Properties Panel ................................................................................................ 16
3.6 Preview Panel.................................................................................................... 17
4 Getting Started with XAML Documents .................................................................. 17
4.1 Creating a New XAML Document ................................................................... 18 4.2 New Document Types....................................................................................... 18
4.2.1 Drawing......................................................................................................... 19
4.2.2 Page ............................................................................................................... 19
4.2.3 Window ......................................................................................................... 19
4.3 Mouse Cursors and Object Adorners ................................................................ 19 4.4 Keyboard Short Cuts ......................................................................................... 21
5 Using Brushes in Aurora for Architects.................................................................... 22
5.1.1 Custom .......................................................................................................... 22
5.1.2 System and Named Brushes.......................................................................... 22
5.1.3 Named Brushes ............................................................................................. 23
5.1.4 System Brushes ............................................................................................. 23
5.1.5 Linear ............................................................................................................ 23
5.1.6 Radial ............................................................................................................ 23
5.1.7 Image............................................................................................................. 23
5.1.8 Visual ............................................................................................................ 23
6 Supported WPF Elements ......................................................................................... 24
6.1 WPF Element Overview ................................................................................... 24
6.1.1 Content Controls ........................................................................................... 24
3
6.1.2 Items Controls ............................................................................................... 25
Headered Items Controls............................................................................................... 26 Headered Content Controls ........................................................................................... 27 6.2 Common Controls ............................................................................................. 27
6.2.1 Button ............................................................................................................ 28
6.2.2 Check Box ..................................................................................................... 28
6.2.3 Expander ....................................................................................................... 28
6.2.4 Group Box ..................................................................................................... 29
6.2.5 Image............................................................................................................. 29
6.2.6 Label ............................................................................................................. 30
6.2.7 Media Element .............................................................................................. 30
6.2.8 Password Box................................................................................................ 31
6.2.9 Progress Bar .................................................................................................. 31
6.2.10 Repeat Button ............................................................................................ 31
6.2.11 Rich Text Box ............................................................................................ 31
6.2.12 Scroll Bar .................................................................................................. 31
6.2.13 Slider ......................................................................................................... 31
6.2.14 Text Block ................................................................................................. 32
6.2.15 Text Box .................................................................................................... 32
6.2.16 Thumb ....................................................................................................... 32
6.2.17 Toggle Button............................................................................................ 33
6.3 Grids / Panels .................................................................................................... 33 6.4.................................................................................................................................. 33
6.4.1 Border ........................................................................................................... 33
6.4.2 Canvas........................................................................................................... 33
6.4.3 Dock Panel .................................................................................................... 34
6.4.4 Frame ............................................................................................................ 37
6.4.5 Grid ............................................................................................................... 37
6.4.6 Grid Splitter .................................................................................................. 42
6.4.7 Ink Canvas .................................................................................................... 42
6.4.8 Stack Panel.................................................................................................... 43
6.4.9 Uniform Grid ................................................................................................ 43
6.4.10 View Box ................................................................................................... 44
6.4.11 Virtualizing Stack Panel ........................................................................... 44
6.4.12 Wrap Panel ............................................................................................... 44
6.5 Items Controls ................................................................................................... 44
6.5.1 Combo Box and Combo Box Item................................................................ 45
6.5.2 Group Item .................................................................................................... 45
6.5.3 Items Controls ............................................................................................... 45
6.5.4 List Box and List Item .................................................................................. 46
6.5.5 List View and List View Item ....................................................................... 46
6.5.6 Menu and Menu Item .................................................................................... 46
6.5.7 Radio Button Item ......................................................................................... 47
6.5.8 Separator ....................................................................................................... 48
4
6.5.9 Status Bar and Status Bar Item ..................................................................... 48
6.5.10 Tab Control and Tab Item ......................................................................... 48
6.5.11 Tree View and Tree View Item ................................................................ 49
6.5.12 Tool Bar Tray and Tool Bar ...................................................................... 50
6.6 Shapes ............................................................................................................... 50
6.6.1 Rectangle....................................................................................................... 51
6.6.2 Ellipse ........................................................................................................... 51
6.6.3 Line ............................................................................................................... 51
6.6.4 Polyline ......................................................................................................... 51
6.6.5 Polygon ......................................................................................................... 52
6.6.6 Polygon and Polyline Pencil ......................................................................... 52
6.6.7 Paths .............................................................................................................. 52
6.7 Specialized Controls ......................................................................................... 53
6.7.1 Access Text ................................................................................................... 53
6.7.2 Content Presenter .......................................................................................... 54
6.7.3 Control .......................................................................................................... 54
6.7.4 Items Presenter .............................................................................................. 54
6.7.5 Resize Grip.................................................................................................... 54
6.7.6 User Control .................................................................................................. 54
6.8 Viewers ............................................................................................................. 55
6.8.1 Document Viewer ......................................................................................... 55
6.8.2 Flow Document Reader ................................................................................ 55
6.8.3 Flow Document Page Viewer ....................................................................... 55
6.8.4 Flow Document Scroll Viewer ..................................................................... 55
6.8.5 Scroll Viewer ................................................................................................ 55
7 Miscellaneous Topics................................................................................................ 55
7.1 File Export ........................................................................................................ 55
7.1.1 Exporting to Raster ....................................................................................... 56
7.1.2 Exporting to XAML ...................................................................................... 56
7.2 Opacity Masks .................................................................................................. 56
7.2.1 Creating a Mask with a Linear Brush ........................................................... 56
7.2.2 Create a Mask with a Radial Gradient Brush................................................ 57
7.2.3 Create an Opacity Mask with an Image ........................................................ 58
7.2.4 Reusing an Opacity Mask ............................................................................. 58
8 Step by Step .............................................................................................................. 59
8.1 Working with Panels in the Workspace ............................................................ 59
8.1.1 Docking a Panel ............................................................................................ 59
8.1.2 Floating a Panel............................................................................................. 59
8.1.3 Stacking Panels ............................................................................................. 59
8.1.4 Joining Panels ............................................................................................... 60
8.1.5 Floating Joined Panels .................................................................................. 60
8.2 Creating Your First XAML Document ............................................................. 61 8.3 Adding and Manipulating 2D Objects .............................................................. 64 8.4 Grouping Radio Buttons Together .................................................................... 66
5
8.5 Adding Content to a Tab Control...................................................................... 67
8.6 Drawing a Line ................................................................................................. 70 8.7 Creating and Manipulating Polylines................................................................ 71
6
1 Introduction
1.1 Aurora for Architects for .NET 3.5
Aurora for Architects is an adaptable WPF (Windows Presentation Foundation) based
graphics authoring product that generates XAML documents. It can be used as a
graphic design program for drawing and customizing unique designs or as a
development design tool to create user interfaces for Window and Web applications.
Every XAML document in Aurora for Architects is built using a series of layers. This
system of layering provides you the freedom to create, embellish and transform
designs and controls within various layouts. Aurora for Architects displays an always-
accessible Document Tree, a visual layer-by-layer map of your document, which lets
you access and edit specific layers of your XAML document without changing the
entire design or application. The XAML produced by Aurora for Architects is
compatible with Microsoft‟s Visual Studio 2008 and Expression Blend. Another
feature of Aurora for Architects is the ability to change the theme (“skin”) of the
application. The user can change to an available application theme by clicking on the
Themes menu item.
In order to run Aurora for Architects, the system will need at least 10MB of RAM
and Windows XP (SP2) or Windows Server 2003 (SP1) updated with the .NET
Framework 3.5 Runtime Components, or Windows Vista (.NET 3.0 comes with Vista
by default).
1.2 Aurora for Architects Features
The following list of features represents a high-level overview of Aurora for
Architects capability to help develop designs and applications with a next-generation
graphical touch. Each section of the User Guide delves into more detail about Aurora
for Architects functionality in each specific area.
Aurora for Architects:
Uses XAML as its native format and allows for viewing/manual editing of
XAML source
Features a plug-in architecture, which allows for third-party plug-ins to further
customize and extend its functionality
Visually authors resolution-independent 2D vector-based graphics
Searches for, and visually locates, individual objects in large XAML
documents
7
Pans, Internet Explorer-Style, multi-directionally through large documents
Stores clipart galleries of XAML documents for reuse or alteration
Exports XAML documents to raster images
1.3 Who This Guide is For
This User Guide is for Software Architects and designers who are designing user
interfaces for WPF Windows or Web Applications. This Guide may also provide
readers with a better understanding of the functionality inherent in the WPF API.
1.4 Aurora for Architects Product Support
Mobiform‟s support team administers an online Aurora for Architects support forum.
Our team attempts to respond to inquiries made through the forum and by phone or
email within one business day. The Aurora for Architects support forum can be
located online at
http://www.mobiform.com/forum
If you wish to email us, please direct your query to the appropriate email address:
For general inquiries: [email protected]
For technical support: [email protected]
For sales and training: [email protected]
If your query requires immediate attention, please contact us directly at
+1.352.564.9610 (or toll free in Canada and the U.S.A. at 1.877.FOR.XAML
(1.877.367.9265) between the hours of 8:00am to 5:00pm EST (Monday to Friday).
If you have any comments or questions regarding this User Guide, please contact us:
Mobiform Software, Inc.
1255 N. VantagePoint Dr.
Crystal River, FL 34429
U.S.A.
Telephone: +1.352.564.9610
Toll free: 1.877.367.9265 (in Canada and U.S.A.)
Fax: +1.352.564.9611
8
2 AURORA for Architects BASICS: Getting to Know Aurora for Architects
2.1 Panels in the Design Environment
Aurora for Architects workspace is comprised of a number of panels – Document
Tree, Toolbox, Resources, Property Panel and Preview. Each panel has a title bar at
the top, a “grip” in the left-hand corner, a hide/expand arrow and a close icon in the
right-hand corner.
By default, panels are expanded (the arrow on the title bar faces upward) so that you
are able to see its contents. To collapse a panel in order to hide its contents, click on
the upward-facing arrow and the panel will minimize to the size of its title bar. To re-
expand the panel, click on the arrow (now downward facing) again.
In order to remove a panel from the workspace in the Solution Explorer, click on the
close icon in the right-hand corner. If you wish to return this panel to your workspace
at a later time, click <View> <Panels> from the Menu Tool Bar, and click on the
panel‟s name.
Every panel in Aurora for Architects can be resized. Simply position your mouse on
either of the sides or the corners of the panel to click-and-drag it to a desired size.
The workspace can be customized by moving and repositioning panels. Panels can
“dock” (e.g. connect to the middle or sides of the workspace, or each other); “float”
(e.g. rest on their own within the workspace area), “stack” (e.g. stack one panel atop
another) or “join” (e.g. connect to each other). You can move panels anywhere within
the workspace by positioning your mouse pointer on the panel‟s Title bar and clicking
and dragging the panel to a new location.
See Step-by-Step - Working with Panels in the Workspace
When two (or more) panels are joined together, they automatically convert to tabbed
panels contained together within a shell. The main Title bar indicates which panel‟s
contents are displayed within the shell, and the asterisk preceding the title indicates
that one (or more) panels reside within this shell.
You will notice that the displayed panel‟s tab is a light green color; this also helps
you identify which panel is selected and is being displayed within the shell. The
unselected panel(s) shows as a dark green tab. If you click on the dark green
(unselected) tab, you will notice that the tab color changes to light green, the main
9
Title bar changes its name to the panel you have selected and the contents of this
panel is now displayed within the shell.
Aurora for Architects gives you the option of customizing where your tab positions
reside within the shell. To adjust tab positions, right-click on the main Title bar and
position your mouse over the “Tab Position” selection. This will reveal another
Menu, which allows you to choose where you want your tabs to be displayed within
the shell (Left, Right, Top or Bottom). Click on a selection to reposition your tabs
within the shell.
2.2 Test Run
Aurora for Architects has a Test Run mode. This allows you to “run”, or test, your
current XAML document so you can see how your completed document works
without building your entire application. You can navigate tabs, Menu items and
other user interface components. Please note that Test Run in Aurora for Architects
does not do a compile of your Application and related source code files.
If you are doing a Test Run of a Window, Aurora for Architects will create a clone of
your XAML document and launch the Window. You can close the Window using the
close Button or by hitting the Escape (Esc) key.
You must exit Test Run by clicking on the Test Run icon or its Menu item before
being able to resume the editing of your XAML document.
2.3 View Source
In addition to testing your XAML document, Aurora for Architects also allows you to
view the source (e.g. the actual XAML markup). In View Source mode, you can
manually edit your XAML markup.
To switch to View Source mode, click <View Source> in the icon Tool Bar or select
<View> <View Source> from the Menu Tool Bar. In the View/Modify Source
window, there is one search field and one window (which display your XAML
markup).
In the top-left-hand corner of the View/Modify Source window is a search field
where you can perform keyword searches for objects in the markup. When you type
in a keyword and click <Find>, the first instance of this keyword found in the markup
is highlighted in blue. If you continue to click <Find>, the keyword search proceeds
consecutively through the markup, highlighting in blue each following instance of the
keyword. When the search cannot return any new instances of the keyword, a dialog
10
box with the words “No more matches found” appears. Click <OK> in this dialog box
to return to the markup, to restart the current search or to begin a new search.
If you do not wish to make any manual edits to your XAML markup, clicking <OK>
will return you to the Solution Explorer.
You can manually change the XAML markup by clicking on the area you want to edit
and typing in your changes. To automatically update the XAML markup with your
edits, click <Apply>. If your markup is correct, a dialog box will appear with the
message, “Syntax is Correct”. Click <OK> on this dialog box, which will then
disappear, and click <OK> on the View/Modify Source window to return to Aurora
for Architects main workspace.
If there are errors in your manually typed code, you will notice that the markup font
becomes red and the Error in XAML dialog box appears. The contents of this dialog
box will provide you with a short description of the error in your markup. In some
instances, this description will also reference the line and position number of your
error. Once you have reviewed the nature of the error, click <OK> to close the Error
in XAML dialog box and to return to the markup. You can then make your
correction(s) and any other changes to the markup. Click <Apply> again and if
Aurora for Architects determines your code is error-free, you will see the “Syntax is
Correct” message. Click <OK> on this dialog box, which will then disappear, and
click <OK> on the View/Modify Source window to return to Aurora for Architects
main workspace.
If you wish to discard any edits and return to the Solution Explorer, click <Cancel> at
anytime.
If you have unsaved changes and click <OK> to exit View Source mode, the Apply
Changes window appears to ask you whether you want to apply your edits to the
markup. Clicking <OK> will take you through Aurora for Architects markup-
checking process described above. Clicking <Cancel> will discard your edits and
return you to the Solution Explorer.
If you are making a number of manual changes to the markup, it is advised that you
save these changes with <Apply> as you work through the document. By updating
your edits, you reduce the risk of losing all manual changes if you accidentally click
<Cancel>.
11
3 The Aurora for Architects Workspace
3.1 Document Tree
The Document Tree Panel holds the Document Tree (also referred to as the Logical
Tree) that corresponds to the XAML document you are currently editing. The
Document Tree is a hierarchical visual representation of all the elements in your
workspace. The Document Tree panel remains empty until you create a new or open a
XAML document.
The purpose of the Document Tree is to:
1. Provide you with a visual reference of your document‟s structure
2. Indicate how an object relates to another object
3. Enable you to choose layers or objects within in the document in order to add too,
edit or delete these layers or objects
3.1.1 Document Tree Icons and Symbols
12
The Document Tree displays icons of each object in your document, as well as
three different symbols that help keep track of where you are (e.g. which object is
selected for editing) in your XAML document.
Blue ellipse with an inverted tree: The blue ellipse, shown to the left of the
object‟s icon, indicates which layer is selected for editing. You will notice that
this symbol moves through the Document Tree as you move in and out of
different layers, but it does not always show to the left of every icon.
Blue circle: The blue circle, shown to the left of either the object‟s icon or the
blue ellipse, indicates exactly which object is selected for editing.
Plus or minus sign: The plus or minus sign, shown on the far left of the
Document Tree, indicates whether that section of the Document Tree can be
expanded (to show all the different objects contained within) or minimized.
By default, the Document Tree‟s content is minimized (e.g., a plus sign is
visible). Click on the plus sign to expand and view the contents (which causes
the plus sign to change to a minus sign) and click on the minus sign to
minimize the contents.
Aurora for Architects works in layers. Aurora for Architects maintains an „Active
Layer‟ at all times. You can choose to edit, add, remove and reposition objects on
that layer only.
You can change layers two different ways. You can double-click on a Tree View
Item (a layer) in the Document Tree to make it the active layer, or you can
double-click on a suitable object (a layer) on the edit surface to make it the active
layer.
Generally, the following can be considered an editable layer in Aurora for
Architects:
1) Any Canvas, Panel, Border, Path, Grid or similar container.
2) Any visible objects derived from Content Control, like a Button.
The following are not considered editable layers:
1) Excluding Path, any Classes derived from Shape cannot be an editable layer.
2) Any class that cannot have child controls, like an Image control.
3) Any class derived from Content Control that is collapsed, like a
ComboBoxItem.
4) Any object whose visibility is hidden or collapsed
13
3.2 Current Document Panel
The Current Document Panel is the panel that contains the rendering of your XAML
document. It is this panel that you will interact with to select and reposition your
objects. The title bar is a bright blue color to help differentiate your active XAML
document from the remainder of the Solution Explorer‟s panels.
Aurora for Architects can simultaneously manage more than one open XAML
document, or Document Panel, in the Solution Explorer. If new documents are
opened consecutively (e.g. they are not floated and moved around the workspace), the
Document Panel Title bar changes to a series of separately labeled tabs which
correspond to each individual XAML document. You will notice that the displayed
panel‟s tab is a bright blue color; this helps you identify which XAML document is
selected for editing. The unselected document(s) shows as a dark green tab. If you
click on the dark green (unselected) tab, you will notice that the tab color changes to
blue and the contents of this XAML document are now displayed in the main
workspace.
3.3 Toolbox Panel
The Toolbox Panel holds all the controls, panels, shapes and viewers required for the
creation of XAML documents. These elements are grouped together in organized
sections for ease of use. For example, controls such as Buttons and Check Boxes are
found under the heading of “Common Controls”.
This panel remains empty until you begin a new XAML document.
The contents of the Toolbox will change depending on the currently active layer. For
example, if the currently active layer is a Path the Toolbox will contain path
segments. If it is a Grid, it will contain shapes and controls.
14
3.3.1 Adding an Object from the Toolbox
To add an object from the Toolbox to the edit surface, select the object you want from
the Toolbox and then drag-and-drop that object from the Toolbox to the surface.
How an object is added to the edit surface with the mouse is dependent on a few
variables:
1) The type of object being added.
2) The type of active layer.
Generally, the mouse‟s cursor will indicate how the object you have selected is to be
added to the active layer.
Examples:
Crosshair Cursor: If adding a typical control to an active layer that is a
Canvas or a Grid, select the control from the Toolbox, click on the edit
surface with the left mouse Button and drag the mouse creating the control.
Release the mouse Button when finished drawing.
Add Object Cursor: If adding a typical control to an active layer that is a
DockPanel select the control from the Toolbox, click on the edit surface, this
will add the control to the active layer. The control will automatically be sized
based on the active layer type.
Crosshair Cursor: If adding a Line, Polyline, or Polygon to an active layer
that is a Canvas. Select the control from the Toolbox, click on the edit surface,
move to a new location on the edit surface and click again. A line will be
drawn from the first point to the second, create many as desired, right-click to
finish.
3.3.2 Third Party Control Support
The first Toolbox category is third party (controls). With Aurora for Architects third
Party feature, you can import a custom control from a third party (e.g. a component
vendor or your own in-house custom control) for use in your XAML document.
Custom controls provide additional functionality not present in the WPF API.
To add a third Party control:
1. Click on the third Party category in the Toolbox, and then click <Add WPF
Control>. This opens the Add third Party WPF Control window.
2. Browse for or type in the name of the control you want to import and click <OK>.
This opens the Export Type Explorer window.
15
3. From the drop-down Menu in this window, select your third Party control and
click <OK>. You have now imported this control into Aurora for Architects.
4. Return to the Toolbox Panel and re-expand the third Party category. Your
imported control is now listed below <Add WPF Control>.
5. Click on your custom control to select it. You can now add your third Party
control to the workspace just as you would any other object.
3.4 Resources panel
The Resources panel contains various resources – they can almost be thought of as
“shortcuts” – such as brushes, images, a library (for clipart) and Styles to help with
the creation of your XAML document. This panel can help you save time by holding
customized or frequently used styles or saving your industry-specific clipart.
Resources can be dragged or copied from the Resources panel and dropped onto the
design surface:
Clipart and raster images can be dragged or copied from the Resources panel
and dropped on the current layer.
Resources like Brushes can be dragged from the Resources panel and dropped
on selected objects in the design surface.
.
You can add objects to the Resources panel by locating the installation directory for
the Aurora for Architects binaries and finding the Resources folder. This is typically
in Program Files/Mobiform Software/Aurora for Architects. Here you can add or
remove XAML documents or Raster images and Aurora for Architects will use them
in the Resources panel the next time Aurora for Architects is started.
Some resources have a „Copy” context Menu that is available when you right-click on
the resource. This allows you to copy the resource to the clipboard.
Once the resource is copied to the clipboard, you may:
Right-click on the design surface and paste the resource to the design surface.
Go to the Document Tree and select an object in the Document Tree, then
right-click and paste to add the resource to the selected object.
3.4.1 Resource Types Understood by the Resources Panel
3.4.1.1 Brushes
16
This resource is a XAML document with a valid Brush at the Root of the
document. Brushes can be saved to this folder from the Aurora for Architects
Brush Editor.
3.4.1.2 Library
The Library is the clipart included with Aurora for Architects. Everything within
it is completely written in XAML and can be used to quickly build your
document‟s GUI.
You can add your own XAML clipart to the Library as well. The clipart must be a
XAML document with a Visual at the Root, which is typically a Canvas, Grid, or
Panel. Aurora for Architects does not support clipart that has a Page or Window at
the Root.
3.4.1.3 Raster Images
Raster images can include Bitmaps, TIF, PNG, JPG, and any other image format
supported by the WPF Image control.
To add a raster image to the Resource folder copy the raster image to the Raster
images subfolder.
When this image is used by Aurora for Architects as a WPF element or resource,
Aurora for Architects will create an Image control and set the Source property of
the image to point at the Raster image in the Library.
3.5 Properties Panel
The Properties Panel houses the corresponding properties or characteristics of each
object that is currently selected in your XAML document. There you are able to
change attributes of any object without manually editing XAML markup.
By default, this panel has five Buttons at the top; these Buttons organize properties in
alphabetical order by category, by type or by properties in use or by class – whichever
is most convenient for you. Below these, Buttons is the „Name” of the object that is
currently selected. If you intend to code against the object with .NET code or script,
or you intend to use the object in Data Binding or animation, the object should be
assigned a name.
17
3.6 Preview Panel
The Preview Panel holds a preview window for your XAML document. This preview
window is a snapshot of the overall document. It is a useful feature for extremely
large and detailed documents that exceed the dimensions of Aurora for Architects
workspace.
By default, this panel is expanded in the top-left corner of the Solution Explorer and
contains only a square, blue Frame until you begin adding elements to a new XAML
document.
If your XAML document does not exceed the workspace area (e.g. it does not require
bottom or side scrollbars when viewed at 100% size), then an entire preview of your
document shows within the blue preview window Frame. If, however, your document
exceeds the workspace area (either because it is a large document that requires
scrollbars or is a document that is being viewed at greater than its 100% size), a red
square Frame will appear inside the preview window. The elements inside the red
Frame correspond to the elements you see in your immediate (e.g. on screen)
workspace area. As mentioned above, this feature helps to keep a “big picture”
perspective when only certain elements fit within the available workspace.
If you have zoomed in on your document, you can go to the PreviewPanel and „drag‟
the red view rectangle to scroll your document.
4 Getting Started with XAML Documents
18
Now that you are familiar with the workspace layout in Aurora for Architects, the next
step to creating XAML documents is learning about the different document categories.
4.1 Creating a New XAML Document
To open a new XAML document, click <File> <New> in the Menu Tool Bar or click
on the <File New> icon. This opens the New Document window.
Once you choose your document template, click <OK>. This immediately opens your
document template, set with Aurora for Architects default values, as a Document
Panel in the center of the Solution Explorer workspace (which was previously an
Aurora for Architects start page). As this document template is now considered a
Document Panel, you will notice that it can be docked, floated, stacked and/or joined
similar to Aurora for Architects other panels. The top-left of the panel‟s Title bar
bears the label “untitled*” until you save and your XAML document.
To save a XAML document, click <File> <Save Document> in the Menu Tool Bar or
click on the <Save> icon. This opens either the Save As or Save Template window,
depending upon the type of XAML document you are authoring. Most XAML
documents are saved as .xaml files in folders on your computer‟s hard drive.
See: Step-by-Step - Creating Your First XAML Document
See: Step-by-Step - Adding and Manipulating 2D Objects
4.2 New Document Types
In order to better understand which document type best suits your purpose, the
following section outlines the differences between Aurora for Architects New
Document types.
Aurora for Architects New Document window provides you with the option selecting
different document categories – Drawing, Page, and Window. Clicking on any of the
categories displays a brief description of the document type and also reveals whether
more than one document template is available for a particular category. The category
description helps you determine what document has the best Root element for your
needs.
After you have selected the type of document you want, you can add one of the
document themes that is available by clicking on the Themes menu item. The theme
you choose will be applied to every element added to the document‟s work surface
that has a background dependency property, and that is set to its default value.
19
4.2.1 Drawing
There are two types of drawing templates in Aurora for Architects:
4.2.1.1 Empty Canvas
This template creates a XAML document with a 400 x 400 pixel Canvas as its
Root element. In WPF, a Canvas panel arranges objects according to their x, y
positions on the Canvas and allows for layering of objects and effects. For these
reasons, the Empty Canvas template is a good choice when creating graphic art
designs, diagrams or printable materials.
4.2.1.2 Empty Clipart Canvas
This template creates a XAML document with a ViewBox as its Root element,
with a 400 x 400-pixel Canvas panel placed inside. In WPF, a ViewBox allows
you to rescale content (whereas a Canvas does not) and either maintain or change
the aspect ratio. Therefore, the Empty Clipart Canvas template is a good choice
when creating clipart graphics that might need to be rescaled.
4.2.2 Page
Aurora for Architects has many Page templates, one of which is an Empty Page
with a Grid as the primary content. A page functions similarly to a Window as a
main area of functionality within an application, but is typically used when
creating a Web Application. The other templates are pre-designed templates that
can enhance and speed up the design process. Some examples of these pre-
designed templates are Billing information and Forgot password dialogs.
4.2.3 Window
The next document category in Aurora for Architects is the Window. Here, you
can choose from a variety of templates, from either an Empty Window, a Grid
Window (a template that creates an empty window with a Grid panel for its
content) or other pre-made Window templates (e.g. a warning dialog box).
4.3 Mouse Cursors and Object Adorners
20
Different cursors and adorners correspond to various object-editing modes. The
following table summarizes these cursors and adorners:
Symbol Meaning
White hand Indicates there are no objects in the cache,
and an existing object can be or is selected
and can be dragged around the workspace
Cross Hair sign Indicates a selected object is in the cache
and can be added to the workspace - this
mouse cursor appears when objects are
being added to another object that specifies
x, y coordinates (e.g. a Canvas or Grid
panel only)
White arrow Indicates you are outside the editable area
of your XAML document, but can click on
and select items in other Solution Explorer
panels
Double-black arrow Used in conjunction with blue object
adorners, and indicates the object is
selected for resizing – a horizontal double
black arrow resizes an object‟s width, a
vertical double black arrow resizes an
object‟s height, and a diagonal double
black arrow resizes both the height and
width property of an object
Circular-black arrow Used in conjunction with orange object
adorners, and indicates the object is
selected for rotation
Disjointed double-black arrow Used in conjunction with purple object
adorners, and indicates the object is
selected for skewing – vertical disjointed
double black arrows skew the object‟s
height along its vertical plane and
horizontal disjointed double black arrows
skew the object‟s width along its horizontal
plane
Important: If the object has been rotated (a
minimum of 90 degrees), these skew
movements will be reversed.
Bold plus sign with the word „object‟ Indicates a selected object is in the cache
and can be added to the workspace - this
mouse cursor appears when objects are
being added to another object that does not
specify x, y coordinates
21
Object Adorners
Color Meaning
Blue Indicates object is selected for editing –
depending upon the mouse cursor, the
object can be either moved about the
workspace or resized
Orange Indicates object is selected for rotation
Purple Indicates object is selected for skewing
4.4 Keyboard Short Cuts
Once you have begun to add objects to Aurora for Architects workspace, you may
need to edit them. Aurora for Architects provides you with a number of different
ways to edit your selected objects using keyboard shortcuts.
Delete – Delete selected objects
Ctrl + C – Copy all selected objects
Ctrl + X – Copy and remove all selected objects
Ctrl + V – Paste last cut or copied objects into current XAML document
Ctrl + Z – Undo last task
Shift + Ctrl + Z – Redo last undone task
Ctrl + S – Save the current XAML document
F1 – Help
There are also other keystroke commands that are valid for editing and moving
selected objects in a XAML document. These keystroke commands are useful for
fine-tuning the layout of the objects in your XAML document.
Shift + Left Mouse Button – Select an object without unselecting previously
selected objects
Ctrl + Left Mouse Button – Toggle select an object without unselecting
previously selected objects (e.g. if object is selected, you can unselect it)
Up Arrow – Move selected object(s) up 1 pixel
Down Arrow – Move selected object(s) down 1 pixel
Right Arrow – Move selected object(s) right 1 pixel
Left Arrow – Move selected object(s) left 1 pixel
Shift + Up Arrow – Move selected object(s) up 5 pixels
Shift + Down Arrow – Move selected object(s) down 5 pixels
Shift + Right Arrow – Move selected object(s) right 5 pixels
Shift + Left Arrow – Move selected object(s) left 5 pixels
22
5 Using Brushes in Aurora for Architects
The Brush Designer allows you to create, add, save and edit brushes you wish to
apply to the elements in your documents.
Brushes are used for specifying the Stroke and Fill properties on 2D graphics. They
are also used to specify the painting of the Background, Foreground and Border
properties for Controls.
The Brush Designer is set up so that your elements are updated as you alter the brush.
Additionally, if you wish to see how the object would appear with a different type of
brush and even make slight modifications then go back to your original choice (or
not).
In Aurora for Architects, there are a number of types of brushes available for use:
Custom, System, Linear, Radial, Image, Drawing and Visual.
5.1.1 Custom
They paint an element with a single color in a uniform manner.
Colors changed and controlled by Sliders: Alpha, Red, Green, Blue, Opacity,
Hue, Saturation and Brightness. Alpha is the amount of transparency in the color
(ARGB).
Default setting is a blue with a linear gradient.
5.1.2 System and Named Brushes
System brushes are brushes that already exist in WPF and are premade. Using
premade brushes reduces the amount of resources required for your graphic or
screen.
23
5.1.3 Named Brushes
Named Brushes are premade static brushes found in WPF. There are close to
200 static brushes in the System.Windows.Media.Brushes class. Named
brushes are frozen and cannot be modified. For example, you cannot use the
opacity property on a named brush.
5.1.4 System Brushes
System brushes are brushes that represent certain colors in Windows, like the
background color for a control. These colors can change depending on the
theme the user is using for Windows.
5.1.5 Linear
A linear brush paints two or more colors in a uniform manner. A series of gradient
stops define the interpolation of the colors. Colors are drawn along a gradient axis
defined by a start and end point.
5.1.6 Radial
A radial brush also uses gradient stops. The axis used for interpolation of the
colors is defined from the center of an ellipse outwards.
5.1.7 Image
This brush paints an object with a raster image.
5.1.8 Visual
A visual brush uses another object as a brush, which is then painted on the
original object. For example, place a Tab Control with some tabs and a rectangle
on a Canvas. Select the Rectangle and modify its fill in the property panel. For the
fill select Visual Brush and use the Tab Control as the visual source for the brush.
24
6 Supported WPF Elements
Historically the text for a Button was located on the Text property. In WPF, a
Button has a Content property, which can take a string or any other WPF element,
allowing you to add an image or Canvas with children as content. Many of the
properties that we look for historically on elements like a „Text‟ or „Caption‟
property are not there.
6.1 WPF Element Overview
WPF has the same type of Windows common controls that were available in Win32.
It also has some additional controls that are new to WPF.
One of the key differences between the WPF controls and those previously used in
Windows development is the ease in which the look and behavior of the control can
be modified.
There are 4 major control groups in .NET 3.0.
1. Content Controls
2. Items Controls
3. Headered Items Controls
4. Headered Content Controls
6.1.1 Content Controls
Content Controls are controls that have a „Content‟ property. The „Content‟
property is an „object‟, which is typically set to a string, but can be set to other
objects like a panel, overriding the appearance of the control.
Some Examples of Content Controls:
Button
Check Box
RadioButton
The Content property on a Content Control does not have to be a string. The
following example creates a Button with an image as its content.
<StackPanel>
<Button>
<Image Source="tulip.jpg"/>
25
</Button>
</StackPanel>
You can also use more complex content, such as a panel that contains an image
and text, as in the following example.
<Border>
<Button Height="100" Width="250">
<DockPanel>
<Image Source="tulip.jpg"/>
<TextBlock>
Button with Image
</TextBlock>
</DockPanel>
</Button>
</Border>
Key Points:
Content Controls are derived from Control
Content Controls do have a Content property
Content Controls do not have an Items collection
Content Controls do not have a Header property
The Content of a Content Control is typically set to a string but can be set to
more complex objects.
6.1.2 Items Controls
Items Controls have an „items collection‟. This collection is generic and accepts
an „object‟ as a valid item. Typically the item is text, but it can be other objects
including visuals.
Some Examples of Items Controls:
ComboBox
ContextMenu
ListBox
TabControl
Typically one would expect that a ListBox would contain ListItems, such as:
<ListBox>
<ListBoxItem>Item 1</ListBoxItem>
<ListBoxItem>Item 2</ListBoxItem>
<ListBoxItem>Item 3</ListBoxItem>
<ListBoxItem>Item 4</ListBoxItem>
<ListBoxItem>Item 5</ListBoxItem>
</ListBox>
26
Key Points:
Items Controls are derived from Control
Items Controls have an Items collection
Items Controls do have a Content property
Items Controls do not have a Header property
The objects in an Items collection can be set to more complex content.
Headered Items Controls
Headered Items Controls have two components: the Header (title/caption) for the
control and the items collection holding the children or content.
Menu Item is an example of a Headered Items Controls. The Header specifies the
label for the Menu Item and the items collection is made p of the sub-menu items.
The following example shows a Menu Item control.
<Menu>
<Menu Item Header="File">
<Menu Item Header="New"/>
<Menu Item Header="New2"/>
<Menu Item Header="subMenu">
<Menu Item Header="subMenu Item1"/>
<Menu Item Header="subMenu Item2">
<Menu Item Header="subMenu Item21"/>
</Menu Item>
<Menu Item Header="subMenu Item3"/>
</Menu Item>
</Menu Item>
</Menu>
Examples of Headered Items Controls:
27
Menu Item
Tool Bar
Tree View Item
Key Points:
Headered Items Controls are derived from the HeaderedItemsControl class
Headered Items Controls have a Header property
Headered Items Controls have a Items Collection
Headered Items Controls do have a Content property
The objects in the Items Collection can be set to more complex content.
Headered Content Controls
The headered content control pattern defines a Header property and a Content
property. The headered content control exists when there is a label or header and a
single content item. Unlike the headered Items Controls, which allow plural
content, this control supports only one content item.
Examples of Headered Content Controls:
Expander
Group Box
TabItem
Key Points:
Headered Items Controls are derived from the HeaderedContentControl class
Headered Items Controls have a Header property
Headered Items Controls have a Content property
Headered Items Controls do not have a Items collection
The Content can be set to more complex visuals.
6.2 Common Controls
Common controls are the building blocks of an application‟s UI – they are the object
users most commonly interact with. One characteristic shared by all common controls
is that they accept only one child object.
28
Aurora for Architects Common Controls section holds many of the most frequently
used UI controls and the uses and unique features of common controls are outlined in
the following sections.
6.2.1 Button
A Button is a rectangular-looking object that is connected to some action – a user
generally clicks a Button and expects an immediate result. Buttons have properties
that allow for aesthetic and behavioral changes. A Button‟s appearance can
change by adjusting its background, foreground (e.g. the text on the Button) or
size, but its behavior can also change if adjustments are made to the actions
connected to the click event (e.g. what happens to the Button when it is clicked by
the user). For example, by changing the Button‟s ClickMode property from its
default setting of „release‟ to „hover‟, hovering the mouse cursor over the Button
(as opposed to clicking and releasing the Button) produces the intended action.
Button is a ContentControl, to modify its text or content use the Content property.
6.2.2 Check Box
A Check Box, in its standard state, is a small empty square with a content field.
Generally, one or more Check Boxes are used to represent whether a particular
item, within a group of items, is selected or not. When a user clicks on the Check
Box to select an item, the small square fills (e.g. with a check mark) to visually
indicate that the item has been selected.
Check Boxes are good for groups of non-exclusive items, where more than one
item in the group can be selected at the same time. This is in contrast to the usage
of a radio Button (further described in the following Items Controls section),
where the selection of an item is presented as an „either/or‟ option.
Similar to a Button, a Check Box‟s appearance and behavioral properties can be
changed. Check Box is a ContentControl, to modify its text or content use the
Content property.
6.2.3 Expander
An Expander is a control that organizes objects by providing a heading and gives
users the ability to expand or collapse the contents. The Expander‟s Header
property is used for the title and can be a string or other Framework Element.
29
The contents of the Expander are set with the Content property and are usually a
Panel or Grid with “children.”
Important: The Expander Control may not work as desired if its Height property
is specified. Ensure the Height property is set to Auto.
6.2.3.1 Using an Expander in Aurora for Architects
1. Create a Canvas as a new document
2. Add an Expander Control to the Canvas. Ensure that its height is set to Auto.
3. Add a Grid to the Canvas, set its Background to red.
4. Select the Grid on the edit surface, right-click and choose Cut.
5. Go to the Document Panel. Select the Expander and right-click and choose
Paste. In the paste target dialog that is displayed, select the Content Property
for the Expander.
6. Test Run the document; expand the Expander showing the Grid. With the
Expander expanded, exit Test Run.
7. In the Document Tree, double-click on the Grid. It should appear as the active
layer for editing.
To toggle the Expander Control from open and closed, use the IsExpanded
property in the Control Panel.
6.2.4 Group Box
The Group Box is a control that is similar to an Expander as it groups similar
items together under a heading. The main difference between the two, however, is
that the Group Box always displays all of its contents, grouped together in an
outlined box.
Contents for a Group Box are added in exactly the same method as contents for an
Expander control. However, since a Group Box does not expand – and therefore
does not have an IsExpanded property – you can proceed directly from creating
the Group Box control to creating the content panel without editing the Group
Box‟s properties.
You can add content to a Group Box by double-clicking on it and selecting a
Framework Element to use as Content. The title of the Group Box is specified
using the Header property.
6.2.5 Image
30
An image control allows you to add pre-designed graphic images or pictures to
your XAML document.
To add an image:
1. From the Common Controls category of the Toolbox Panel, select <Image>.
Add this control to your workspace as you would any other common control.
2. Click on the Properties Panel, scroll down to the Source property and click the
Button. This opens the Navigate Uri window.
3. Here, you can browse for or type in the file name of the image you want to
add to your document and click <OK>.
6.2.6 Label
A label is a control best used for labeling objects in your XAML document.
A label is a ContentControl and its Content property accepts a string or other
WPF Element as content.
6.2.7 Media Element
The Media Element is a control that enables you to add audio or video to your
XAML document similar to the image control.
To add a Media Element:
1. From the Common Controls category of the Toolbox Panel, select <Media
Element>. Add this control to your workspace as you would any other
common control.
2. Click on the Properties Panel, scroll down to the Source property and click the
Button. This opens the Navigate Uri window.
3. Here, you can browse for or type in the file name of the Media Element you
want to add to your document and click <OK>.
Aurora for Architects Media Element control works in conjunction with Microsoft
Corporation‟s Windows Media Player 10 or newer. If you are experiencing
difficulty with this control (e.g. you add an audio or video element, but it does not
appear on screen), check to make sure you are running this version of Windows
Media Player.
31
6.2.8 Password Box
A Password Box control is a type of Text Box used specifically to create a
password control. In addition to changing the appearance and behavior of the
Password Box, you are able to set the number of characters for and appearance of
the password (e.g. a bullet, a star, etc.).
6.2.9 Progress Bar
The Progress Bar is a control with built-in, looped animation (e.g. the “Progress
Bars”) and is commonly used to show that an operation is in progress. The
animated Progress Bars indicate that a user must wait before performing another
task.
By default, the IsIndeterminate property is deselected. By selecting the
IsIndeterminate property, you enable animation on the Progress Bar.
Other commonly used properties for the Progress Bar include Minimum,
Maximum and Value.
6.2.10 Repeat Button
The Repeat Button differs from a standard Button control by firing its Click event
repeatedly while it is pressed. Other commonly used properties on this control are
Interval and Delay.
6.2.11 Rich Text Box
A Rich Text Box is an enhanced Text Box control that works on a FlowDocument
as its Content. The FlowDocument for the control can be accessed from code
using the Document property.
6.2.12 Scroll Bar
A Scroll Bar is a control generally used to facilitate scrolling – through a list of
items or a document with substantial content, for example. Scroll Bars can have
either a horizontal or vertical orientation.
Common properties used on the Scrollbar are Minimum, Maximum, Value, and
Orientation.
6.2.13 Slider
32
A Slider is a control that enables users to select a value from a range of values,
usually from some minimum to some maximum, along a continuum. For instance,
think of adjusting volume on a stereo – the far left-hand side usually represents
low (minimum) volume and the far right-hand side usually represents loud
(maximum) volume, with a range of volume levels in between.
Like Scroll Bars, Slider controls have a horizontal or vertical orientation, a track
and a moveable thumb. A Slider‟s track can be annotated to show starting and
ending points and “ticks” for the different values along the continuum. Unlike a
Scroll Bar, a Slider‟s thumb remains fixed – both in size and in relation to the
value it represents.
Common properties used on the Scrollbar are Minimum, Maximum, Value, and
Orientation.
6.2.14 Text Block
A Text Block is a control for entering and editing blocks of text. This control has
properties for multi-line text wrapping and alignment, which makes it effective
for layout of larger sections of text.
Setting text on the Text Block is done using the Text property.
6.2.15 Text Box
A Text Box is also a control for entering and editing text. This is a very basic
control as it accepts only text as content. Unlike the single-line capability of a
label, a Text Box has an AcceptsReturn property that allows text to appear on
multiple lines. In addition, the Text Box has a TextWrapping property that
provides options for automatically wrapping text within the box‟s parameters.
Setting text on the Text Box is done using the Text property.
6.2.16 Thumb
The Thumb control is a useful control when implementing drag functionality. The
Thumb control has a DragDelta event that fires repeatedly as the control is
dragged.
33
6.2.17 Toggle Button
A Toggle Button differs from a standard and/or Repeat Button in that it toggles on
and off. It has an IsChecked (property that makes the Button appear pressed and
held down) and IsThreeState (first click is normal, second click makes Button
appear pressed and held down, third click releases the Button) properties.
6.3 Grids / Panels
6.4
In WPF, layout is managed by top-level containers, often Panels, Grids or Decorators.
The type of container you choose determines the Style of the layout. The Grids /
Panels category houses different containers for different layouts.
Regardless of the type of panel you choose for your layout, the same basic rule
applies: An object‟s position is always determined by its containing panel. In
addition, a number of panels also handle the size of their child objects.
The development of a XAML document typically begins with the selection of a
container as a Root element. While there are many different types of containers to
choose from, WPF applications often use the following: Canvas, DockPanel, Grid,
StackPanel, Border and Wrap Panel.
6.4.1 Border
A Border panel allows you to create a border around objects. Since a Border panel
is able to accept one child object, it serves as a good base for other layout objects
that do not have border and border thickness properties (such as a Canvas or a
Grid) or for Styles and Control Templates.
To add a child object to a Border, add the border to your workspace, right-click to
clear the cache of this object and right-click again to choose <Edit Layer> from
the context Menu. The Select Base Element window appears, and you can then
choose an appropriate panel for content layout on your border.
Borders have the unique property of CornerRadius. This property softens the
standard 90-degree angle of a corner to create a rounded effect.
6.4.2 Canvas
A Canvas panel explicitly positions objects, starting from the Canvas‟ upper left-
hand corner, according to exact x, y coordinates. As this panel uses the “painter‟s
34
model” (similar to SVG) to render objects, objects are rendered sequentially by
the order of their XAML markup. For example, if you draw two rectangles on a
Canvas and move the first rectangle overtop of the second, the first rectangle
appears underneath, or behind, the second rectangle. Since this rectangle was
drawn, and therefore rendered, first, it cannot layer itself overtop the next objects
drawn on the Canvas.
Although the Canvas panel generally renders its child objects more efficiently
than the dock or Stack Panel (discussed in following sections), one drawback with
the Canvas is that it will not resize itself, which is often required for user
interfaces and localization. As a result, this type of panel is better suited as a Root
element for graphic design artwork than for application UIs.
6.4.3 Dock Panel
A Dock Panel arranges its child objects horizontally or vertically, relative to each
other, in a defined area.
This panel‟s child objects inherit an attached dependency property called Dock
(which shows up in the object‟s Properties Panel after the object has been added
to the Dock Panel), which determines whether the objects are placed above,
below, to the left or to the right of one another inside of the Dock Panel,
depending upon how the Dock property is set for each child object. By default,
Aurora for Architects sets an object‟s dock property to Left.
In addition, the Dock Panel has a unique property known as LastChildFill; this
property specifies whether the last object added to the Dock Panel fills the
remaining space.
By default, Aurora for Architects enables the LastChildFill property (e.g. it is
checked, or set to True). With this property enabled, the last object added to the
Dock Panel automatically appears centered regardless of the Dock property‟s
default setting of Left. For the object‟s Dock property to take precedence the
property on the Dock Panel must be disabled (e.g. unchecked, or set to False); the
Dock property can now be accurately set for this object.
If you want the last object added to your Dock Panel to fill the remaining space
within the panel, with your last object selected for editing, click on its Properties
Panel and set the object‟s Width and Height properties to Auto. If the Dock
Panel‟s LastChildFill property is still enabled, the child object stretches to fill the
panel‟s empty space.
It is important to note here that since a Dock Panel does not operate on the basis
of x, y coordinates, objects are not added to a Dock Panel as they are to a Canvas
35
or Grid (discussed in a following section). Objects cannot be explicitly positioned
in a Dock Panel as they would on a Canvas, therefore, objects cannot be drawn
onto the Dock Panel and/or selected and moved.
To add an object to a Dock Panel:
1. Expand the Grids/Panels section of the Toolbox Panel. Click on <Dock
Panel> to select it, and add it to your workspace as you normally would add a
common control.
2. Right-click for the panel‟s context Menu and select <Edit layer> from the list.
The Dock Panel‟s editor is now initiated. On your workspace, this is indicated
by an orange border around the edge of the Dock Panel.
3. Return to the Toolbox Panel and select the object you wish to add to the Dock
Panel. When you place your mouse over the panel‟s editable area – in order to
add the object you have selected – the mouse cursor changes to a bold plus
sign with the word „object‟.
4. Click to add your object to the Dock Panel.
As mentioned above, objects cannot be drawn and positioned inside a Dock Panel
as the properties inherent in a Dock Panel dictate how its child objects are
positioned.
In order to better understand how child objects behave in a Dock Panel, the
following example illustrates the panel‟s docking and filling behaviors.
Example Three: The Dock and LastChildFill properties in a Dock Panel
1. Click <File New> to begin a new XAML document. For this example, we will
use an empty Canvas, so select <Drawing> from the category list and <Empty
Canvas> from the template list.
2. Then, click on the Toolbox Panel‟s tab (or Title bar, depending upon how
your workspace in Aurora for Architects is laid out) to select it. Expand the
Grids / Panels category and click on <Dock Panel>. Place your mouse cursor
on the editable area where you want to position your Dock Panel. Then click-
and-drag your mouse in a right-and-downward diagonal direction to add the
Dock Panel, then release the mouse.
3. If you wish to reposition your panel, place your mouse cursor – which should
be a white hand – over the area with the panel marked by the blue adorners,
and click-and-drag to reposition the panel.
4. With your mouse cursor positioned overtop of the Dock Panel, right-click and
select <Edit Layer> from the context Menu. This action readies the Dock
Panel for editing / adding child objects. You will notice that the Dock Panel
has an orange Frame around it, which identifies it as the active layer for
editing. In the Document Tree, the drill-down editor is next to the Dock Panel
icon. In addition, if you click on the Properties Panel you will see that the
LastChildFill property is enabled.
36
5. Now you are ready to begin adding objects to the Dock Panel. Click back to
the Toolbox Panel, expand the Common Controls section and select <Button>.
6. Place your mouse cursor over the Dock Panel‟s editable area. The cursor
changes to a bold plus sign with the word „object‟ written below it. This
indicates an object (in this case, a Button) is selected for addition to the
workspace. Click your mouse to add the Button to the Dock Panel and right-
click to deselect it. Your Button should appear in the middle of your Dock
Panel.
7. Ensure your Button is selected and click on the Properties Panel. The attached
dependency property, Dock, indicates a default setting of Left. However, as
the LastChildFill property on the Dock Panel is enabled – and the Button was
the last object added to the panel – the Button automatically appears centered
in the Dock Panel.
8. Since Buttons cannot be drawn onto a Dock Panel, Aurora for Architects adds
Buttons in a default size of 80 (Width) x 25 (Height) pixels. Therefore, the
Button is centered as it attempts to fill the remaining space of the Dock Panel
(due to the enabled LastChildFill property), but physically cannot because of
its size.
9. Now, return to the Toolbox Panel and add another Button to your Dock Panel.
With two objects now in the Dock Panel, you will notice the LastChildFill
property applies only to the second Button. The first Button docks on the left
of the panel (as per its default Dock property setting), and the second Button
centers itself in the space remaining between the right edge of the first Button
and the right-hand side of the Dock Panel.
10. To change where the first Button docks, select the Button, click on the
Properties Panel and scroll to the Dock property. Click on the drop-down
Menu and select <Right>. On your workspace, you will notice the first Button
is now docked to the right-hand side of the panel, and the second Button is
centered between the left edge of this Button and the left-hand side of the
Dock Panel.
11. Select Button2. If you change its Dock property, this Button does not move as
it is still subject to the Dock Panel‟s LastChildFill property. To properly dock
this Button, select the Dock Panel in the Document Tree and disable
LastChildFill. Button2 docks itself to the left-hand side of the panel.
12. Now, let‟s assume you want the last object added to the Dock Panel to fill the
remaining space. As the Dock Panel is still selected, re-enable its
LastChildFill property; Button2 resumes its place in the center of the
remaining Dock Panel space.
13. To get Button2 to fill the remaining Dock Panel space (Width and Height
properties – which currently restrict it from filling the panel) must change.
Click on Button2 to select it, click on the Properties Panel and scroll to the
Width and Height properties. Change both the Length and Height to Auto.
14. On your workspace you‟ll notice Button2 now fills the whole left-hand side of
the Dock Panel as far as the left edge of Button1, now that its size limitations
have been removed.
37
If, upon completion of this example, you disable the Dock Panel‟s LastChildFill
property and keep Button2‟s Width and Height at Auto, Button2 still docks to the
left of the panel, but its height expands to fit the available height of the Dock
Panel.
In WPF, Button controls have hard-wired Width and Height properties. For
example, if you remove a Button‟s Width and Height properties altogether, WPF
still produces a control with a default Width and Height.
When a Button with Widths and Heights set to Auto are combined with either the
Left or Right Dock property, and LastChildFill is disabled, a Button control
stretches its Height to the panel‟s remaining available space but its Width defaults
to the WPF setting. Conversely, when the same is true for the Top or Bottom
Dock property, a Button control stretches its Width to the panel‟s remaining
available space but its Height defaults to the WPF setting. In addition, as seen in
the above example, when LastChildFill is enabled, both the Width and Height of
the control stretch to fill the remaining available space.
6.4.4 Frame
A Frame is a container capable of holding XAML content and supports content
Navigation. The content of a Frame can be set using the Content property, or by
loading external XAML content using the Source property which is a URI to the
content to be hosted.
6.4.5 Grid
A Grid panel consists of adaptable rows and columns and has resizing capabilities
for it and its child‟s/ren‟s objects. As precise spacing for columns and rows can be
set with this panel (using its Margin property), it is a good option as the Root
layout for UIs.
In Aurora for Architects, you must initiate (read: double-click on it) the Grid‟s
editor before you are able add rows and columns. First, add the Grid to the
workspace as you would a Canvas panel. Right-click and select <Edit Layer>
from the context Menu. In edit mode, an orange border indicates the Grid is
selected for the addition of objects.
Two dark green tabs appear across the top and sides of the Grid to define its
number of rows and columns; by default, the Grid has 0 rows and 0 columns and
is zero-based (e.g. the first row and/or column are „Row 0‟ and „Column 0‟,
respectively). There are also three editing Buttons for adding rows/columns
38
(<Insert new row> or <Insert new column>), deleting rows/columns (<Delete
row> or <Delete column>) and changing the row/column width type (<Toggle
Width Type>).
To add or remove rows and/or columns:
1. On the left-hand side of the Grid, there are two Insert New Row Buttons –
these Buttons have a yellow star and green downward-facing arrow.
2. To add rows from the top of the Grid, click the Insert New Row Button in the
top-left corner. To add rows from the bottom of the Grid, click the Insert New
Row Button in the bottom-left corner.
3. New columns are added in the same manner. On the top-left of the Grid, click
the Insert New Column Button to add a new column on the left-hand side of
the Grid. On the top-right of the Grid, click the Insert New Column Button to
add a new column on the right-hand side of the Grid.
4. To remove a specific row or column, click the Delete Button (the red „X‟) in
the grey tab that corresponds to the row or column you wish to delete.
Rows and/or columns can also be added or deleted with the Grid‟s context Menu.
Place your mouse cursor within the Grid‟s editable area and right-click. Choose
<Grid>, <Add> or <Remove> and the option that corresponds to the row and/or
column you wish to add or delete.
Row heights and/or column widths can be sized in three different ways – exact,
relational or automatic.
Exact sizing specifies an exact (or fixed) number of pixels for your row
height or column width. On the Toggle Width Type Button on the Grid editor,
this state is “px”. When adding columns or rows already preset to pixels,
Aurora for Architects defaults their height / width to 10 pixels.
Automatic sizing sets row heights or column widths to the size of the largest
content within the cells of the row or column. This state is not available from
the Toggle Width Type Button on the Grid editor.
Relational sizing (otherwise known as “Star”) creates row heights or column
widths that are weighted proportions (or percentages) of the remaining
available space in the Grid. On the Toggle Width Type Button on the Grid
editor, this state is “”. By default, Aurora for Architects sets the star value to
1 and adds rows/columns accordingly. Star values are discussed further in the
following section.
Row heights and column widths can be adjusted – between pixels (fixed) and
relational (fractional) values – by clicking the <Toggle Width Type> Button for
the corresponding row or column on the Grid editor. You can also click-and-drag
the dashed-Grid cell lines to resize rows or columns.
39
6.4.5.1 Advanced Row Height and Column Width Sizing
Aurora for Architects supports advanced editing of Grid cell height and width
sizing. This functionality is accessed through the Grid‟s context Menu. Place
your mouse cursor within the row or column you wish to change. Right-click,
select <Grid>, and choose either <Column width> or <Row height>,
depending upon your desired changes. A Set Width or Set Height dialog box
appears. Here, there is the option to choose either Automatic, Star (Relational)
or Pixel width or height type.
Pixel: Choose Pixel, enter the number of pixels for your row or column and
click <OK>. The selected row/column in your Grid is now a fixed size and
remains fixed even if the Grid itself is resized.
Automatic: Choose Automatic and click <OK> and the selected row/column
automatically resizes to the width or height of the row‟s / columns largest
object.
It is important to note that this setting should be used only after objects are
placed within the Grid cells; this allows the row or column to properly resize
with its child objects. If a row or column is empty and set to automatic sizing,
the row or column collapses.
Star (Relational): Choose Star, enter a star value for your row or column and
click <OK>. As mentioned briefly above, a row or column height or width set
to relational sizing becomes a proportioned size.
Star values are ratios calculated from the remaining available space in the Grid
and are subject to a certain hierarchy. The total available space in a Grid is
allocated first to rows and columns with fixed pixel row height / column width.
Then, space is allocated to automatically sized rows and columns. Finally,
rows and columns with relational heights and widths share a percentage of the
Grid‟s remaining space.
For example, consider a Grid with two columns that is 1,000 pixels in width.
One column has a fixed size of 100 pixels. The other column is set to relational
sizing.
In order to determine the available space for the relational column, subtract the
width of the column set in pixels from the total width of the Grid (in pixels):
1,000 – 100 = 900 pixels of remaining available space
Since Aurora for Architects defaults Star values to 1, it is easy to calculate the
number of pixels per star in this example. Pixels per star are calculated by
40
dividing the total available width (in pixels) by the total number of Star values
in the Grid:
900 / 1 = 900 pixels per star
Therefore, the size of the relational column is 900 pixels (900 pixels * 1 Star).
If a third column is added with a Star value of 2, how are the sizes of the
columns affected?
The Grid still has 900 pixels of remaining available space, but now the Star
values total 3 (1 Star from the first relational column, 2 Stars from the new
column):
900 / 3 = 300 pixels per Star
Therefore, the first relational column is now a size of 300 pixels (300 pixels *
1 Star) and the new column is a size of 600 pixels (300 pixels * 2 Stars).
These formulas can be used to effectively size and resize any row or column in
a Grid.
The Grid‟s child objects inherit a number of attached dependency properties.
The Row and Column properties specify the starting row and column that
displays the object. RowSpan and ColumnSpan show the number of cells the
object spans, either vertically or horizontally. In addition, the Margin property
specifies the amount of unused space, in pixels, between the Grid cell lines and
the object.
6.4.5.2 Grid Adorners
When an object is added to a Grid, the object receives an extra set of adorners.
These four adorners appear just above the object‟s blue move/resize adorners,
on the object‟s top, bottom and sides. Known as Grid adorners, these assist
with positioning objects within the Grid. They help you attach an object to the
top, bottom or sides of the Grid cell so that the object remains in the position
you desire when the Grid is resized.
Grid adorners are either black or white. A black adorner means that the object
is “locked” in that position (e.g. it is attached to that side of the Grid cell) and a
white adorner means the object is “unlocked” from that side of the Grid cell.
Clicking on the Grid adorners changes them from black to white and vice
versa. By default, Aurora for Architects “locks” an object to the top and left
side of a Grid cell.
41
To better illustrate how Grid adorners work, the following example explains
how objects behave when they are locked or unlocked inside a Grid.
Example Four: Using Grid adorners
1. Click <File New> to begin a new XAML document. For this example, we
will use an empty window, so select <Window> from the category list and
<Empty Window> from the template list. We have chosen a window as the
Root element for this document because a window has resizing capabilities.
When the new document template opens in Aurora for Architects, the
Grid‟s editor is already initiated and the Grid is preset with two rows and
columns.
2. Expand the Common Controls section of the Toolbox Panel and select
<Button>. Add a Button to the first cell of the Grid (Row 0, Column 0).
When you release your mouse, the Grid adorners appear – the top and left
adorners are black to indicate the object is “locked” to those sides of the
Grid cell, while the bottom and right adorners are “unlocked”.
3. With the Button locked in default position, click <Test Run>; a pop-up
window appears with your Button. Resize the window and watch how the
Button behaves. As it is anchored to the top and left side of the Grid cells,
the Button should not move or change its size.
4. Click <Test Run> again to exit Test Run mode. Now, lock all of the
adorners (e.g. click the bottom and right adorner to change them to black).
5. Click <Test Run> again and resize the window. Since the Button is now
anchored to each side of the Grid cell, its appearance is significantly
affected when the window resizes; the Button expands or decreases its
width and height as the Grid enlarges or shrinks.
6. Click <Test Run> again to exit Test Run mode. Now, unlock the left and
right adorner (e.g. click to change them to white).
7. Click <Test Run> again and resize the window. Now that the Button is
anchored to the top and bottom of the Grid cell, its height increases or
decreases when the window is resized; but, the width of the Button should
not change.
8. Click <Test Run> again to exit Test Run mode. Unlock all of the Grid
adorners.
9. Click <Test Run> one last time and resize the window. As the Button is
completely unlocked, or not at all anchored to the Grid, the Button moves
42
up and down or to the left or right when the window is resized. Click <Test
Run> again to exit Test Run mode.
By locking and unlocking the Grid adorners and placing Aurora for Architects
in Test Run mode, you see how your objects behave when their Root element is
resized. It is important to remember that you can only view the affects of your
changes to an object‟s Grid adorners‟ settings in Test Run mode.
6.4.6 Grid Splitter
A Grid Splitter is used to add resizing behavior to a row or column in Grid.
To use a Grid Splitter:
1. Create a Grid with two rows and two columns.
2. Add a GridSplitter in column 2 with the Left, Top, and Bottom anchors set.
3. Test Run and try moving the splitter to change the size of the columns.
6.4.7 Ink Canvas
Ink Canvas is a special „Ink‟ enabled Canvas in WPF that is designed for use with
a Stylus or similar device. It can be made an active layer in Aurora for Architects
for editing. When made the active layer, Aurora for Architects will add Tool Bar
items for affecting the color and size of the pen for drawing on the Ink Canvas. It
will also enable features for erasing and clearing the Ink Canvas.
43
6.4.8 Stack Panel
A Stack Panel is similar to a Dock Panel, but stacks its child objects in either a
horizontal or vertical single line, depending upon its orientation, in a defined area.
However, Stack Panels do not have the capability to wrap their child objects.
Objects are added to a Stack Panel in the same manner as they are added to a
Dock Panel.
By default, Aurora for Architects orients objects to stack vertically. To re-orient a
Stack Panel, scroll down its Properties list and find the Orientation property,
which is set to Vertical. Click on the drop-down Menu and choose <Horizontal>
to re-orient the Stack Panel.
Although the Stack Panel does not have anchoring capabilities for its child objects
like the Grid panel, there is a way to emulate object anchoring for proper resizing.
First, set the Width and Height properties of the Stack Panel to Auto. As long as
the Stack Panel is placed inside a Root element with resizing capabilities (e.g. a
window), the entire Stack Panel resizes along with its Root element. Then,
depending upon the orientation of the Stack Panel, change either the Height (for
Horizontal orientation) or Width (for Vertical orientation) of the child object(s) to
Auto. This, essentially, “anchors” the objects to the edges of the Stack Panel and,
consequently, resizes the child objects when the Root element is resized.
6.4.9 Uniform Grid
The Uniform Grid panel uses an invisible Grid-type layout to evenly space and
arrange its child objects. Objects are added to a Uniform Grid in the same manner
as they are added to a Dock Panel.
By specifying a set number of rows and columns for the Grid with the panel‟s
Rows and Columns properties, objects are sequentially added and evenly spaced
according to the Grid‟s size and number of rows and columns. By default, Aurora
for Architects creates Uniform Grids with 5 rows and 5 columns. Additionally,
the panel‟s FlowDirection property determines from which side objects are added
(e.g. from the left or from the right side).
Unlike the regular Grid panel, the Uniform Grid does not permit editing of
row/column height or width. However, this panel automatically re-adjusts its child
objects on the workspace when it is resized (e.g. it does not require Aurora for
Architects Test Run mode to show how it will resize its contents). However, it
does not alter an object‟s Width or Height as all objects are, by default, anchored
to the left side of the panel.
44
6.4.10 View Box
A View Box panel is a container that can scale its content to any size. A View Box
has a single child property.
6.4.11 Virtualizing Stack Panel
A Virtualizing Stack Panel is identical to a standard Stack Panel except that it is
optimized for rendering large numbers of items. It will „virtualize‟ the items, only
rendering the visible ones as an optimization, if the items in the panel are data
bound. If the items are not data bound, this panel is the same as a Stack Panel.
6.4.12 Wrap Panel
A Wrap Panel arranges child objects sequentially and linearly from left- to-right
within a defined area and “wraps” (e.g. breaks) to the next line when an object
reaches the edge of the defined area. As with a dock or Stack Panel, Wrap Panels
have either a horizontal or vertical orientation, which is adjusted with their
Orientation property, and add objects from either the left or right side depending
upon their FlowDirection. Objects are added to a Wrap Panel in the same manner
as they are added to a Dock Panel.
The Wrap Panel‟s ItemWidth and ItemHeight properties determine the child
object‟s size and layout. By default, these properties are set to Auto.
Since this panel automatically readjusts its child objects on the workspace when it
is resized, it is easy to visualize how this panel rearranges its contents when
placed within a Root element with resizing capabilities. For example, consider a
Wrap Panel with horizontal orientation that contains three side-by-side Buttons.
When the panel is resized to where the edge of the third Button meets the right
side of the panel, the third Button is automatically “wrapped” or shifted
downward to the next line to accommodate the panel‟s new size.
6.5 Items Controls
Items Controls play an important role in building an application‟s UI. Whereas some
controls – like a Button – accept only one child object, an Items Control displays a
collection of child objects. These controls have inherent behaviors that manage the
appearance of their child objects.
45
While WPF allows an Items Controls to contain strings or any other control (e.g. a
Tab Control can contain a List Box), often an Items Controls is used with a specific
child control (e.g. a Tab Control contains a Tab Item control. For your convenience,
Aurora for Architects organizes Items Controls together with their traditional
„matching‟ controls in this section.
6.5.1 Combo Box and Combo Box Item
The Combo Box is a drop-down list of items contained within it and can be
expanded or collapsed at the will of the user. Most commonly, a Combo Box
contains a Combo Box Item (a content control), but it can contain a list of any
FrameworkElements. The Combo Box is commonly used when a user must select
an item from a list.
The following example takes you through a step-by-step process for adding
content to a Combo Box control.
Adding Items to a Combo Box:
1. Click <File New> to begin a new XAML document. For this example, we will
use an empty Canvas, so select <Drawing> from the category list and <Empty
Canvas> from the template list.
2. Then, click on the Toolbox Panel‟s tab (or Title bar, depending upon how
your workspace in Aurora for Architects is laid out) to select it. Expand the
Items Controls category and click on <Combo Box>. Place your mouse cursor
on the editable area where you want to position your Combo Box, click-and-
drag your mouse in a right-and-downward diagonal direction to add the
Combo Box. Then, release the mouse. The Combo Box should be selected.
3. To add Combo Box Items to the Combo Box, return to the Toolbox Panel and
click <Combo Item [add]> once. If you look at the Document Tree, you will
notice a Combo Box Item was added to the Combo Box. One Combo Box
Item will be added each time you click.
6.5.2 Group Item
A Group Item is derived from ContentControl and usually used in the creation of
Control Templates.
6.5.3 Items Controls
An Items Control is the most basic of items-related controls. It organizes and lists
a collection of items within a defined area. Added items are appended to the
46
bottom of a list. Unless the entire control is itself hidden or collapsed, the contents
of Items Controls are always visible. Items Controls are often used in templates.
6.5.4 List Box and List Item
A List Box is an Items Controls. A List Box organizes lists and appends a
collection of items. Most commonly, a List Box contains a List Box Item, but it
can contain a list of any Framework elements.
A List Box has horizontal/vertical scrolling capabilities. Once the number of list
items exceeds the List Box‟s defined area, a vertical Scroll Bar automatically
appears. The placement of items within the List Box can be adjusted through the
box‟s FlowDirection and VerticalAlignment or HorizontalAlignment properties.
Another important difference between a regular Items Controls and a List Box is
the List Box‟s SelectionMode property. By default, a List Box‟s SelectionMode is
set to single, meaning that user is able to select a single item only from the List
Box. The SelectionMode changes to allow a user to select multiple non-
consecutive items or an extended number of items; a user can select a consecutive
group of list items by holding hold the Shift key and making their selection with
the SelectionMode property set to extended.
List Box Items are added to the List Box by clicking <List Item [add]> in the
Properties Panel or by placing the mouse cursor on the editable area of the List
Box, right-clicking and selecting <Add ListBox Item> from the context Menu.
A List Box has no Content property – the items collection is the content. Changes
to List Box Items can be made by adjusting certain properties of the List Box
itself. For instance, a change to the List Box‟s FontSize property cascades through
the box‟s entire list of items. Any List Box Item can be individually customized
by setting its properties separately.
6.5.5 List View and List View Item
While you can add a List View to a layer and add List View Items to a List View
using Aurora for Architects, this class is generally authored by hand assigning a
Grid View to the View property. Authoring with Aurora for Architects is limited
for this control.
6.5.6 Menu and Menu Item
47
A Menu control is a container that organizes its items collection together in
hierarchical groups, through the use of a main Menu (or list) and sub-Menus (or
sub-lists).
While a Menu always appends its items list horizontally, its FlowDirection
property can be set to adjust whether the items are appended from the left or right
of the Menu‟s defined area. A Menu also has layout and resizing capabilities for
its items collection. Once the number of list items exceeds the Menu‟s defined
area, this control automatically wraps the next list item down to the next line. If
the Menu itself is resized to the point where its right edge touches the right edge
of the list items, its items collection is wrapped and reorganized within the
Menu‟s new boundaries.
To add a Menu Item to a Menu select the Menu on the edit surface, then click
Menu Item [Add] in the Items Controls section of the Toolbox. You can also
select the Menu from the edit surface and right-click and select Add Menu Item
from the context Menu.
To add a sub-Menu Item to a Menu Item, click on a Menu Item in the Document
Tree to select it. Then right-click and select Add Menu Item to add a sub-Menu
Item. You can also select a Menu Item in the Document Tree, and click Menu
Item [Add] in the Toolbox to add a sub-Menu Item.
6.5.7 Radio Button Item
A Radio Button Item, in its basic state, is a small empty circle with a content
field. Similar to Check Boxes, Radio Button Items are used to represent whether a
particular item – within a group of items – is selected or not. When a user clicks a
Radio Button Item to select the item, the circle fills to visually indicate that the
item has been selected. Unlike Check Boxes, Radio Button Items are used for
groups where a user must make an „either/or‟ choice from a group of mutually
exclusive options; within the group, no two Radio Button Items can be selected at
one time.
A Radio Button Item accepts either text or a child object as content. To add text
as content, scroll to the Content property in the Properties Panel and input the text
into the content field.
In order for a number of radio Buttons to function together as a mutually
exclusive group, they must be given a group name. Radio Button Items with the
same GroupName property will function together as a mutually exclusive Radio
Button Item list.
Radio Button Items possess an IsChecked property, which specifies if the Radio
Button Item is checked or not.
48
See: Step-by-Step - Grouping Radio Buttons Together
6.5.8 Separator
A Separator is a control without header or content properties; it cannot accept any
child objects. It resembles a horizontal or vertical line (depending upon the Items
Controls it is placed into) and is used as a simple divider to split or separate items
within an items collection into groups.
Separators are commonly used with Items Controls such as Menus, Menu Items,
Tool Bars and Status Bars. Separators are not selectable objects.
To add a Separator in between items in an Items Controls, click on <Separator> in
the Toolbox Panel. The Add Item window appears and asks for confirmation (e.g.
to ensure you intended to add a Separator to your Items Controls). Click <Yes>
and Aurora for Architects adds a Separator to the Items Controls. You then can
continue to add other items and/or content, along with additional Separators, to
the Items Controls.
6.5.9 Status Bar and Status Bar Item
A Status Bar is an Items Controls that most commonly looks like a long
horizontal bar. It is usually located across the bottom of an application window
and contains hints, tips or other information about the status of what is happening
inside an active (e.g. running) application.
Generally, a Status Bar Item is most commonly combined with a Status Bar. The
Content property of the Status Bar Item is then set to text or another
FrameworkElement.
To add items to a Status Bar, select the Status Bar from the edit surface. You then
right-click and select add Status Bar Item, or select Status Bar Item [Add] from
the toolbox. To add other controls directly to a Status Bar, select the Status Bar
from the edit surface, then select the desired control from the Toolbox. The width
and height of the control may need to be adjusted after being added.
6.5.10 Tab Control and Tab Item
49
The Tab Control is an Items Controls configured to display its item‟s collection as
tabs within a defined area – the result looks somewhat similar to files in a filing
cabinet.
The control most commonly used together with the Tab Control is the Tab Item.
The Tab Item is a headered content control. The Header property sets the text or
FrameworkElement to be displayed on the tab of the Tab Item. The Content
property specifies what FrameworkElement is to be displayed on the body of the
Tab Item.
When the Tab Control is resized, its items collection of tabs wraps and resizes
accordingly. The control‟s TabStripPlacement property determines whether the
tabs show at the top, bottom, left or right of the control.
To add a Tab Item to a Tab Control, Select a Tab Control on the edit surface, you
can then right-click and select Add Tab Item from the context Menu. You can
also select a Tab Control on the edit surface, and select Tab Item [add] from the
Toolbox.
See: Step-by-Step - Adding Content to a Tab Control
6.5.11 Tree View and Tree View Item
A Tree View is an Items Controls with some qualities similar to a Menu and a
List Box. The control most commonly used with a Tree View is a Tree View
Item. A Tree View Item is a headered Items Control. The „Header‟ contains the
title or FrameworkElement to be used for the title of the node, the Items
collection can be other Tree View Items or other FrameworkElements.
Like a Menu, a Tree View organizes its items collection into groups in a
hierarchal fashion. While the hierarchal structure is somewhat similar to a Menu
(e.g. the Tree View also uses a main item and a list of sub-items to build an
organized list of its items collection), the Tree View uses a somewhat different
layout as items – should they have connected sub-items – are expandable and
collapsible rather than a part of a pop-up window. For example, when an item has
a related sub-item, a small plus sign (e.g. “+”) appears to the left of the item,
which provides the user with a visual cue indicating that the item can be
expanded. Tree View Items are appended to the Tree View in a top-down manner.
A Tree View will initiate horizontal and/or vertical Scroll Bars if it is resized to
the point where its bottom or right-most edge meets the edges of its contents; this
allows the user to see and access all of its items despite its size.
50
To add a Tree View Item to a Tree View, select a Tree View control on the edit
surface. You can also select a Tree View control from the edit surface and select
Tree View Item [add] from the Toolbox.
To add a sub-Tree View Item to an existing Tree View Item, select the Tree View
Item from the Document Tree, then right-click and select Add Tree View Item
from the context Menu.
6.5.12 Tool Bar Tray and Tool Bar
A Tool Bar Tray is a container for Tool Bars. A Tool Bar Tray allows for limited
repositioning of its child Tool Bars using drag-and-drop. Tool Bar Trays can have
multiple rows of Tool Bars, to set a Tool Bar on a particular row of a Tool Bar
Tray use the Band property on the Tool Bar.
To add a Tool Bar to a Tool Bar Tray, add a Tool Bar Tray to the design surface.
Select it and then click the Tool Bar Item in the Toolbox to add a Tool Bar to the
Tool Bar Tray.
To add items to a Tool Bar, double-click the Tool Bar Tray on the design surface
making it the editable layer. Select the Tool Bar that you want to add items too.
Then go to the Toolbox and select the item you wish to add to the Tool Bar.
Note: Tool Bars sometimes have repainting issues after adding items to them.
Adjusting the size of the Tool Bar or doing a Test Run will help it to refresh the
workspace.
6.6 Shapes
Shapes, such as the Rectangle, Ellipse, Line and Path, are an important foundation for
creating drawings and graphic designs. Shapes are normally used on a Canvas, but
can be used in other containers as well.
Properties that are typically modified on a Shape are the Stroke (the outer edge),
StrokeThickness, Opacity and Fill properties. StrokeDashCap, StrokeDashOffset
properties and StrokeStartLineCap and StrokeEndLineCap properties on the Stroke
apply for all shapes.
In WPF Shapes are first class citizens that act much like controls. Shapes have mouse
events and tooltips and can have Bitmap effects applied to them.
Aurora for Architects allows the rotation and skew of Rectangle, Ellipse and Path
Shapes, but not Line, Polyline and Polygon.
51
6.6.1 Rectangle
The Rectangle draws a basic rectangle shape. The Rectangle has a RadiusX and
RadiusY properties that can be used to curve its corners.
6.6.2 Ellipse
Draws a simple Ellipse shape
6.6.3 Line
Draws a line from X1, Y1 to X2, Y2.
SEE: Step-by-Step - Drawing a Line
Although Lines inherit a Fill property (e.g. similar to the Fill property found in a
Rectangle or an Ellipse), changing the Fill property of a Line does not affect
changes to the Line‟s appearance, as it does for a Rectangle or an Ellipse. A Line
is essentially a linear stroke between two end points. You cannot connect these
two points together to form another shape.
6.6.4 Polyline
A Polyline is another object popularly used for creating drawings, graphic designs
and UIs. As its name suggests, a Polyline draws linear (e.g. straight) lines by
connecting a number of specified points. Whereas a simple Line contains only
one line between two end points, a Polyline can contain an infinite number of
Points.
Unlike a Rectangle or an Ellipse, a Polyline is drawn as an unfinished shape –
meaning that the starting and ending points of a Polyline are left open and
unconnected. However, similar to other finished shapes, a Polyline is capable of
displaying a Fill color or design (on the inside side of the connected lines and end
points).
Since a Polyline connects only straight lines between end points, Aurora for
Architects offers another less rigid object called the Polyline Pencil. The Polyline
Pencil has more flexibility as it behaves more like a drawing tool and looks more
like a series of points connected by a line (rather than a line connected by two end
points).
52
Step-by-Step - Creating and Manipulating Polylines
6.6.5 Polygon
Similar to the Polyline, a Polygon is another shape defined by a series of end
points and linear lines that is useful for drawings, graphic designs and UIs. A
Polygon can also consist of an infinite number of end Points. The main difference
between a Polygon and a Polyline is that a Polygon, once it has been drawn,
closes itself off into a complete shape between its start and end points.
6.6.6 Polygon and Polyline Pencil
This functionality in Aurora for Architects allows you to draw a series of points
connected to one another along dictated-by-your‟s-hand-movements as opposed
to drawing the connections at specified points in straight lines. The Polygon and
Polyline Pencil add points to the shape as the mouse moves. The Polygon and
Polyline objects produced by using the pencil are the same as the objects used by
the regular Polygon and Polyline drawing method, they just contain more points.
6.6.7 Paths
A Path is a 2D graphic derived from the „Shape‟ Class. It draws a series of
connected lines and curves. They can be very simple or very complex forming
elaborate images and diagrams.
Paths have a Data property, which is a type Geometry. The Geometry of the path
is the instruction set data defining how the Path is rendered. A Geometry can
contain a number of shapes lines and complex curves.
To create a path, add a Path to the drawing surface from the Shapes section of the
Toolbox. The Path is an editable layer; double-click on the path to edit it. A
variety of path segments will be displayed in the Toolbox that can be used to
construct the path.
<Canvas Name="Canvas1" Width="800" Height="600" Background="#00FFFFFF"
xmlns:x="http://schemas.microsoft.com/.NET 3.0/2006/xaml"
xmlns="http://schemas.microsoft.com/.NET 3.0/2006/xaml/presentation">
<Path Width="372" Height="218" Stroke="#FF000000" StrokeThickness="2"
Canvas.Left="137 " Canvas.Top="76 ">
<Path.Fill>
<LinearGradientBrush EndPoint="0.707106781186548, 0.707106781186547">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FF0000FF"/>
53
<GradientStop Color="#FF00008B" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Path.Fill>
<Path.Data>
<GeometryGroup>
<GeometryGroup.Children>
<PathGeometry Figures="M74.4, 61.6C53.6, 162.4 139.2, 44.8 154.4, 155.2
181.6, 82.4 247.2,115. 2 268,179.2"/>
<RectangleGeometry Rect="187.2, 63.2, 141.6, 124.8"/>
<EllipseGeometry RadiusX="75" RadiusY="68" Center="102.4, 82.4"/>
</GeometryGroup.Children>
</GeometryGroup>
</Path.Data>
</Path>
</Canvas>
6.7 Specialized Controls
6.7.1 Access Text
The Access Text control is used for adding keyboard access to controls that may
not have it built in. The underscore is used to define the key. The Text property on
the Access Text control is the property used to specify its content.
Example 1: <Button>
<AccessText>
_Test
</AccessText>
</Button>
Example 2:
<?xml version="1.0" encoding="utf-8"?>
<Window xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="400"
Height="400" Focusable="True" Foreground="{x:Static SystemColors.WindowTextBrush}"
Background="{x:Static SystemColors.WindowBrush}" IsTabStop="False"
WindowStartupLocation="Manual">
<Grid Background="{x:Static Brushes.Transparent}">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
54
</Grid>
<Label Width="200" HorizontalAlignment="Left"
Target="{Binding ElementName=textBox1}">
<AccessText TextWrapping="WrapWithOverflow">
_Another long piece of text that requires text wrapping
goes here.
</AccessText>
</Label>
</Window>
6.7.2 Content Presenter
Typically used in the Control Template of content control to display the objects
content.
6.7.3 Control
The Control class is a public class in WPF and used as the base class for many UI
elements. This class is not normally used in UI design directly.
6.7.4 Items Presenter
Typically used in the Control Template of Items Controls to display the child
items.
6.7.5 Resize Grip
This class is used as part of the Control Template for a Window.
6.7.6 User Control
In typical usage, a developer creates a custom control derived from a user control
(UserControl) and puts it in its own assembly. This control will have its sub-
controls defined in markup in the custom control‟s assembly. Alternatively, the
sub-controls will be added by code in the custom control‟s assembly. Then, the
developer adds business logic to the custom control, which interacts with the sub-
controls.
It is inappropriate for Aurora for Architects to save the children of a user control.
If the intent of a custom control is to have additional children added at the design
stage, then a user control should not be used. A border or something similar
should be utilized instead in this scenario.
55
6.8 Viewers
6.8.1 Document Viewer
A control that can render paginated fixed format documents like an
XpsDocument.
6.8.2 Flow Document Reader
A control that can render XAML flow documents.
6.8.3 Flow Document Page Viewer
A control that can render XAML flow documents one page at a time.
6.8.4 Flow Document Scroll Viewer
A control that can render XAML flow documents, renders in a continuous
scrolling view.
6.8.5 Scroll Viewer
A scrollable container that can contain a FrameworkElement as a child.
7 Miscellaneous Topics
7.1 File Export
Aurora for Architects supports exporting XAML to raster formats and exporting
selected objects to XAML.
56
7.1.1 Exporting to Raster
Exporting to raster allows your XAML documents and user interfaces to be saved
as bmp. png, or jpg files. To export to raster open a XAML document and select
<File><Export Raster> from the Menu.
When the export to raster dialog is shown, select the file name you wish to save
the raster image to and select OK.
7.1.2 Exporting to XAML
Using Aurora for Architects you can export individual objects to loose XAML
documents. These loose XAML documents can be saved into the Aurora for
Architects clipart directory and reused in your application.
To export an object, select the object on the edit surface and select
<File><Export> from the Menu. If no object is selected Aurora for Architects will
export from the Root object.
7.2 Opacity Masks
This allows the creation of visual effects or cutouts of an image. The Opacity Mask
allows you to make portions of an object fully or partially transparent by applying a
brush. This effect can be applied to any shape, control or visual object in WPF.
On choosing the correct colors, remember that the more Transparent the chosen color
is will apply a higher degree of mask to the element it is being applied to, whereas,
any opaque chosen color will remain Visible. Any colors with a partial transparency
will create a partial mask (the element will be partially visible).
7.2.1 Creating a Mask with a Linear Brush
Open a new Document.
In the Tool Box select an element and place it on your workspace. (For example a
rectangle approximately 200px wide and 300 px high)
Then go down to the Opacity Mask property (on the Object's property panel) and
click the Button.
This will bring up the Brush Designer, select the Linear Tab.
Select the White Triangle (Slider) on the Spectrum Viewer, then Click the Color
Button (just above the Delete Button).
This will bring up the Color Picker. Here you have several options in how to pick
your color.
57
a. Move the square in the middle of the Color spectrum circle
b. Type in either the Named color or its hexadecimal number into the textbox
below the color spectrum circle.
c. Select the Colors tab (which has all the colors listed alphabetically) and select
the color. (In this example select Transparent).
Click <OK>
Now that you are back in the Linear Gradient Brush Designer interface you can
now adjust the two colors (Transparent and Black). Move them so that they both
have a 0.5 approximate value and that you can see a definite line solid and
transparent fill value in the rectangle.
If the angle or width of the Mask is not sufficient you can adjust/stretch it by
altering the Start and End Point x, y co-ordinates.
Press <OK> to save the changes.
Note: If you adjust the Opacity on this gradient with the Slider (on the far right
side of the Brush Designer) it will apply the opacity level to the entire gradient.
7.2.2 Create a Mask with a Radial Gradient Brush
Open a new Document.
In the Tool Box select an element and place it on your workspace. (For example a
rectangle approximately 200px wide and 300px high)
Then go down to the Opacity Mask property (on the Object's property panel) and
click the Button.
This will bring up the Brush Designer, select the Radial Tab.
Select the White Triangle (Slider) on the Spectrum Viewer, then Click the Color
Button (just above the Delete Button).
This will bring up the Color Picker. Here you have a couple options in how to
pick your color.
a. Move the square in the middle of the Color spectrum circle.
b. Type in either the Named color or its hexadecimal number into the textbox
below the color spectrum circle.
c. Select the Colors Tab (which has all the colors listed alphabetically) and select
the color. (In this example select Transparent).
Click <OK.>
Now that you are back in the Linear Gradient Brush Designer interface you can
now adjust the two colors (Transparent and Black). Move them so that they both
have a 0.5 approximate value and that you can see a definite line solid and
transparent fill value in the rectangle.
If the angle or width of the Mask is not sufficient you can adjust/stretch it by
altering the Center, Origin and Radius x, y co-ordinates.
The Center property places where the overall gradient will be situated on the
element. The Origin property establishes where the center-point of the radius will
originate from. The Radius determines how high and wide the gradient will emit
from its source value.
Press <OK> to save the changes.
58
Note: If you adjust the Opacity on this gradient with the Slider (on the far right
side of the Brush Designer) it will apply the opacity level to the entire gradient.
7.2.3 Create an Opacity Mask with an Image
Open a new Document.
In the Tool Box select an element and place it on your workspace. (For example a
rectangle approximately 200px wide and 300 px high)
Then go down to the Opacity Mask property (on the Object's property panel) and
click the Button.
This will bring up the Brush Designer, select the Image Tab.
Select the Button to the left of the Image Source test field in order to create the
path for which the Image is located.
Remember to only choose a Graphic Interchange Format (gif) file for it is the only
one that has transparencies maintained.
At this point you can make any further alterations as to how the gif image will
mask your element. The Alignment will place it horizontal and vertically based on
the Buttons you select. This will only be noticeable if the image is smaller and not
filling the size of the Element. The Stretch value will resize the image to fit the
element. Tile Mode will repeat the image as many times is required in order to fit
the element. No affect will be apparent if the image is the same size or larger than
the element. The Viewport can also be used a resizing tool in that it be you can
control how much of the x and y co-ordinates will be applied in the mask.
Click <OK> to return to save the changes.
7.2.4 Reusing an Opacity Mask
Sometimes when you may wish to re-use a brush within a project to maintain a
consistent feel; Like with Brushes you can also save the Opacity Mask and re-
apply it to other Elements on your Document.
Re-Select the element with the Opacity Mask you wish to use and click the
property panel.
Scroll down to the Opacity Mask property and click the Button.
The Brush Designer will pop up (and at the bottom of the designer) click the Save
Brush Button. Press <OK>
This will now have saved the Brush in the designer for as long as you have
Aurora for Architects open. This means that if you can easily apply a color used
in another document to the new one you are working on.
Now select the new object that you wish to have the Opacity Mask applied to, in
its Property panel select the Opacity Mask Button.
In the Brush Designer, select the Saved Tab. In this tab you will see all the
brushes that you have saved during your current session in Aurora for Architects.
Click the Mask and press <OK>.
Removing a Mask from an Element
Re-Select the element with the Opacity Mask you wish to remove and click the
property panel.
59
Scroll down to the Opacity Mask property and click the Button.
The Brush Designer will pop up (and at the bottom of the designer) click the
Delete Brush Button. Press <OK>
8 Step by Step
8.1 Working with Panels in the Workspace
8.1.1 Docking a Panel
1. Position the mouse pointer on the Title bar of the panel. Click-and-drag the panel
to the middle or sides of the workspace.
2. As the panel is being dragged over the docking area, you will see a duplicate of
the panel appear. This duplicate indicates that the panel can dock in that area of
the workspace.
3. Release the mouse and the panel will remain docked in that area of the
workspace.
Docked panels can be floated (or undocked), stacked or joined by following the steps
below.
8.1.2 Floating a Panel
1. Position the mouse pointer on the “grip” at the top-left of the panel‟s Title bar.
The mouse pointer will change from a white arrow to a black four-way directional
arrow.
2. Click the mouse and the panel will float.
You can also float a docked panel by right clicking on the panel‟s Title bar and
selecting “Float” from the Menu. Floating panels can be re-docked by following the
steps above. You can also stack and join floating panels by together.
8.1.3 Stacking Panels
1. Position the mouse pointer on the Title bar of the panel. Click-and-drag this panel
over to the panel you want to it stack together with. Once the panels overlap, you
will see a green icon that looks like this:
60
2. To stack your panel on top, drag your panel over the upward-pointing green arrow
and release the mouse. The two panels will now be contained together within a
shell panel (with a empty Title bar), with the selected panel on top. To stack your
panel below, drag your panel over the downward-pointing green arrow and
release the mouse.
These steps for stacking panels apply to both docked and floating panels. There is no
limit as to how many panels you can stack together.
8.1.4 Joining Panels
1. Position the mouse pointer on the Title bar of the panel. Click-and-drag this panel
over to the panel you want to join it with. Once the panels overlap, you will see
the same green icon that appeared for stacking panels.
2. Drag your selected panel into the center of the other panel, overtop of the green
square star.
3. Release the mouse and the two panels will be joined together.
8.1.5 Floating Joined Panels
You can dock and float joined panels just as you would dock a single panel.
To float a tabbed panel (e.g. removing the panel from within the shell of joined
panels):
1. Position the mouse over the “grip” on the left-hand corner of the tab. The
mouse pointer will change from a white arrow to a black four-way
directional arrow.
2. Click-and-drag the tab outside of the joined panel shell. Your selected
panel will now float.
Figure xxx: Stack and join
icon
61
8.2 Creating Your First XAML Document
Now that you are familiar with the different document categories and templates
available in Aurora for Architects, we will guide you through a very simple example.
This example will get you started with adding objects to your document,
manipulating those objects and navigating through the Document Tree. In addition,
this example explains how to interpret and use the different types of mouse cursors
and object adorners found in Aurora for Architects workspace.
Example One: You‟re First XAML Document (first. Xaml)
1. Click the <File New> icon to activate the New Document window. From the
Drawing category, choose the Empty Canvas template and click <OK>. A new,
untitled Document Panel appears in the centre of the Solution Explorer with a
Canvas panel. The Canvas panel has been drawn to correspond with Aurora for
Architects default settings for this type of template (e.g. 400 x 400 pixels) and its
border is shown in orange.
2. To save this new document, click on the <Save> icon, type “first” as the file
name, and click <Save>. You‟ll notice that the XAML file type (.xaml) was
already selected as the appropriate file type.
3. If you look at your Document Tree, you will see that your new XAML document
has a Canvas panel as its Root element; this is the default Root element for an
Empty Canvas template. You will also notice the blue ellipse to the left of the
Canvas panel icon; the blue ellipse indicates that the Canvas panel has an editor
that can be drilled into for editing.
4. Click on either the blue ellipse or the Canvas panel icon and a blue circle appears
to the left of the blue ellipse. The blue circle indicates that you have selected this
layer for editing. If you look at your Properties Panel, you will see that Aurora for
Architects has given this Canvas a default name (e.g. ID: Canvas1) and has
populated the Properties Panel with all of the different attributes corresponding to
a Canvas panel.
5. If you look again at your Canvas, you will notice there are three blue circles
sitting on the Canvas‟ border – one on the right-hand side, one on the bottom-
right corner, and one on the bottom. These blue adorners serve two purposes: they
indicate that this object is selected for editing and they also allow you to resize the
object. If you place your mouse over the blue adorners, the mouse will change to
a double arrow and allow you to adjust the object‟s height, width or both (in the
case of the adorner sitting on the bottom-right-hand corner). For this example, we
will not resize the Canvas.
6. We will now add a couple of objects to the Canvas. Click on the Toolbox Panel to
select it, locate the Shapes category and expand its contents by clicking on the
Expander. Click on the rectangle to select it and place your mouse over the
Canvas. You will notice that the mouse will change to a plus sign. This indicates
that you have selected an object to add to the workspace.
62
7. To draw a rectangle, left click-and-drag your mouse in a downward-diagonal
direction. Once you have drawn a reasonably sized rectangle, release your mouse.
Here, you‟ll notice a few things. First, the rectangle‟s borders have the same blue
adorners as the Canvas did (except that the rectangle has eight adorners to the
Canvas‟ three); this indicates that the rectangle is selected for editing and can be
resized in a fashion similar to what was described above for the Canvas.
Secondly, if you click on the Properties Panel, you will see that Aurora for
Architects has given this rectangle a default name (e.g. ID: Rectangle) and has
populated the Properties Panel with all of the different attributes that correspond
to a rectangle. Third, the Document Tree recognizes you have added a rectangle
to the Canvas. You can see, hierarchically, that the rectangle is a child of the
Canvas panel; if you double-click on the rectangle, a dialog box appears
indicating that there isn‟t an editor for the rectangle (e.g. it cannot have any child
objects attached to it). You will see a small preview of your rectangle in the
Preview Panel. Finally, you should also notice some of the rectangle‟s properties
have been predefined and that is why your rectangle has a black border and a blue
fill.
8. Next, select the Resources panel again and click the Expander to minimize the
Shapes category. Locate the Common Controls category and expand its contents
by clicking on the Expander. Click on the Button to select it and place your mouse
over the Canvas. You will notice that the mouse cursor will change to a plus sign.
This indicates that you can add your selected Button control to the workspace.
9. You can draw a Button in the exact same way in which you drew your rectangle.
As with the rectangle, you will notice that the Button has blue adorners, Aurora
for Architects has updated the Properties Panel, Document Tree and Preview
Window. You will also notice, however, if you double-click on the Button icon in
the Document Tree a window appears that allows you to select a base element.
Since a Button is an object that can have objects added to it, Aurora for Architects
will allow you to continue layering objects on top of the Button. For this example,
we will not add any other objects to our Button.
10. Now, we will resize and manipulate the rectangle. Since your Button is currently
the object that is selected for editing (the Button has blue adorners in the
workspace, plus there is a blue circle to the left of the Button icon in the
Document Tree that indicates it is selected for editing), you will need to select the
rectangle. This can be done one of two ways. In the Document Tree, you can click
on the rectangle; you‟ll see the blue circle move up to the rectangle and also see
the rectangle take on the blue adorners in the workspace. The other way to select
the rectangle is on the workspace area itself.
11. It is important to remember that once you select an object to add to your
workspace, it is loaded in Aurora for Architects cache. In the top-left corner of
Aurora for Architects, the cache Tool Bar indicates which object is loaded in the
cache for addition to the workspace. For example, when you click on the Button
in the Toolbox Panel, the Button icon appears in the cache Tool Bar as the next
item waiting to be placed onto the workspace. (You‟ll also be reminded of this
when you see that your mouse cursor is a plus sign.) If you want to add a different
object or manipulate another object already on the workspace, you need to clear
63
the cache before you continue. To clear the cache, right-click your mouse cursor
while it is positioned inside of your XAML document‟s Root element. For this
example, position your mouse cursor (which is still a plus sign) anywhere within
the Canvas and right click; it does not matter if your mouse is positioned over
another object at this time. You will notice that the mouse cursor changes from a
plus sign to a white hand. The white hand indicates that there are no objects
loaded in the cache and allows you to select any object in the document for
editing by simply clicking on it. With the cache cleared, you can now click on
your rectangle to select it for editing.
12. Place your mouse cursor over the blue adorner in the middle of the rectangle‟s top
side, which changes from a white hand to a double black arrow. Click-and-drag
the adorner upward to increase the height of your rectangle, and then release the
mouse. Then, place your mouse cursor over the blue adorner in the middle of the
rectangle‟s right side, which changes again from a white hand to a double black
arrow. Click-and-drag the adorner to the right to increase the width of your
rectangle, and then release the mouse. Alternatively, you also could have
increased the width and height of the rectangle simultaneously by placing your
mouse cursor over one of the corner adorners; clicking and dragging from a
corner changes both the height and width properties of the rectangle. Resize your
rectangle back to its original size by clicking on the adorner in the top-right corner
and dragging the mouse downwards and towards you.
13. The white hand mouse cursor also allows you to drag your objects around within
the workspace. If you place the cursor over the rectangle, click, and drag, you are
able to move and reposition the rectangle anywhere on your Canvas.
14. If you look at the transform Tool Bar, you‟ll notice that <Resize> is currently
selected. We are now going to continue to manipulate our rectangle by rotating it.
To the right of <Resize> is <Rotate>. Click <Rotate>. The adorners change from
blue to orange to indicate that you are now in rotate mode. As the centre point of
rotation is always based on the object‟s centre, it does not matter which adorner is
used to rotate the object. If you place your mouse cursor over an orange adorner,
you will see the cursor change from the white hand to a circular arrow. Click-and-
drag your mouse in a circular fashion in order to rotate the rectangle – it can be
rotated anywhere within its 360-degree plane – and release the mouse to end the
rotation.
15. Now, to skew the rectangle. To the right of <Rotate> is <Skew>. Click <Skew> -
the adorners change from orange to purple to indicate that you are now in skew
mode. An object can be skewed either horizontally or vertically. If you place your
mouse cursor over a purple adorner, you will see the cursor change from the white
hand to a disjointed double black arrow; on the top and bottom sides, the arrows
face left and right (horizontal skew), and on the left and right sides, the arrows
face upward and downward (vertical skew). For example, if we place our mouse
cursor on the top side adorner, click, and drag to the right, our rectangle skews to
the right along its horizontal plane.
16. Now, click on the Button to select it for editing. The Button can be resized, rotated
and skewed in exactly the same way as the rectangle.
64
17. Update first.xaml with your changes by clicking <Save> or <File> <Save
Document>.
While following this example, you would have also noticed that the mouse cursor
becomes a white arrow when it is outside the editable area of your XAML document.
This cursor change allows you to be able to click on and select items in other Solution
Explorer panels without affecting the objects in your XAML document.
8.3 Adding and Manipulating 2D Objects
Every 2D graphic added to Aurora for Architects workspace is vector-based. Vector-
based graphics are resolution independent, meaning that magnification size does not
affect the object‟s clarity. When working with graphic effects, this resolution
independence helps you apply an effect to exacting detail and know what the finished
product will look like – should it be closely scrutinized or enlarged beyond its intended
size.
The following section provides a quick recap on working with objects in Aurora for
Architects workspace.
The Toolbox Panel, or Toolbox, will be one of your most frequently used panels in the
Solution Explorer, as it contains all of the objects you might possibly need for your
graphic art design or UI.
The Toolbox has seven separate categories of objects – third Party (controls), Common
Controls, Grids/Panels, Items Controls, Shapes, Specialized Controls and Styling
Controls – and they are grouped together in sections according to their uses.
To select an object from the Toolbox:
1. Click on the Toolbox Panel Title bar to select it. Depending on how you have
arranged your workspace in the Solution Explorer, your Toolbox may be either a
separate or tabbed panel.
2. From the list of categories, click on any of the individual category to reveal the
different objects contained within (as indicated by the Expander to the left of each
category). Click again to minimize the category.
It is important to remember that in order to access the Toolbox Panel, you must have
an open XAML document on your workspace. If you click on the Toolbox Panel and
it is empty (e.g. it has no contents), you must open an existing XAML document or
begin a new XAML document in order to see the Toolbox‟s contents.
To add an object to a Root element on the workspace that works on an x, y coordinate
system (a Canvas or Grid panel):
65
1. Click to expand the appropriate category.
2. Click on the object you wish to add and position your mouse on the editable area
of your workspace where you want to begin adding the object. The mouse cursor
will look like a cross hair or plus sign – this indicates the object is selected for
addition to the workspace. In the Toolbox, the object has a blue highlight.
3. For most objects, left click at your selected starting point, drag the mouse in a
right-and-downward diagonal direction to set the object‟s height and width
dimensions. For some objects, this will not properly draw a shape or control/item
– in this case, details about how to properly draw the object is expanded upon in
its own individual section. In the Toolbox, the object now has a tan-colored
highlight (to indicate it has been added to the workspace but it still selected).
4. Release the mouse to set this object.
5. The mouse cursor changes from a plus sign to a white hand to indicate that it is
finished adding the object to the workspace.
To add an object to a Root element on the workspace that does NOT work on an x, y
coordinate system (any panel except for a Canvas or Grid):
1. Click to expand the appropriate category.
2. Click to select the object you wish to add and position your mouse on the editable
area of your workspace. When you place your mouse over the panel‟s editable
area – in order to add the object you have selected – the mouse cursor changes to
a bold plus sign with the word „object‟.
3. Click to add your object. Since panels that do not work on an x, y coordinate
system do not allow you to manually arrange your object inside the panel, the
object‟s position is instead determined by how the particular panel manages its
child objects.
Aurora for Architects features „deselect after draw‟ functionality. Once you release
the mouse after drawing an object on Aurora for Architects workspace, Aurora for
Architects automatically clears the object from its cache. However, the just-drawn
object remains selected on your workspace. This makes it easy to resize or otherwise
manipulate this object.
If you wish to draw more than one of the same object consecutively, Aurora for
Architects also features „multiple draw‟ functionality. After you have selected your
object from the Toolbox, hold down <Shift> while adding the object to your
workspace. Holding down the <Shift> key overrides the „deselect after draw‟ feature
and allows you to add multiple objects of the same type to your workspace.
There are several ways to remove a selected object from the workspace:
1. Delete key: Select the object (e.g. ensure it has blue adorners), and hit the delete
key.
2. Delete: Select the object and click <Delete> in the icon Tool Bar.
66
3. Context Menu delete: Select the object, right-click and choose <Delete> from the
context Menu.
4. Document Tree: Click on the object in the Document Tree – a blue circle appears
to the left of the object‟s icon to indicate it has been selected. Now, you can hit
the delete key or right-click and choose <Delete> from the context Menu.
Once you have begun to add objects to Aurora for Architects workspace, you may
need to edit them. Aurora for Architects provides you with a number of different
ways to edit your selected objects.
1. With the Edit option on Aurora for Architects main Menu. At the top-left
corner, click <Edit> for a drop-down Menu of common editing options (Undo,
Redo, Cut, Copy, Paste and Delete).
2. With the icons on the Editing Tool Bar. In the Editing Tool Bar, click on the
different icons (Undo, Redo, Cut, Copy, Paste and Delete) to edit your
selected object.
3. By right clicking on the editable workspace. When a XAML document is
open, place your mouse cursor overtop either the editable workspace area or
the object you wish to edit. Right-click and a context Menu appears with your
available editing options.
4. With keystroke commands.
The following seven sections delve deeper into the different objects and controls
inside the Toolbox Panel. In many cases, a good knowledge of WPF is required to
completely understand the functionality and use of particular objects. Since it is not
the intent of this Guide to provide an in-depth WPF overview, the following sections
provide only high-level overviews to the various objects.
8.4 Grouping Radio Buttons Together
1. Click <File New> to begin a new XAML document. For this example, we will
use an empty Canvas, so select <Drawing> from the category list and <Empty
Canvas> from the template list.
2. Then, click on the Toolbox Panel‟s tab (or Title bar, depending upon how
your workspace in Aurora for Architects is laid out) to select it. Expand the
Items Controls category and click on <Radio Button Item [add]>. Place your
mouse cursor on the editable area where you want to position your first radio
Button, click-and-drag your mouse in a right-and-downward diagonal
direction to add the radio Button. Then, release the mouse. Now, add five
67
other radio Buttons to the Canvas with Aurora for Architects multiple draw
functionality – click on <Radio Button Item [add]> again, then hold down
<Shift> as you draw the five radio Buttons.
3. On your workspace, click on each radio Button in turn and organize the six
Buttons into two groups. Make two columns of three radio Buttons each; place
RadioButton1 through 3 in the first column, and RadioButton4 through 6 in
the second.
4. By default, Aurora for Architects places all of these radio Buttons into the
same group. To test this, click <Test Run> in the icon Tool Bar or select
<View> <Test Run> from the main Menu. In Test Run mode, click on
different radio Buttons – you are unable to have more than one Button selected
at one time. Click <Test Run> to exit Test Run mode.
5. To better illustrate how radio Buttons work in groups, let‟s name each Button.
Select RadioButton1 and click on the Properties Panel. Scroll through the
properties until you locate the Content property (located in the Content
category). Delete „RadioButton1‟ from its content field and type in „Blue‟.
Repeat these steps above for RadioButton4 and 5, naming them „Red‟ and
„Yellow‟. Repeat these steps again for RadioButton2, 3 and 6, naming them
„Car‟, „Truck‟ and „Motor home‟.
6. Select „Blue‟ and return to the Properties Panel. Scroll through the properties
until you locate its GroupName property (which is in the Miscellaneous
category). By default, this field is empty. Give „Blue‟ a group name of „group
1‟, and repeat these same steps for „Red‟ and „Yellow‟. Also repeat these steps
for the group with the vehicle names, but make their group name „group 2‟.
7. Now, click <Test Run> to see the radio Buttons‟ group behaviors. Despite the
layout of the items (e.g. column one has one color and two vehicles; column
two has two colors and one vehicle), Aurora for Architects allows you to
enable only one of the colors and one of the vehicles although layout-wise it
may appear as though two items in the same group are checked (e.g. „Red‟
and „Motor home‟ in the second column). Click <Test Run> again to exit Test
Run mode.
8.5 Adding Content to a Tab Control
1. Click <File New> to begin a new XAML document. For this example, we will
use an empty Canvas, so select <Drawing> from the category list and <Empty
Canvas> from the template list.
2. Then, click on the Toolbox Panel‟s tab (or Title bar, depending upon how
your workspace in Aurora for Architects is laid out) to select it. Expand the
Items Controls category and click on <Tab Control>. Place your mouse cursor
on the editable area where you want to position your Tab Control, click-and-
drag your mouse in a right-and-downward diagonal direction to add the Tab
Control. Then, release the mouse.
68
3. If you wish to reposition your Tab Control, place your mouse cursor – which
should be a white hand – over the area with the control marked by the blue
adorners, and click-and-drag to reposition the Tab Control.
4. To add Tab Items to the Tab Control, return to the Toolbox Panel and click
<Tab Item [add]> once. If you look at the Document Tree, you will notice a
Tab Item was added to the Tab Control. If you look at the workspace, you will
see a tab added to the top-left-hand corner of the Tab Control – it is titled
TabItem1.
5. Tab Items can also be added to a Tab Control through its context Menu. To
add a Tab Item in this fashion, first make sure there are no other objects in
Aurora for Architects cache. Then, place your mouse cursor (which should be
a white hand) over the Tab Control‟s editable area. Right-click to reveal the
context Menu and click <Add Tab Item>. On your workspace, you will see
another Tab Item– titled TabItem2 – to the right of TabItem1. Any Tab Item
added subsequent to the first is always placed behind the first Tab Item – this
mimics the idea of files being filed behind one another in the filing cabinet.
6. In order to edit content on a Tab Item, you must first select the item within the
control. In other words, the Tab Item you wish to populate must be brought to
the front of the Tab Control (e.g. overtop of the other Tab Items) in order for
its Header and Content properties to be made visible for editing.
7. For example, if you look at TabItem1 on your workspace you will notice that
it appears to be lying overtop of TabItem2. Click on TabItem1 in the
Document Tree and then click on the Properties Panel. Scroll until you find
the IsSelected property (which is located in the Appearance category), which
is enabled (e.g. checked, or set to True). By default, Aurora for Architects
always sets the first tab True as, being the first Tab Item added to the control,
it is on the top of the “stack” of tabs and other Tab Items are always added
behind it. Therefore, since TabItem1 is selected, its Header and Content
properties are ready for editing.
8. Instead, let‟s edit the Header and Content for TabItem2. In the Document
Tree, click to select TabItem2, then click on the Properties Panel, scroll to its
IsSelected property and click on the Check Box to enable it. This action
always brings the selected Tab Item to the front of all your tabs regardless of
where it is located inside the Tab Control.
9. On your workspace, you will see blue adorners appear around the tab‟s label.
Aurora for Architects adds Tab Items with a default label size, but by resizing
the adorners you can change the size of your tab‟s labels. You will also notice
that the label for TabItem1 becomes a light grey color while TabItem2 is
white. This visual indicator helps to remind you which Tab Item is selected
for editing. To change the header content for this tab (e.g. the “label” area at
the top), scroll to the Header property in the Properties Panel (which is located
in the Content section). You will see the header field currently shows
“TabItem2”. Delete this, type in “My Tab” instead and hit <Enter>. On your
workspace, the label for your second tab should now read “My Tab”.
10. A Tab Item accepts either text or a child object as content, but not both. To
add text as content on a Tab Item, scroll to the Content property in the
69
Properties Panel (which is located in the Content section) and input your text
into the empty field. For this example, type in “This is my Tab Item.” and hit
<Enter>. This text displays on the workspace in the top-left corner of the Tab
Item‟s content space, directly below the Tab Item‟s header.
11. Since a Tab Item accepts only one child object, Aurora for Architects – by
default – only allows the addition of panels to a Tab Item. Since panels accept
more than one child object, this enables you to add more than one object as
content to a Tab Item.
12. There are three ways to add a child object to a Tab Item. On the workspace,
this is done by positioning your mouse cursor (which should be a white hand)
overtop the header area (or “label”) of the selected Tab Item and double-
clicking; Aurora for Architects indicates that the Tab Item is selected by
placing blue adorners around the header area. Otherwise, you can achieve the
same result by first selecting your Tab Item in the Document Tree (a blue dot
next to the TabItem icon indicates it is selected) and double-clicking.
Alternatively, with the Tab Item selected in the Document Tree, you can place
your mouse cursor (which should be a white hand) overtop of the Tab Item‟s
content area; right-click to reveal the context Menu and select <Edit Layer>.
13. The Select Base Element window appears on your workspace. Select
<Panels> from the first window and choose the corresponding panel you wish
to add to your Tab Item. For this example, we‟ll use a Canvas – select
<Canvas> and click <OK> to return to your Tab Item. On your workspace,
the „My Tab‟ item has an orange border inside of the Tab Control. This visual
indication, as well as the editor icon next to Canvas2 in the Document Tree,
shows it is selected for editing.
14. As mentioned above, a Tab Control accepts either text or a child object as
content. If you look now at the Content property field in the Properties Panel,
the text we entered earlier has been replaced with
„System.Windows.Controls.Canvas‟, as this is the object‟s new content.
15. For this example, add an ellipse, rectangle and Button to your Tab Item. Click
on the Toolbox Panel, expand the Shapes category, click on <Rectangle> and
add it to Canvas2. Repeat these same steps for an ellipse. Then, expand the
Common Controls category of the Toolbox and follow these steps for a
Button.
16. Now that we have finished editing the content on „My Tab‟, if we want to edit
the header and content on TabItem1 it must have its IsSelected property set to
True. If you simply click on TabItem1 in the Document Tree to select it, you
will notice that the contents of „My Tab‟ still display on the workspace. To
make the Header and Content properties of TabItem1 available for editing,
click on the Properties Panel, scroll to the IsSelected property and enable it;
the workspace area will clear of the other Tab Item‟s contents.
17. Finally, we can Test Run the Tab Control to ensure it works properly. Click
<Test Run> or select <View> <Test Run> from the Menu Tool Bar. The
orange borders disappear, leaving only the Tab Control. Click the „My Tab‟
label, and the Tab Control toggles to show the item‟s contents (namely, your
rectangle, ellipse and Button).
70
18. Click on the „TabItem1” label and the Tab Control toggles back to display the
other item‟s contents (which will be empty since we did not add contents to
TabItem1). Click <Test Run> again to exit Test Run mode.
8.6 Drawing a Line
1. Click <File New> to begin a new XAML document. For this example, we will
use an empty Canvas, so select <Drawing> from the category list and <Empty
Canvas> from the template list.
2. Then, click on the Toolbox Panel‟s tab (or Title bar, depending upon how
your workspace in Aurora for Architects is laid out) to select it. Expand the
Shapes category and click on <Line>.
3. Place your mouse cursor at a point on the editable area where you want to
begin drawing your Line, click-and-drag your mouse from left to right. As you
drag your mouse, you can see the Line being drawn; you can also change the
size and orientation of your Line at this time by moving your mouse around.
4. Then, release the mouse. Blue resize adorners appear as end points of your
Line. By clicking on and dragging an adorner, you are able to resize and/or
reorient your Line from either end point.
5. If you look at the transform Tool Bar, you will notice that the rotate and skew
icons are grayed out. For a Line, rotate and skew modes are not applicable as
resize mode can transform a Line in any direction and by any size.
6. You can also move your Line in its entirety. With the Line selected (e.g. as
indicated on the workspace by the blue adorners or in the Document Tree with
the blue circle icon), place your mouse cursor anywhere over the Line itself –
not on the adorners – click-and-drag to reposition. This moves your Line
around the Canvas as a static whole.
7. By default, Aurora for Architects draws a thin black Line as the Line‟s Stroke
and StrokeThickness properties are set to „Black‟ and „2‟ in Aurora for
Architects. By changing the values of these properties, you can adjust the look
and thickness of your Line.
8. With your Line still selected for editing, click on the Properties Panel and
locate the Stroke and StrokeThickness properties (found in the Appearance
category). In the StrokeThickness field, change the value from „2‟ to „10‟. On
your workspace, you will notice your thin black line widens considerably.
9. Next to the Stroke property, click on the black Button. This initiates a pop-up
window with the Brush Designer. The Brush Designer enables you to
customize the color and/or design of your Stroke. (For more detailed
information about Aurora for Architects Brush Designer, please see Chapter
5: Customize with Aurora for Architects).
10. In the top-left-hand corner of the Brush Designer, there is a color wheel. By
clicking and dragging the small black square found inside the wheel, you can
manually choose a new color for your Line‟s Stroke property. Choose a new
71
hue and click <OK>. On your workspace, you will notice your black line has
changed to whatever new color you‟ve chosen.
8.7 Creating and Manipulating Polylines
1. Click <File New> to begin a new XAML document. For this example, we
have to use an empty Canvas – as a Polyline can only be rendered on a
Canvas – so select <Drawing> from the category list and <Empty Canvas>
from the template list.
2. Then, click on the Toolbox Panel‟s tab (or Title bar, depending upon how
your workspace in Aurora for Architects is laid out) to select it. Expand the
Shapes category and click on <Polyline>.
3. Position your mouse cursor over your workspace where you would like to
begin drawing your Polyline. Your mouse cursor should look like a „plus‟
sign. Click once to establish the starting point of your Polyline. It is important
to note that – at this point – you will not see anything appear on your
workspace, but if you look at the Document Tree you will see that a Polyline
has been added to your XAML document.
4. Now, move your mouse over to the right and click once again. At this point,
you will see a line that joins the two points on your workspace. Move your
mouse again to the next desired place and click to create another point. Now,
the Polyline on your workspace shows a Fill on the inside side of the
connected lines and points. You will also notice that your Polyline object has
an open side (e.g. the starting and ending points are not automatically
connected together by a line to form a solid shape).
5. With your mouse cursor still positioned over the workspace, right-click your
mouse to complete drawing your Polyline. The end points of your lines should
automatically become blue adorners.
6. If you look at the transform Tool Bar, you will notice that the rotate and skew
icons are grayed out. For a Polyline, rotate and skew modes are not applicable
as resize mode can transform a Polyline in any direction and by any size.
7. To adjust the points on your Polyline, place your mouse cursor (which should
be a white hand) over the point (e.g. blue adorner) you wish to move, left-
click-and-drag the point to its new position. When adjusting Polyline points,
you will notice that the line between points remains linear (e.g. a line
connecting Polyline points is always straight).
8. If you don‟t need to adjust any of the Polyline‟s points but instead want to
move the entire Polyline, first ensure that the Polyline is selected for editing
(e.g. the object has blue adorners on the workspace or has the blue circle icon
next to it in the Document Tree). Then, place your mouse cursor somewhere
over the Polyline shape – but not over an adorner as this will resize the
Polyline. Left-click-and-drag the entire Polyline to its new location.
9. You can also add points to a Polyline if you want to further change its shape.
First, ensure your Polyline is selected for editing. Then place your mouse
72
cursor over the adorner closest to where you wish the new point to be placed.
Right-click and select either <Add Point in Front> or <Add Point Behind>
from the context Menu. Aurora for Architects adds a new point halfway
between the two existing points, which you can then click-and-drag to a
desired position. If you choose either the start point or the end point, you will
notice that Aurora for Architects only gives you the option to add a point in
front (in the case of the start point) or add a point behind (in the case of the
end point). Aurora for Architects provides only these options for the start and
end point because of the unconnected or open space between the start and end
points (e.g. these two points are not connected themselves by a line where you
would be able to add additional points).
10. Points can be deleted from a Polyline in a similar fashion. While your Polyline
is selected for editing, place your mouse cursor over the adorner you wish to
delete, right-click and select <Delete Point> from the context Menu. You will
notice when your selected point is deleted, the Polyline then connects the
point in front and the point behind the deleted point to form a new shape.