XAML Designer for.net 3.5

Transcription

1 XAML Designer for.net 3.5

2 Table of Contents Table of Contents Introduction Aurora for Architects for.net Aurora for Architects Features Who This Guide is For Aurora for Architects Product Support AURORA for Architects BASICS: Getting to Know Aurora for Architects Panels in the Design Environment Test Run View Source The Aurora for Architects Workspace Document Tree Document Tree Icons and Symbols Current Document Panel Toolbox Panel Adding an Object from the Toolbox Third Party Control Support Resources panel Resource Types Understood by the Resources Panel Properties Panel Preview Panel Getting Started with XAML Documents Creating a New XAML Document New Document Types Drawing Page Window Mouse Cursors and Object Adorners Keyboard Short Cuts Using Brushes in Aurora for Architects Custom System and Named Brushes Named Brushes System Brushes Linear Radial Image Visual Supported WPF Elements WPF Element Overview Content Controls

3 6.1.2 Items Controls Headered Items Controls Headered Content Controls Common Controls Button Check Box Expander Group Box Image Label Media Element Password Box Progress Bar Repeat Button Rich Text Box Scroll Bar Slider Text Block Text Box Thumb Toggle Button Grids / Panels Border Canvas Dock Panel Frame Grid Grid Splitter Ink Canvas Stack Panel Uniform Grid View Box Virtualizing Stack Panel Wrap Panel Items Controls Combo Box and Combo Box Item Group Item Items Controls List Box and List Item List View and List View Item Menu and Menu Item Radio Button Item Separator

4 6.5.9 Status Bar and Status Bar Item Tab Control and Tab Item Tree View and Tree View Item Tool Bar Tray and Tool Bar Shapes Rectangle Ellipse Line Polyline Polygon Polygon and Polyline Pencil Paths Specialized Controls Access Text Content Presenter Control Items Presenter Resize Grip User Control Viewers Document Viewer Flow Document Reader Flow Document Page Viewer Flow Document Scroll Viewer Scroll Viewer Miscellaneous Topics File Export Exporting to Raster Exporting to XAML Opacity Masks Creating a Mask with a Linear Brush Create a Mask with a Radial Gradient Brush Create an Opacity Mask with an Image Reusing an Opacity Mask Step by Step Working with Panels in the Workspace Docking a Panel Floating a Panel Stacking Panels Joining Panels Floating Joined Panels Creating Your First XAML Document Adding and Manipulating 2D Objects Grouping Radio Buttons Together

5 8.5 Adding Content to a Tab Control Drawing a Line Creating and Manipulating Polylines

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 alwaysaccessible 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 6

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 within one business day. The Aurora for Architects support forum can be located online at If you wish to us, please direct your query to the appropriate address: For general inquiries: info@mobiform.com For technical support: support@mobiform.com For sales and training: sales@mobiform.com If your query requires immediate attention, please contact us directly at (or toll free in Canada and the U.S.A. at FOR.XAML ( ) 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 N. VantagePoint Dr. Crystal River, FL U.S.A. Telephone: Toll free: (in Canada and U.S.A.) Fax:

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 reexpand 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 8

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 9

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 markupchecking 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>. 10

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 Document Tree Icons and Symbols 11

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 12

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. 13

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 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. 14

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 Resource Types Understood by the Resources Panel Brushes 15

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 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 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. 16

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 17

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. 18

19 4.2.1 Drawing There are two types of drawing templates in Aurora for Architects: 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 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 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 predesigned templates are Billing information and Forgot password dialogs 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 19

20 Different cursors and adorners correspond to various object-editing modes. The following table summarizes these cursors and adorners: Symbol White hand Cross Hair sign White arrow Double-black arrow Circular-black arrow Disjointed double-black arrow Bold plus sign with the word object Meaning Indicates there are no objects in the cache, and an existing object can be or is selected and can be dragged around the workspace 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) Indicates you are outside the editable area of your XAML document, but can click on and select items in other Solution Explorer panels 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 Used in conjunction with orange object adorners, and indicates the object is selected for rotation 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. 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 20

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 21

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 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 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. 22

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 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 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 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 Image This brush paints an object with a raster image 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. 23

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 Content Controls 2. Items Controls 3. Headered Items Controls 4. Headered Content Controls 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"/> 24

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 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> 25

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: 26

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. 27

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 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 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 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. 28

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 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 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 Image 29

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> 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 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. 30

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.) 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 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 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 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 Slider 31

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 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 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 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. 32

33 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 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 Canvas A Canvas panel explicitly positions objects, starting from the Canvas upper lefthand corner, according to exact x, y coordinates. As this panel uses the painter s 33

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 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 34

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 clickand-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. 35

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 rightclick 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. 36

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 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 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 37

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. 38

39 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, = 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 39

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 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. 40

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 41

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 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 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. 42

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 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. 43

44 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 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 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. 44

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 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-anddrag 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 Group Item A Group Item is derived from ContentControl and usually used in the creation of Control Templates 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 45

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 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 nonconsecutive 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 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 Menu and Menu Item 46

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 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. 47

48 See: Step-by-Step - Grouping Radio Buttons Together 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 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 Tab Control and Tab Item 48

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 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. 49

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 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. 50

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 Ellipse Draws a simple Ellipse shape 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 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). 51

52 Step-by-Step - Creating and Manipulating Polylines 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 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 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=" 3.0/2006/xaml" xmlns=" 3.0/2006/xaml/presentation"> <Path Width="372" Height="218" Stroke="#FF000000" StrokeThickness="2" Canvas.Left="137 " Canvas.Top="76 "> <Path.Fill> <LinearGradientBrush EndPoint=" , "> <LinearGradientBrush.GradientStops> <GradientStop Color="#FF0000FF"/> 52

53 <GradientStop Color="#FF00008B" Offset="1"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Path.Fill> <Path.Data> <GeometryGroup> <GeometryGroup.Children> <PathGeometry Figures="M74.4, 61.6C53.6, , , , , ,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 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=" xmlns=" 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> 53