Current Version 1.0.1, Last Update 28 October 2009
These last few weeks I’ve been writing control designers for Visual Studio 2010 Beta2 WPF and Silverlight controls.
Turns out this is much easier than I expected and is a lot of fun too!
This application is an example for writing a globalized WPF & Silverlight platform neutral control designer. Both WPF & Silverlight applications use the same Design library. You can check out the source code to see how this is done. This source code is in VB.NET. Later this week, I’ll be posting another full featured article and code example in C# and VB.NET for writing a platform neutral control designer for WPF & Silverlight custom controls. The project also includes two controls you can use in your projects. (Yes, Karl now speaks C#. Took about 2 days to pick it up. Still have to lookup some syntax but pretty fluent now.)
I must give credit where credit is due. I got a good bit of feedback and suggestions from my teammates on the Cider Team (WPF & Silverlight Designer Team). Thanks Mark, Zhanbo, Bin, Pav, Marco, Ben and Ray. My great friend Josh Smith also came over one day for some pair programming activities. Thanks Josh!
For those that care, the above designer is an MVVM application that is completely data driven from the ViewModel.
Grid Layout Tool
The Grid Layout Tool provides an abstract view of the selected Grid control in the designer that enables editing the Rows and Columns of the selected Grid.
The above image is the Grid Layout Tool that allows you to:
- Move (reorder) rows and columns
- Move (reorder) multiple rows and columns (when multi-selected with CTRL+click)
- Insert row or column before or after any row or column
- Delete row or column
- Set all row or all columns sizes using the TextBoxes at the top. Enter value and press ENTER.
- Set individual row or column size by clicking the text value the Azure row or column headers and then editing them. Enter value and press ENTER.
- To set size to auto type “a” or “auto” and press ENTER.
- Designer is updated real time as you make your changes.
- Clicking the “Save” button commits the changes into one Undo Transaction.
- Clicking the “Cancel” button cancels all changes and puts the designer back in its original state.
This menu is only available when you have selected a GRID control in the WPF or Silverlight designer.
Chainsaw – Leaves Alignment
The chainsaw will remove all Margins, MinHeights, MinWidths and from CheckBox, RadioButton, Label, TextBlock will remove height and widths and on TextBox will remove height. Will set all Grid Rows to Auto. Will remove Name and x:Name if enabled.
Use this command if you do not have styles defined that determine layout for your form. (see video)
Chainsaw – Clears Alignments
The chainsaw will remove all HorizontalAlignments, VerticalAlignments, Margins, MinHeights, MinWidths and from CheckBox, RadioButton, Label, TextBlock will remove height and widths and on TextBox will remove height. Will set all Grid Rows to Auto. Will remove Name and x:Name if enabled.
Use this command is you have a styles defined that determines layout for your form. (see video)
Modify Control Tags on Create
If this option is checked the following controls will be affected when you create the control using the ToolBox.
StackPanel and Grid – Alignments and Name cleared (note: when the StackPanel is created inside a GroupBox or Expander, the tag modifications are ignored and overridden by the designer.)
TextBox, TextBlock, Label, CheckBox, RadioButton – smaller sizes than the Visual Studio defaults and Named is cleared. The smaller sizes widths were 120, now 80, except TextBox which is 100. You can play around with control creation to see if this makes sense for you.
Modify Control Tags and Chainsaw Clears Name
If you want control names cleared by the Chainsaw or the control Modify Control Tags on Create feature check this menu option. To turn off name clearing, uncheck this menu option.
PLEASE view this short tutorial video. You will get a full and quick understanding of this great feature.
This video is on my SkyDrive. Silverlight Streaming is being discontinued and won’t let me upload any more video files. Like many others, I’m trying to find an alternate location to host all my training videos. Relocating and re-pointing all my videos will be a huge PIA. Any suggestions for hosting would be greatly appreciated.
The below video can be downloaded and viewed. Click the link to be taken to my SkyDrive.
Downloads – Visual Studio 2010 Beta2 ONLY
This software will not work in the final release of Visual Studio 2010. That includes RC/RTM releases. I will release a new version when RC (release candidates) are published.
Remember – Please build your projects before attempting to create forms, ViewModels or using the Field List.
Please set your Control Defaults after installing, new options have been added.
Download now comes from my Windows Live Sky Drive.
Microsoft employees please read this:
If you are using the final Beta2 release these links and this software will work for you.
If not please email me and I’ll send you an internal drop location you can get this software from. (Just look me up in the Global address book.)
Alternate Download Site
Some corporate firewalls do not allow access to Windows Live Sky Drive. You can download the installer here. Remember to rename the file from .doc to .zip. This is a requirement of WordPress.
I can’t not over emphasize the the importance and the weight of your feedback on this block post. My team (Cider Team that delivers the WPF & Silverlight Designer) is eager to hear from customers on features you need in the WPF & Silverlight Designer and XAML Editor.
Hope you use and enjoy XAML Power Toys for Visual Studio 2010 Beta2 for Cider.
Have a great day,
Just a grain of sand on the worlds beaches.