XAML Power Toys

Current Version 4.0.0.0, Last Update 10 February 2009

Table Of Contents

• Introduction
• Requirements
• Goal
• New Features In v4.0
• Feature Set
• Screen Shots
• Videos
• Overview
• Creating Business Forms, ListViews and DataGrids
• Enhance Your Design Time Experience
• Installation
• First Time Use
• Downloads
• Cool Usage Tip
• XAML Power Toys Walk Through’s

Introduction

XAML Power Toys is a Visual Studio 2008 SP1 Multi-AppDomain Add-In that empowers WPF & Silverlight developers while working in the XAML editor.  Its Line of Business form generation tools, Grid tools,  DataGrid and ListView generation really shorten the XAML page layout time.

It’s accessed through commands in the XAML editor context menu and the Solution Explorer item context menu.

XAML Power Toys generates .NET 3.5 SP1 WPF compliant XAML and Silverlight 2 compliant XAML.

This version of XAML Power Toys is compatible with Silverlight 2.0 RTM.

I’ve tagged edited areas in the document with New, to identify new paragraphs and videos for version 4.0.

Requirements

• Visual Studio 2008 with SP1
• For Silverlight Development, install the latest Silverlight 2 as detailed on Scott Guthrie’s blog. (If you’re not doing Silverlight development this is not required.)
• Windows XP, Vista, Server 2003 or Server 2008

Goal

The primary goal of XAML Power Toys is to deliver tools that enable developers to quickly layout and maintain Line of Business Application forms using the UI controls that ship with Visual Studio.

You’ll notice that the below features are business form focused.  This does not limit the use of the software, I’m just providing the current target project type.

New Features In v4.0

Added Two New Videos that cover these new features.  Please watch them.

Please review the Control Defaults section below, new options have been added.

• Extract properties to a Style allows selecting a control, choosing desired properties and have those selected properties extracted to a newly created style
• Create ViewModel Class from a VB.NET or C# code window.  Easily create a ViewModel stub that includes commands and exposed data class.
• Group into GroupBox
• Option to generate x:Name for controls
• Option to add ForeReRead converter to TextBox bindings (both VB.NET & C# converters included in source and binary downloads.  Converter is also included in the OceanFramework.WPF namespace.)
• Option to add TargetNullValue to TextBox.Text bindings when Source property is Nullable
• Corrected secondary application domain load issue reported by DevExpress.  This fix also solves another edge case secondary application domain load issue.

Feature Set

• Create ViewModel Class - from a VB.NET or C# code window, easily create a ViewModel stub that includes commands and exposed data class.
• Create WPF or Silverlight DataGrid For Selected Class - quickly create a DataGrid complete with bindings that are easily associated with properties on the source class
• Create WPF ListView For Selected Class – quickly create a ListView complete with bindings that are easily associated with properties on the source class
• Create Business Form For Selected Class – quickly create a form complete with bindings that are easily associated with properties on the source class
• Create Business Form – quickly create a form complete with bindings if desired 
• Show Fields List For Selected Class – display a list of class fields similar to Microsoft Access.  Allows dragging of fields to create controls
• Extract Properties To Style – allows selecting a control, choosing desired properties and have those selected properties extracted to a newly created style
• Group Into – allows selecting one or more controls and group them inside a new parent control.  Many options provided
• Change Grid To Flow Layout – allows selecting of one of more control and will remove all MinWidth, MinHeight, Margin properties and will set all row and column definitions to Auto.
• Chainsaw Minimize Cider Designer XAML – allows selecting of one or more controls and will remove all MinWidth, MinHeight, x:Name, Name, Margin properties and will set all row and column definitions to Auto.
• Remove Margins – allows selecting one or more controls and removes the Margin property from them
• Edit Grid Column and Rows – allows selecting a grid and then add or remove rows and columns
• Set Defaults For Created Controls – allows customizing the initial properties that are set when the software creates a new control
• About Box – see the version of XAML Power Toys installed on your system.  The current version of XAML Power Toys is always displayed at the top of this page below the title.

Screen Shots

Solution Explorer Content Menu

 

Solution Explorer Content Menu

XAML Editor Content Menu

VB.NET and C# Code Window Content Menu

Select Class Using Class Picker

The “Create Form, ListView or DataGrid From Selected Class” and “Fields List From Selected Class” XAML Editor commands both open this class picker form.  This form displays all projects and referenced assemblies, except Microsoft assemblies.  If you need to view the Microsoft assemblies, I’ve provided a button that will reload the form with all assemblies and references assemblies including the Microsoft ones.  After selecting the class you press the “Next…” button and you’ll be taken to the appropriate form.

The TreeView is grouped by assembly, namespace and then the classes are sorted by name.

Create Business Form For A Class

This form has drag and drop enabled.  Also features a contracted view of fields.

Allows setting required properties.  Data binding validation and other properties are determined from your default control settings.

StringFormat Selector

Makes selecting a StringFormat very easy.  Displays the format string and example side by side.

Create Business Form

This was a version one feature.  Allows creating a form when not class is available.  Great for roughing out Grids and populating with controls.

Fields List

Similar to the Microsoft Access Fields List, this allows dragging a field to the XAML Editor and the field and/or label control will be created for you, with all data bindings set for the property.  This floats on top of Visual Studio and you can collapse it.  The fields list is a great tool when you need to add a new field to an existing layout.

 

Control Defaults

XAML Power Toys allows developers to determine how controls are created by the software.  The developer can describe how each platforms controls are rendered.  Developers can determine which data binding validation properties are set automatically and exactly which properties are set when the control is created.  In the below example, I have set the WPF TextBox to have the HorizontalAlignment and VerticalAlignment properties set.

New  ForceReRead Converter – VB.NET & C# converters included in source and binary downloads.  Converter is also included in the OceanFramework.WPF namespace.

New  The ForceReRead converter is discussed in this MSDN Form Post.  This converter is necessary for TextBox bindings where the Source property “could” be changing the property in the Setter.  Example, the user enters “wa” in the TextBox.  The Source property State Setter is called and “wa” passed.  The State Setter then sets the Value to WA.  Without this converter, the data binding pipeline will not re-read the property and display the new “WA” value in the TextBox.  With the converter, “WA” is displayed in the TextBox.

New  The ForceReRead converter is not added if the TextBox.Text binding has the StringFormat property is set because it is not needed.  If you edit the generated TextBox.Text binding and need to add another converter to your code instead of the ForceReRead converter your converter will force the value to be re-read by the data binding pipeline.

New  TargetNullValue – when TextBox.Text property is data bound to a Nullable Source, setting the TargetNullValue=” will allow the Source property to be set to Nothing (null) without generating a binding exception.  Without this property a converter would be required to set the value to Nothing (null).  This enables an empty string in a TextBox to correctly set the Source to Nothing (null).

The below image shows the setup for the Silverlight Toolkit Label control.  The imported name space is “controls” and the entire value is entered, “controls:Label”

Also new to the Control Defaults dialog box is the DatePicker for Silverlight and WPF.

Videos

I’m begging every developer in the strongest possible terms, please view the below videos. They will get you up and running and productive in a very short time.

The video links require Microsoft Silverlight 1.0.  If you do not have it, you will be prompted to install it when you click one of the links.  After the short installation is completed, close the browser window that you did the install in and re-click the video you want to watch.   You can also download it here. Windows XP or Vista required.

XAML Power Toys Installation and Setup  MUST VIEW	Set Control Settings (7:13)  Please View
Create ViewModel For Model (8:53)  New	Version 4 Control Settings (11:10)  New Please View
Create Business Form (5:19)	Build Form For Class (9:33)
Edit Grid Row Columns (7:22)	Fields List For Class(6:11)
Grid Tools (Remove Margins, Chainsaw) (5:22)	Group Into (7:28 )
Silverlight DataGrid For Class (9:53)	WPF DataGrid For Class(6:59)
WPF ListView For Class (7:18 )

Overview

If you’re reading this and have not watched the above videos, please do so now, especially the Installation and Setup video.  (thank you!)  I won’t be repeating the content of the videos below.  They are short and to the point.  You’ll be up and running, saving lots of time in just a few minutes.

I’m supplying the source code for those who have authored Visual Studio Add-In’s or who want to look under the covers.  Visual Studio Add-In’s are not the difficult to write, but there is a new programming API to learn.

The XAML Power Toys UI is WPF which made the coding very easy.  There is one hurtle I had to get past.  The XAML Power Toys Add-In does not program against any object model, it is really just manipulating text.  There is no object model available in Visual Studio Add-In’s to program against which is why the Add-In has the developer selecting text in the XAML editor.  The add-in then processes that selected text.  The Grid Row and Column Editor does some pretty slick stuff, all without any real object model to program against.  This was my first crack and working with the XMLDocument so any feedback on better techniques will be well received.

Creating Business Forms, ListViews and DataGrids

I want to emphasize a requirement when creating a business form for a class.  You must ensure that the project that contains the class has been built.  If you make any changes to the source class that you want to make a form for, you must rebuild the project so that the add-in can property reflect the properties of the source class.

When selecting a file from the solution explorer by right clicking on it, the file name must match the class name.  If you have multiple classes in one file, or a class in a file with a different name, then use the Class Selector in the XAML Editor to create your business form, ListView or DataGrid.

Enhance Your Design Time Experience

Mark Boulter, Ben Wulfe and I have come up with a solution for displaying design time data in Visual Studio’s Cider Designer and I have posted that solution in this blog post;  Viewing Design Time Data in Visual Studio 2008 Cider Designer in WPF and Silverlight Projects.

This solution provides design time data for WPF and Silverlight projects.  It is especially helpful when working with DataTemplates, DataGrids and ListViews.  This solution is very easy to implement and also works in Expression Blend.

The below image is the Cider Designer displaying design time data for a Silverlight application.  Design time data cut my layout time by 75% because I didn’t have to re-run the project between edits.

Installation

Ensure that you have installed Visual Studio 2008 SP1.

For Silverlight Development, install the latest Silverlight 2 as detailed on Scott Guthrie’s blog. (If you’re not doing Silverlight development this is not required.)

Upgrading from Version 1 or 2 to 3.x?  Please use Control Panel and remove XAML Power Toys before installing the package.

Upgrading from Version 3.0 to 3.x?  Just run the install package.

First Time Use

The first time you use XAML Power Toys please edit and save your Control Default Settings.  If you do not do this, and you access a feature that needs them, default settings will be created, saved and a dialog box will display, informing you of the action just taken.  By editing and saving your Control Default Settings before using XAML Power Toys, you’ll not only avoid this intrusive dialog box, but you’ll know and can control how controls are created by XAML Power Toys.

Control Default Settings are now being saved in the installation directory so that you’ll never lose your settings again.  This file is not replaced during a re-installation or during a Control Panel removal.  You can also easily backup your settings.

Add-In Macro Security

In order for Visual Studio to discover XAML Power Toys, the XAMLPowerToys.Addin file must be in a path in the below dialog box.  Additionally the .Addin file contains a path to the actual Add-In.

We are all developers, and I really don’t want someone changing my system registry or security settings without my knowledge and consent.

So, I have added this additional installation step that is fully explained in the above Installation and Setup video.  All that is required, is that you add the path the XAML Power Toys to your Visual Studio Add-In and Macro Security settings.  Now you are in full control of allowing or not allowing the Add-In to load or even be known by Visual Studio.

Downloads

After downloading the below package you must rename the extension from .DOC to .zip.  This is a requirement of WordPress.com.

Remember – Please build your projects before attempting to create forms or using the Field List.

Please set your Control Defaults after installing, new options have been added.

Download XAML Power Toys v4.0 Release Installer (992 KB)

Download XAML Power Toys v4.0 Source Code not required (507 KB)

Silverlight 2.0 ComboBox Data Binding Bug

When testing the Silverlight ComboBox column, I found that under certain circumstances the initial data binding of the ComboBox does not select the item pointed to in the DataContext.  This occurs when the DataContext is set before the ComboBox.ItemsSource is populated and the ComboBox has it’s data bindings established in the XAML markup.  If the ComboBox items are populated in XAML with <ComboBoxItems> this does not apply and the ComboBox works normally.

Let’s look at an example that provides a solution.  The below XAML is a Silverlight DataGridTemplateColumn with a ComboBox.  The ComboBox is associated with the “Id” property on the DataContext.  Notice the ComboBox Loaded event handler.  In addition, when XAML Power Toys emits a Silverlight ComboBox, I have placed a short comment in the XAML spit, reminding you to use this pattern.

<data:DataGridTemplateColumn Header="Id" SortMemberPath="Id">
    <data:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>

            <ComboBox Loaded="cboCustomerId_Loaded" />

        </DataTemplate>
    </data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>

The below code is the event handler.  The ItemsSource is populated first and then the data binding to the SelectedItem property is established.  Remember, the DataContext has already been establish when the DataGrid was created.  Writing your code following this pattern ensures that the ComboBox will select the correct item when the data bindings are established.

Private Sub cboCustomerId_Loaded(ByVal sender As System.Object, _
                                 ByVal e As System.Windows.RoutedEventArgs)

    'combobox itemssource
    Dim ary As Integer() = {1, 2, 3, 4, 5, 6, 7}
    Dim cbo As ComboBox = CType(sender, ComboBox)
    cbo.ItemsSource = ary

    'combobox binding
    Dim objBinding As New Binding("Id") With {.Mode = BindingMode.TwoWay}
    cbo.SetBinding(ComboBox.SelectedItemProperty, objBinding)

End Sub

If you have a ComboBox on a UserControl and the ComboBox is being populated in code, you should follow this same above pattern if your ComboBox SelectedItem is bound to a DataContext.

Cool Usage Tips

I have written a blog post on how to select large amounts of XAML when performing a Group Into.  The blog post is Cool Usage Tip For XAML Power Toys.  Check it out and easily select large amounts of XAML when Grouping or working with Grids.

Here is a follow up blog post that provides another solution to selecting large portions of XAML:  Super Tip For XAML Power Toys

XAML Power Toys Walk Through’s

Pete O’Hanlon published a walk though for MOXAML Power Toys and XAML Power Toys working together to very quickly author a Silverlight LOB form.  Check it out.  Great job Pete and thank you!

Future of XAML Power Toys

Please post your feedback to this post and I’ll make required updates and add features as necessary.  The idea behind this project was to provide simple features that I need every day when working in the XAML editor.  If there are tasks that you find yourself manually doing a lot, please post a comment and I’ll look at the request.  If you have to submit a request that can’t be explained in a few sentences please send it to moleproject@yahoo.com.  You can include screen shots and longer text documents as required.

Have a great day.

Just a grain of sand on the worlds beaches.