Whoa! Here is a feature that slipped through cracks for me but is something I have been asking for a long time… I just didnt know they got it into Blend 2.

It used to be in Blend that you had to explicitely set a width and height to see your content render (specifically around root elements like Windows and Pages). This was problematic because inevitably I would check in my xaml with these widths and heights set which would usually break resize scenarios.

Now with the design-time size you can set a designer only property that has no effect at run time. Just look for the bar and triangle glyphs as shown below and resize your content.

This is what it adds in xaml:

d:DesignWidth=”1176″ d:DesignHeight=”935.314″

In the Brushes panel if you have “gradient brush” selected and use the eyedropper, you can drag a range between two points to create a gradient brush based on the values between those two points.

Wish I had stumbled on that earlier.

Been feeling like I haven’t had much in the way of valuable posts lately… Mostly just links that I find interesting… Been a victim of having too many cool projects and training gigs lined up…

One thing I like about training ops is it always uconvers some interesting scenarios that “should” be easy but really isn’t.

For example in a training we did earlier this year, there was a request to create a simple tab control that displayed its tab items on the left and right but did so with 90 degree text. Seemed like it should be easy with a layout transform but it actually took a bit of futzing to get it right… In the end it wasnt really hard.

http://www.designerslove.net/samples/VerticalTabItems.xaml

You might notice in the system tab control that there is a TabStripPlacement property that allows you to place the position of the tabpanel to the different sides but the text stays horizontal. If you use TabStripPlacement in simple styles nothing happens because nothing in the triggers was designed. I have extended the Simple Styles (sorta… this is a combo of editing a copy of the standard TabControl template and extending the Simple Styles TabItem.)

Potentially it might have been better to create a single TabItem custom control that has a new custom property called TabDirection… But for now I have two different styles for TabItem… it’s a little bit more cumbersome this way because when you change the look of the tab you have to update it in two places rather than one.

Welcome to a new category of posts that I will be doing… You can filter by Designer Tips to see all the relevant tips rather than all my boring posts. We have been doing alot of training lately and I intend these posts to suppliment the training courses I have given and to give a peak as to what kind of things designers learn from our courses.

Ok let me start this post by saying Im a huge Blend sellout. I love the tool. It’s a bit unfair because Ive been using it longer than most… Not as long as Manuel Clement but close    Because of the amount of time I have been using it I have overcome alot of hurdles and nothing about the experience seems blatantly wrong to me. Kudos to the Expression teams…you truly are tapping into the needs of the designer… its just that most designers dont know it yet and when they sit in front of this app for the first time they long for the old days when they were only responsible for high quality bitmaps…

I think one of the challenges designers have is that they have to hit both the curve of WPF and have to hit a similar curve about using tools that “blend” developer concepts with designer concepts. I think all designers who stick with it will have the same kind of “aha” moments that Karsten refers to in his mini essay.

With these designer tips I dont want to focus on how you can do things that are defacto standard user behaviors that most designers already know from using existing design apps (how to use bezier curves, how to pan and zoom). 

I do want to focus on quick tips that really make a big difference in your ability to do user interface design that Ive never seen exposed before in other tools… So for the inaugural Design Tip I want to post one of my favorites:

Design Tip #1 Using Blend’s “Change Layout Type” to switch between WPF and WPF/E layouts

When I am mocking up UI in apps like Design, Photoshop, Illustrator, etc I dont have access to stacking or docking layout behaviors. I have to simulate it with absolute positioning which can be incredibly time consuming. On the other hand with Blend I get tons of layout behaviors that can significanlty speed up my prototyping and actual user interface layout execution.

Im specifically typifying this design tip as a WPF to WPFE workflow because I have had such success with doing this recently in creating CHATBlender.  CHATBlender has UI docked to the right and bottom which isnt really that easy to do with the WPF/E because it only has Canvas for layout. So to allow for interesting docking and resize functionality that you get for free in WPF you need to write script to position your elements… However that is pretty limiting to the designer and I really want to be able to test out the resize/relayout behavior with my design before I did all the work to convert the UI to WPF/E with tons of javascript based layout hacks.

Here is how Blend makes this fantastically easy:

Blend has features that allow you to convert existing layouts from one kind to another kind. When the layout is converted Blend does its best to approximate where the positioning should be.

In this screenshot I have created some StackPanel UI using Blend.

After I have created my UI, I convert it from a StackPanel to a Canvas for use in a WPF/E project.

This is incredibly useful when you have UI that is sized by layout and not given a hard coded width and height that is usually necessary in a Canvas layout or WPF/E solution.

Knowing that I can do this, here is my workflow simply put:

1. First I create a layout in Blend using Grids, StackPanels etc
2. Then I test and refine my layout in Blend and verify in a standalone window.
3. Then I right click my layout panel and  use Blend to convert the layout type to a Canvas.
4. Then I hand strip WPF XAML into WPF/E (mostly removing alignments and margins)
5. When I am all done I paste the Canvas and elements into my WPF/E project and then hook up JavaScript to manage layout.

Here is a screenshot of ChatBlender as I designed it using WPF layouts.

OK now the cool part… Here is why this shouldnt just be typified as only a WPF to WPF/E workflow…

Try going the other way…

In fact start in Expression Design and draw UI that simulates layout… For example I could draw my stacking Ellipses that we saw in the screenshot above and then when I import the UI as a Canvas into Blend I can use “Change Layout Type” to convert to a StackPanel. My experience has been that you lose some Margin information that you would expect to be there but otherwise you will gain valuable hours back into your day and you will plug into a workflow with other designers who only use Expression Design or existing tools that can export XAML but are not “layout aware”.