-->![Xaml Xaml](/uploads/1/2/6/2/126265771/278500106.jpg)
Four Free XAML Editors Reviewed I like to type XAML. It’s an extremely flexible and expressive way to work when sketching out the logical structure of a new piece of UI. A graphical design tool like Blend is best for some things, like creating a non-trivial gradient brush, but at some point it all comes down to the code. The Design and XAML buttons plus the double arrow to switch place are. In Tools, the section XAML designer is missing completely while it is present in VS.
The XAML Designer in Visual Studio and Blend for Visual Studio provides a visual interface to help you design XAML-based apps, such as WPF, UWP, and Xamarin.Forms apps. You can create user interfaces for your apps by dragging controls from the Toolbox window (Assets window in Blend for Visual Studio) and setting properties in the Properties window. You can also edit XAML directly in XAML view.
For advanced users, you can even customize the XAML Designer.
XAML Designer workspace
The workspace in XAML Designer consists of several visual interface elements. These include the artboard (which is the visual design surface), XAML editor, Document Outline window (Objects and Timeline window in Blend for Visual Studio), and Properties window. To open the XAML Designer, right-click a XAML file in Solution Explorer and choose View Designer.
XAML Designer provides a XAML view and a synchronized Design view of your app's rendered XAML markup. With a XAML file open in Visual Studio or Blend for Visual Studio, you can switch between Design view and XAML view by using the Design and XAML tabs. You can use the Swap Panes button to switch which window appears on top: either the artboard or the XAML editor.
Design view
In Design view, the window containing the artboard is the active window and you can use it as a primary work surface. You can use it to visually design a page in your app by adding, drawing, or modifying elements. For more information, see Work with elements in XAML Designer. This illustration shows the artboard in Design view.
These features are available in the artboard:
Snaplines
Snaplines are alignment boundaries that appear as red-dashed lines to show when the edges of controls are aligned or when text baselines are aligned. Alignment boundaries appear only when snapping to snaplines is enabled.
Grid rails
Grid rails are used to manage rows and columns in a Grid panel. You can create and delete rows and columns, and you can adjust their relative widths and heights. The vertical Grid rail, which appears on the left of the artboard, is used for rows, and the horizontal line, which appears at the top, is used for columns.
Grid adorners
A Grid adorner appears as a triangle that has a vertical or horizontal line attached to it on the Grid rail. When you drag a Grid adorner, the widths or heights of adjacent columns or rows update as you move the mouse.
Grid adorners are used to control the width and height of a Grid's rows and columns. You can add a new column or row by clicking in the Grid rails. When you add a new row or column line for a Grid panel that has two or more columns or rows, a mini-toolbar appears outside of the rail that enables you to set width and height explicitly. The mini-toolbar enables you to set sizing options for Grid rows and columns.
Resize handles
Resize handles appear on selected controls and enable you to resize the control. When you resize a control, width and height values typically appear to help you size the control. For more information about manipulating controls in Design view, see Work with elements in XAML Designer.
Margins
Margins represent the amount of fixed space between the edge of a control and the edge of its container. You can set the margins of a control by using the Margin properties under Layout in the Properties window.
Margin adorners
Use margin adorners to change the margins of an element relative to its layout container. When a margin adorner is open, a margin is not set and the margin adorner displays a broken chain. When the margin is not set, elements remain in place when the layout container is resized at run time. When a margin adorner is closed, a margin adorner displays an unbroken chain, and elements move with the margin as the layout container is resized at run time (the margin remains fixed).
Element handles
You can modify an element by using the element handles that appear on the artboard when you move the pointer over the corners of the blue box that surrounds an element. These handles enable you to rotate, resize, flip, move, or add a corner radius to the element. The symbol for the element handle varies by function and changes depending on the exact location of the pointer. If you don't see the element handles, make sure the element is selected.
In Design view, additional artboard commands are available in the lower-left area of the window, as shown here:
These commands are available on this toolbar:
Zoom
Zoom enables you to size the design surface. You can zoom from 12.5% to 800% or select options such as Fit selection and Fit all.
Show/Hide snap grid
Displays or hides the snap grid that shows the gridlines. Gridlines are used when you enable either snapping to gridlines or snapping to snaplines.
Turn on/off snapping to gridlines
If snapping to gridlines is enabled, when you drag an element on the artboard, the element tends to align with the closest horizontal and vertical gridlines.
Toggle artboard background
Toggles between a light and dark background.
Turn on/off snapping to snaplines
Snaplines help you align controls relative to each other. If snapping to snaplines is enabled, when you drag a control relative to other controls, alignment boundaries appear when the edges and the text of some controls are aligned horizontally or vertically. An alignment boundary appears as a red-dashed line.
Disable project code
Disables project code, for example, custom controls and value converters, and reloads the designer.
XAML view
In XAML view, the window containing the XAML editor is the active window, and the XAML editor is your primary authoring tool. The Extensible Application Markup Language (XAML) provides a declarative, XML-based vocabulary for specifying an application's user interface. XAML view includes IntelliSense, automatic formatting, syntax highlighting, and tag navigation. The following image shows XAML view with an IntelliSense menu open:
Document Outline window
The Document Outline window in Visual Studio is similar to the Objects and Timeline window in Blend for Visual Studio. Document Outline helps you perform these tasks:
- View the hierarchical structure of all elements on the artboard.
- Select elements so that you can modify them (for example, move them around in the hierarchy or set their properties in the Properties window). For more information, see Work with elements in XAML Designer.
- Create and modify templates for elements that are controls.
- Create animations (Blend for Visual Studio only).
To view the Document Outline window in Visual Studio, on the menu bar select View > Other Windows > Document Outline.To view the Objects and Timeline window in Blend for Visual Studio, on the menu bar select View > Document Outline.
The main view in the Document Outline/Objects and Timeline window displays the hierarchy of a document in a tree structure. You can use the hierarchical nature of the document outline to examine the document at varying levels of detail and to lock and hide elements singly or in groups. These are the options available in the Document Outline/Objects and Timeline window:
Show/hide
Displays or hides artboard elements. Appears as a symbol of an eye when shown. You can also press Ctrl+H to hide an element and Shift+Ctrl+H to show it.
Lock/unlock
Locks or unlocks artboard elements. Locked elements can't be modified. Appears as a padlock symbol when locked. You can also press Ctrl+L to lock an element and Shift+Ctrl+L to unlock it.
Return scope to pageRoot
The option at the top of the Document Outline/Objects and Timeline window, which shows an up arrow symbol, moves to the previous scope. Scoping up is applicable only when you're in the scope of a style or template.
Properties window
The Properties window enables you to set property values on controls. Here's what it looks like:
There are various options at the top of the Properties window:
- Change the name of the currently selected element in the Name box.
- In the upper-left corner, there's an icon that represents the currently selected element.
- To arrange the properties by category or alphabetically, click Category, Name, or Source in the Arrange by list.
- To see the list of events for a control, click the Events button, which appears as a lightning bolt symbol.
- To search for a property, start to type the name of the property in the search box. The Properties window displays the properties that match your search as you type.
Some properties allow you to set advanced properties by selecting a down arrow button.
To the right of each property value is a property marker that appears as a box symbol. The appearance of the property marker indicates whether there's a data binding or a resource applied to the property. For example, a white box symbol indicates a default value, a black box symbol typically indicates that a local resource has been applied, and an orange box typically indicates a data binding has been applied. When you click the property marker, you can navigate to the definition of a style, open the data binding builder, or open the resource picker.
For more information about using properties and handling events, see Intro to controls and patterns.
See also
-->The Converting WMF images to XAML using Graphic Designer posting showed how you could easily convert WMF format files to XAML. In this case, the drawing information in the generated XAML files was contained within a Canvas object. However, Graphic Designer can also create XAML files that are drawing objects, such as a DrawingImage. The drawing object is contained within a ResourceDictionary element, which means it can be used as a resource within the WPF application.
![Xaml Xaml](/uploads/1/2/6/2/126265771/278500106.jpg)
In this posting, we'll look at several ways of using Graphic Designer generated XAML drawings. At the bottom of this posting, you can find an attached Zip file (clipXart03.zip) that contains the following three XAML files:
- SkippyImage_1.xaml
- SkippyImage_2.xaml
- SkippyImage_3.xaml
- SkippyImage_2.xaml
- SkippyImage_3.xaml
Exporting to XAML using a DrawingImage
To export your drawing to XAML in Graphic Designer, select Export from the File menu list. Then select XAML Export…
To export your drawing to XAML in Graphic Designer, select Export from the File menu list. Then select XAML Export…
The following dialog displays XAML format options for the image conversion:
Change the Document Format from the default Canvas value to Resource Dictionary. Then, select the Path Output Type as Drawing Image. The final selection, Group By, has three options:
- Document All drawing elements are grouped together as
one DrawingImage object.
one DrawingImage object.
- Layers For each layer defined in a Graphic Designer drawing,
a separate DrawingImage object is created. For example,
if your drawing has two layers,
a separate DrawingImage object is created. For example,
if your drawing has two layers,
then two DrawingImage objects are created.
- Objects A DrawingImage is created for each discrete drawing
element. For a complex drawing, this option could easily end up
generating hundreds of XAML objects.
element. For a complex drawing, this option could easily end up
generating hundreds of XAML objects.
In most cases, the Document Format value should be Document, since this option generates the fewest XAML objects.
A Closer Look at the Generated XAML File |
The drawing object in the generated XAML file is contained within a ResourceDictionary object, which means the drawing object can be used as a shared resource multiple times throughout the application. I changed x:Key from the default value of Metafile to Skippy, and will use this value later as a reference to the drawing:
<ResourceDictionary>
<DrawingImage x:Key='Skippy'>
<DrawingImage.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing ... />
. . .
</DrawingGroup.Children>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</ResourceDictionary>
<DrawingImage x:Key='Skippy'>
<DrawingImage.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing ... />
. . .
</DrawingGroup.Children>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</ResourceDictionary>
Referencing the DrawingImage
ln the SkippyImage_1.xaml file, the DrawingImage is added as a resource to the Canvas object.
ln the SkippyImage_1.xaml file, the DrawingImage is added as a resource to the Canvas object.
<Canvas.Resources>
<ResourceDictionary>
<DrawingImage x:Key='Skippy'>
<!-- Drawing objects -->
</DrawingImage>
</ResourceDictionary>
</Canvas.Resources>
<ResourceDictionary>
<DrawingImage x:Key='Skippy'>
<!-- Drawing objects -->
</DrawingImage>
</ResourceDictionary>
</Canvas.Resources>
Once the drawing object is stored as a resource, it can be used by other UI elements, such as the Image objects in the following lines:
<
Image Height='80' Source='{StaticResource Skippy}' />
<Image Height='120' Source='{StaticResource Skippy}'
Canvas.Left='80'/>
Canvas.Left='80'/>
<Image Height='160' Source='{StaticResource Skippy}'
Canvas.Left='200'/>
Canvas.Left='200'/>
When you set the Height property, the referenced drawing object is automatically scaled in height. The width is also scaled in order to preserve the aspect ratio of the original drawing object. The Source property uses a StaticResource value to reference the x:Key value of the DrawingImage.
The Canvas.Left property allows you to reposition the drawings -- otherwise, the drawings would overlay each other. Notice how multiple Image object can reference the same DrawingImage resource. Using objects as shared resources is a primary reuse mechanism in WPF.
Referencing the DrawingImage as a Button Image
ln the SkippyImage_2.xaml file, the DrawingImage is added as a resource to the StackPanel object. This time the drawing object is used as an image for two Button controls:
ln the SkippyImage_2.xaml file, the DrawingImage is added as a resource to the StackPanel object. This time the drawing object is used as an image for two Button controls:
<
Button Height='50' Width='50' Padding='2'>
<Image Source='{StaticResource Skippy}' />
</Button>
<Image Source='{StaticResource Skippy}' />
</Button>
<Button Height='75' Width='75' Padding='10'>
<Image Source='{StaticResource Skippy}' />
</Button>
<Image Source='{StaticResource Skippy}' />
</Button>
Notice how the Padding property controls the amount of spacing between the drawing and the border of the Button:
Animating the DrawingImage
ln the SkippyImage_3.xaml file, the DrawingImage is added as a resource to the StackPanel object. The drawing is referenced by an Image object, which is then animated. The previous posting, Animating XAML Clip Art, explains how the animation is created.
ln the SkippyImage_3.xaml file, the DrawingImage is added as a resource to the StackPanel object. The drawing is referenced by an Image object, which is then animated. The previous posting, Animating XAML Clip Art, explains how the animation is created.
Graphic Designer Info
The Expression Designers blog provides a lot more info on how to use the Graphic Designer product.
The Expression Designers blog provides a lot more info on how to use the Graphic Designer product.
Thanks to my teammate, Mike, for helping me figure out a lot of the issues here!
Enjoy,
Lorin
Lorin
About Us
We are the Windows Presentation Foundation SDK writers and editors.