December, 2007

  • Cloudy in Seattle

    SandDock for WPF by Divelements

    • 4 Comments

    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

  • Cloudy in Seattle

    Actipro Ribbon - Office 2007 UI

    • 3 Comments

    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

  • Cloudy in Seattle

    See Jackass 2.5 Free Courtesy of Blockbuster and experience Silverlight

    • 3 Comments

    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/

  • Cloudy in Seattle

    Giving Focus to Adorners

    • 3 Comments

    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.

  • Cloudy in Seattle

    Mole 2.1 - WPF Runtime Inspection Tool

    • 3 Comments

     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/

  • Cloudy in Seattle

    Specifying a Toolbox Icon for a Control in the WPF Designer

    • 2 Comments

    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 

    1. To add an image representing your control to a type, simply add an image at the same hierarchy and name in the project, and mark that image as an EmbeddedResource:

    1. Cider will search for resources whose file name without extension matches the type name of the control, including the namespace with a “.icon[*].{BMP| PNG | GIF | JPG | JPEG}” . 
      1. Note that folders in your project affect the namespace in which embedded resources are found.
      2. Supported extensions and file types are: BMP, GIF, JPG, JPEG and PNG
      3. Recommended image size for Bitmap based file formats is 64x64.
      4. The .icon[*] in the naming convention is optional and allows you to specify multiple sizes of the image that is used as the icon.  The match follows the following algorithm:
        1. If there is an exact match on size (both dimensions) use it
        2. Use the closest match based on size and aspect ratio
      5. If a given resource file is not a valid image file, the next match will be used until one is found
    2. Different hosts (i.e. Cider or Sparkle) use different image sizes for their toolbox icon. 
      1. Sparkle uses 24x24 for their large size and 12x12 for their small size
      2. Cider (WPF Designer in Visual Studio) uses 16x16
    3. This design will also be used to find a default icon for types added to the Collection Editor or Sub-Properties Editor “new instance” functionality. 

    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:

     

    Type is defined as:

     

    namespace Proseware.Core.Controls

    {

        public partial class ProseControl : UserControl

        {

            public ProseControl()

            {

                InitializeComponent();

            }

        }

    }

     

    Default namespace: Proseware.Core.Controls

     

    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.

  • Cloudy in Seattle

    How to get the best out of the WPF designer when laying out your WPF app

    • 2 Comments

    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:

    1. Place your controls and get them roughly where you want them in your outermost grid
    2. Drop in your gridlines to control resize behavior but don’t start switching your grid rows/columns and controls into Auto sizing yet
    3. Snap your controls to the gridlines to zero out margins where that’s what you want (or multi-select your controls in the property inspector and zero margins on the whole set of selected controls’ margins)
    4. When everything’s done, flip your controls and grid rows/columns as appropriate into auto-sizing using XAML or the PI.

    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.

  • Cloudy in Seattle

    Visual Studio 2008 RTM Crashing when Creating a WPF Project?

    • 0 Comments

    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.

Page 1 of 1 (8 items)