Another great example of cool design time functionality in Cider (WPF Designer in Visual Studio 2008) comes from Actipro. Their Office Ribbon control uses Cider Extensibility to add task panes invoked by an adorner that makes configuring their control a breeze.
For example, when the main Ribbon is selected a little widget adorner in the upper right hand corner is shown and when clicked will bring up a task pane that uses the Cider Editing Model to make updates to the XAML:
Likewise, they've done that for TabGroup, Tab and StackPanel tasks:
There are other examples as well, virtually every major clickable element has a task pane associated with it. Very cool.
You can also drag and drop elements of your Ribbon around -- which really makes designing your control really easy.
Actipro has also made good use of the Property Browser, the collection editors have all been setup using the NewItemTypesAttribute which allows the end user of their controls to use the collection editors to configure the Ribbon:
Similarly, with non collection properties in the Property Browser:
Actipro uses the following Cider Extensibility points: DesignModeValueProvider (set a different value for the instance in the UI from that which is serialized to XAML), lots of Adorners, and Property Editing Extensibility.
For additional information, see http://www.actiprosoftware.com/Products/DotNet/WPF/Ribbon/DesignerSupport.aspx
Now that Visual Studio 2008 has been released, one of the real fruits of my job is to see how our customers end up using our product. Specifically, I really enjoy seeing how WPF Control Developers end up using the WPF Designer Extensibility API that I talk about so much on this blog.
If you have examples of how you are using extensibility for your WPF controls -- please drop me a line (you can send a message from this blog) and I'll definitely blog about your product.
The first example I received that shows off design time extensibility comes from divelements - SandDock for WPF.
SanDock is a very cool set of controls that provide a vast array of Window Management functionality. Here is a shot of their demo application inside the designer. (showing off how you can redock your windows at design time using adorners)
Here they use MenuActions to add context menu items that help the user configure their application:
Finally, here is a more clear shot of their clever use of adorners to provide a design time window docking functionality similar to the dockable windows feature in Visual Studio:
They have also made their own EverythingPolicy (to show adorners on more elements than just the primary selection), ParentAdapter (to handle reparenting), and DefaultInitializer (note the XAML spit when instantiating their controls from the toolbox),
Lots of great illustrations of how you can use the power of Cider's extensibility model to create a first class design time experience.
Here is the divelements page describing the designer support: http://www.divelements.co.uk/net/controls/sanddockwpf/documentation/designer.htm
If you add a TextBox as an adorner to your design time, by default you will not be able to give that TextBox focus. That is, you won't be able to set the cursor in it so that you can type.
Similarly, if you use a TabControl as an adorner, by default you won't be able to switch the tabs by clicking on them.
The solution is to set the AdornerPanel.IsContentFocusable property to true:
AdornerPanel ap = new AdornerPanel(); ap.IsContentFocusable = true;
One caveat here: we know we have a bug in the TextBox keyboard handling where the delete key will always delete the selected control, even when the user is in text entry mode in a TextBox -- i.e. hitting the delete key won't delete the text, it will delete the control.
Cider is currently known as the "WPF Designer for Visual Studio" but we're also in the works of being known as the "Silverlight Designer for Visual Studio".
In other words, we care about Silverlight and the following is pretty cool:
· On December 19th, Blockbuster will premiere the first full-length feature film, Jackass 2.5, directly to online audiences on Windows and Mac using Microsoft Silverlight
· Jackass 2.5 will be made available for free, for anyone in the US 17 or older, courtesy of Blockbuster at www.blockbuster.jackassworld.com beginning December 19th through December 31st, 2007
· This is one of the largest projects in Blockbuster history, made possible using the rich media CDN from Limelight Networks and Silverlight
· Silverlight is a 1.5MB cross-browser, cross-platform plugin for IE, Firefox and Safari users. Details and download at http://www.microsoft.com/silverlight
The ecosystem around Silverlight is continuing to grow, with an impressive line-up of customers like MLB.com, BMW, Sony Ericsson, Baidu (#1 search site in PRC), NBA.com, Entertainment Tonight (CBS/Paramount) and UVNTV.com, to name a few. See more at http://silverlight.net/Showcase/
Recently I had a customer point out the following from the documentation:
Differences in Specifying Toolbox icons
In the Windows Forms Designer framework, you specify a Toolbox icon for your custom control by applying the ToolboxBitmapAttribute to your control class.
In the WPF Designer framework, you use an embedded resource and a naming convention to specify a Toolbox bitmap. In addition, you use the ToolboxBrowsableAttribute to restrict which types in an assembly are available for populating a Toolbox.
Followed by the question "What is the naming convention?"
I thought I'd answer that question by posting to my blog as it is not the first time I've had that question.
First, a note about the ToolboxBrowsableAttribute, it is defined in Microsoft.Windows.Design.dll so you don't want to use it declaratively in your code because that would require making a reference to Microsoft.Windows.Design.dll which will only be available on machines that have Visual Studio 2008 installed. Use the Metadata Store as discussed here and Metadata Assemblies as discussed here.
Toolbox Icon Naming Convention
Example:
Type is defined as:
namespace Proseware.Core.Controls
{
public partial class ProseControl : UserControl
public ProseControl()
InitializeComponent();
}
Default namespace: Proseware.Core.Controls
ProseControl.Icon.png is added as an Embedded Resource.
This causes the image at Proseware.Core.Controls.ProseControl.Icon.png from the resources inside the assembly in which ProseControl is contained to be used as the toolbox icon:
(view from reflector)
Multiple Sizes
The naming convention supports multiple image sizes. For the following example:
For the ProseControl type, the following images in the resources will all be found and the best match for size will be used.
Proseware.Core.Controls.ProseControl.Icon.Large.png
Proseware.Core.Controls.ProseControl.Icon.Medium.png
Proseware.Core.Controls.ProseControl.Icon.ReallyLarge.png
Or, alternatively (the ‘.’ After Icon is not required but is acceptable):
Proseware.Core.Controls.ProseControl.IconLarge.png
Proseware.Core.Controls.ProseControl.IconMedium.png
Proseware.Core.Controls.ProseControl.IconReallyLarge.png
If the desired size by the host is 64 pixels by 64 pixels, and Proseware.Core.Controls.ProseControl.Icon.Large.png is the best match based on size and aspect ratio, it will be used. All of the images will be looked at.
If there are 2 images with the same size and aspect ratio, the host will decide which it will use.
Sample Project
Attached to this post is a sample project that illustrates how to get an icon defined for your control. To test, build the solution, right click on the toolbox and click "Choose Items...". Switch to the WPF Components tab and navigate to one of the control assemblies. You will then see your control with it's icon on the toolbox.
Ran across this today and I thought I would pass it along as it is a very useful tool for WPF developers.
Mole II is a high performance, full featured Visual Studio Visualizer which allows you to inspect elements in the WPF visual tree or logical tree, as well as all properties of those elements.
http://karlshifflett.wordpress.com/mole-visual-studio-visualizer-for-wpf/
Mark Wilson-Thomas is our resident WPF Layout expert and is leveraging my blog to get some great information out about how the VS 2008 WPF Designer approaches layout:
How to get the best out of the WPF designer when laying out your WPF app
Lots of folks have asked what the reasoning is for the WPF designer giving a new control instance on the design surface a width and height, and margins so that it stays where you drop it and sizes to a reasonable default size. The story of “why we emit margins to make things feel like anchored controls in Windows Forms” by default in the Cider layout system is really about making it possible to traverse two paths to your final layout, and to cross over from one to the other:
Path 1: This is the popular “Visual Place-and-size” path that people have been used to on practically every GUI designer that's shipped since Visual Basic.
Path 2: This is the “Container first” path, where you lay out the Grid(s) or other containers that will govern the layout, then place controls inside them (generally with zero margin) and let the container take care of the resize behavior for you
Path 2 is an approach I’ve seen advocated in several posts and discussions on the topic. Both from a “WPF platform-purist” point of view and an experienced Web UI developers point of view, I agree this a clear and straightforward way of thinking about layout in WPF. However if you’re one of the many millions of developers who have been working with Windows Forms, VB, etc for years, and have never built a web app, it will probably not be an easy transition for you to be forced to start thinking this way for your first app building experiences – and in addition, you may never want to build a fully resizable app.
So if you’re a developer with that set of experience, what we let you do is get a pretty much functional WPF app in the traditional way you always have using path 1 (and actually for a lot of applications you might even stop there). If you wish to, we then give you help to start dropping gridlines into your design and snapping them to your controls/your controls to them (getting the zero margins you are looking for) ready to move into Auto-layout-land. Unfortunately, we didn’t have time on Cider v1 to deliver the full set of features that would give you the “flip-to-auto” part of the story on the design surface, so you have to go to XAML or the property inspector to make it happen, and when you do the behavior of the design surface can become a little “quirky” in places.
So, what’s the best path for getting great layout in the designer then?
The application layout path that works best right now if you want to use the WPF design surface is:
NOTE 1: If you need to move/resize things after this step, it’s best to flip back out of auto first.NOTE 2: Steps 1 & 2 are pretty much interchangeable
Why doesn’t the designer favor auto layouts by default?
I think it's reasonable to argue we should have started with a mode that favored auto layouts by placing new controls with no margins in whatever container they were added to (rather than the method we have used) by default. However after many discussions in the team we felt this kind of total break with the past for our default experience would be just too jarring for too many existing UI technology users.
I do think that a designer setting that allowed you to have a more "start with auto" approach would be a useful feature, and we'll think about that for future releases. As an aside, right now one way to work in a "start with auto" approach should you wish to do so, is to work entirely in the XAML editor and not use the toolbox for control creation at all. That way you will get only the properties you explicitly wanted at creation time.
We've been seeing some issues where VS 2008 crashes when creating a new WPF project. The underlying issue is that on certain machine configurations, the .Net Framework is not updating correctly.
In order to short circuit diagnosing that you're in this state, one of my colleagues on the deployment team has written a tool that will tell you whether or not the .Net Framework is installed correctly or not.
If you are having issues, please take a look at this tool http://blogs.msdn.com/aaronru/archive/2007/11/29/net-framework-3-5-installation-validation-tool.aspx. It will tell you whether or not your .Net Framework installation is correctly installed.
After that, have a look at this tool to collect log files: http://blogs.msdn.com/astebner/archive/2007/08/01/4172276.aspx
If you do have this issue, please contact the Cider team directly via our forum at: http://forums.microsoft.com/MSDN/ShowForum.aspx?ForumID=169&SiteID=1 or via my blog and have the results of the .Net Framework install check and log files ready.
Thank you and sorry for any inconveniences.