Nathan Dunlap

MultiPropertyTrigger in Styles

ndunlap — Tue, 18 May 2004 20:16:00 GMT

Somehow I haven't stumbled on this until. This morning I was browsing through a parser test and I saw MultiPropertyTrigger and decided to try it. This seems like it would be pretty crucial for complex styles. Here is what it looks like:

<Style.VisualTriggers >
    <PropertyTrigger Property="Button.IsFocused" Value="True" >
        <Set Target="BackgroundRect" PropertyPath="Fill" Value="#6699CC" />
    </PropertyTrigger>

    <MultiPropertyTrigger >
        <MultiPropertyTrigger.Conditions >
            <Condition Property="Button.IsPressed" Value="True" />
            <Condition Property="Button.IsFocused" Value="True" />
        </MultiPropertyTrigger.Conditions>
        <Set Target="RightEllipse" PropertyPath="Fill" Value="#ffcc00" />
    </MultiPropertyTrigger>
</Style.VisualTriggers>

I have a sample using this that builds on the WinHEC bits posted here.

Creating Clip Art for Avalon

ndunlap — Mon, 17 May 2004 22:44:00 GMT

I've been asked how I created different Clip Art pieces in my demos a lot recently so I figure this is a good topic to blog on. If any of you have taken a look at typical path data, you are aware that its pretty painful to even think about manipulating or creating path content without some sort of tool. One way I have gotten around this is to turn Microsoft Office into a makeshift editor for creating Avalon ready Clip Art using the Windows Client Printer Driver. Here is a simple how-to:

First make sure you have installed the Windows Client Printer Driver.

Open “Add/Remove Programs” from the Control Panel.
Click on "Add or Remove Windows Components"
In the components list click the checkbox for "Windows Client Printer Driver"

After install is complete you can access the Printer driver from any application that supports printing. I'm not aware of how well other applications will do when working with the printer driver, but I do know that Office 2003 works great.

Here is how I get clipart from Microsoft Word into my XAML projects.

Open a document in Microsoft Word.
Click Insert > Picture > Clip Art...
Change dropdown for "Results should be:" to only search on Clip Art. You can even filter it down further based on file type. I have most success searching for .wmf files only.
Perform your Clip Art search.
Click on a clip art tile to insert it in your Word document.
Click File > Page Setup and set all your Margins to zero. (this is to ensure that the art is drawn starting at a 0,0 reference point for all the resulting paths.)
Click File > Print then choose the Windows Client Printer Driver
Click the “Properties“ button.
Change "Output Format" to "Windows Client Markup File" (otherwise the output will be a .container file which wont let you get into the markup. Choosing Markup File will export a .XAML)
Click "OK" to continue on to printing and specify a file name and destination. (c:\foo.xaml)
Navigate to the file destination and there should be the foo.xaml file and a folder called "foo_files"
Open "Page_1.xaml" in this folder with your XAML editor.
All the Path elements in between the "FixedPage" elements are fair game. Copy and paste those into your app. I find it useful to wrap these elements in Canvas and set the dimensions of the Canvas to the same size as the clip art dimensions that are specified in Word. If you need different dimensions, you can resize the art in Word and export again using the printer driver. I also like to turn clip art into DrawingBrushes for easy reuse at multiple sizes.

Hooray for WinHEC bits!

ndunlap — Fri, 07 May 2004 19:07:00 GMT

Now that the SDK has been updated I can finally start posting on some of the really cool features that I have been playing with for the last couple of months.

I've got an article in the works that is an updated version of my GelButton that I posted earlier. Its not finished yet, but if you want to get a sneak peek you can see the source code and screen shots here. http://www.longhornblogs.com/ndunlap/articles/3392.aspx It isn't a straight port of the original GelButton demo, but I have drastically reduced the complexity of how it was created using Grid. Also I have made the drop shadow and the shines on the button much more aesthetically pleasing using the Blur ImageEffect.

Now that the SDK is live here are some links I think are pretty exciting and interesting...

Grid
http://longhorn.msdn.microsoft.com/lhsdk/ref/ns/system.windows.controls/c/grid/grid.aspx
http://longhorn.msdn.microsoft.com/lhsdk/layout/overviews/grid_ovw.aspx
This panel is awesome. I will admit I havent been using it enough to really feel like I have mastered its use but it really fixes the issues I blogged on earlier about not being able to do margin effects easily without doing the DockPanel.Dock=“fill“ workaround. Grid allows you to apply NineGrid like slice and dice control on layouts that contain things other than image data. When I started using shape elements to create the visuals for my controls and applications layouts I immediately found myself wanting to have the same kind of control like I had with NineGrid. With the Grid panel I get that kind of control but I am not limited to a nine cell configuration. This is very cool and powerful and there are going to be some really exciting and creative designs enabled using this. I can't wait to see the different way people use this.

ImageEffects
http://longhorn.msdn.microsoft.com/lhsdk/ref/ns/system.windows.media/c/imageeffect/imageeffect.aspx
So far the one I am using a lot is Blur. With blur I can create some gorgeous drop shadows, on any kind of elment, text, shape, button, etc. My GelButton example is using it a lot. I've also got some cool laser effects I am doing with blur that I will be posting on.

OpacityMasks
http://longhorn.msdn.microsoft.com/lhsdk/graphicsmm/overviews/opacitymasking.aspx
Another great toy for pulling off some sweet effects. You can use gradients, images, DrawingBrushes, etc to create your masks.

3D
http://longhorn.msdn.microsoft.com/lhsdk/graphicsmm/overviews/basic3d.aspx
Need I say more? Ok I will.... This changes everything. No more hard line between creating 3D content and mixing it with 2D content. I had been asking for 2D perspective transform so I could pull off pseudo 3D effects...Real 3D is so much better! Try this sometime... create an app that has 3D elements that composite on top of 2D elements like a complex layout with text flowing in it. Then composite that on top of another 3D element and hey while your at it throw a video element at the very bottom of the stack so it has to render through all that stuff. Hmm maybe throw a video element on top and set some opacity on it. Maybe even put an opacity mask on the topmost video element. Then animate a bunch of stuff. Run it full screen. Its definitely a new world we are living in! I will get some posts with cool 3D samples up soon.

DrawingBrush in resources...
One note for people that have read my earlier blogs about using DrawingBrush... There are some changes with how DrawingBrush works when it is used as a resource. If your app has DrawingBrushes defined as a resource you will need to do a work around for the app to still work. I will try to post simple code soon. In the meantime you can see how I got my DrawingBrush resources working in the LoginScreen Demo http://longhorn.msdn.microsoft.com/lhsdk/sampledocs/sampleapplications/wcpsamp_demosample_loginscreen.aspx. Check out default.xaml.cs and look at the Init event. You can still use a DrawingBrush as a resource, just not as a resource before the application has loaded. Basically the first access to a DrawingBrush needs to happen before the DrawingBrush is used to render, so accessing it in the start up event causes the first access to occur before layout and render has happened.

Creating resizable panels with splitter bars

ndunlap — Sat, 14 Feb 2004 00:22:00 GMT

Jonathan Russ, a developer on the Avalon Demo team, mentioned that somebody was asking how to do resizable frames on the newsgroups.

This is really easy to do with DockPanel.Dock=“Fill“ so we put together a sample that allows you to do this. I've posted an article for it at http://www.longhornblogs.com/ndunlap/articles/2505.aspx

Creating Shapes with CombineMode

ndunlap — Fri, 30 Jan 2004 00:41:00 GMT

I demonstrated using CombineMode in my earlier post about clipping. You can do the same thing on a Path element to create more complex shapes.

I needed a reference app so I could remember what each type of CombineMode does. I've posted that app to http://www.dunlap.cc/lhblog/vectors/combinemode.zip

This is what the code looks like:

Here is a snapshot for a visual reference:

GelButton Article and using DockPanel with Margin

ndunlap — Fri, 23 Jan 2004 03:22:00 GMT

I am more or less done with the article on creating a gel button using styling.

The article is posted here http://www.longhornblogs.com/ndunlap/articles/2203.aspx

While I was writing the article I realized that I frivolously use DockPanels wrapped around my shape elements and other layout elements that use the Margin property. I think its a pretty good tip to explain why I do this.

If you put a shape inside of a Canavs and set the width and height to 100% and then give the shape a margin like this:

<Canvas Width="100" Height="75" Background="#6699cc" Margin="50">
<Rectangle Width="100%" Height="100%" Fill="gold" Margin="5" RadiusX="10" RadiusY="10" />
</Canvas>

in DHTML, this is what you would expect:

However if you do that in Avalon, this is what you get:

The reason you get this is because the layout engine figures out the width and then it applies the margin afterwards. So my trick for getting around this is to use a DockPanel and then set DockPanel.Dock=”fill” on the shape and then set the margin. This way the layout engine does what I am used to in DHTML. Here is an example:

<DockPanel Width="100" Height="75" Background="#6699cc" >
<Rectangle DockPanel.Dock="fill" Fill="gold" Margin="5" RadiusX="10" RadiusY="10" />
</DockPanel>

Creating dropshadow text in Avalon using ImageEffectBlur

ndunlap — Wed, 21 Jan 2004 08:10:00 GMT

Whew! its been along time. There is so much to blog about regarding Avalon, I get blogger block. (Doesn't help there are so few hours in the day... I was hoping Bush would address that in the State of the Union tonight. More tax cuts please, more hours in the day please!)

I am working on posting an article about creating a custom styled button that uses aliased properties, styled ContentPresenters, VisualTrees, VisualTriggers, vector shapes among other cool features. Will post that hopefully tonight or tomorrow night. If you want to get to it while I am working on it here it is. http://www.longhornblogs.com/ndunlap/articles/2203.aspx (Articles, cool! I'm still figuring out how all the features in this blog tool work. If I'm doing it all wrong let me know.)

Robert Wlodarczyk posted on 1/15 about using ImageEffectBlur. One cool way that I use this feature is to create very effective dropshadows on text. Here is a screenshot of some text with ImageEffectBlur on a text element set in the background.

As a designer I am pretty excited to be able to create dropshadows that have enough fidelity and control to compete with the shadows I can create in Photoshop. I've worked with some nasty programmatically drawn dropshadows. Usually its so bad that I resort to creating the dropshadow in Photoshop and then exporting a PNG. So far the only thing I can complain about the dropshadows I create with Avalon is that for some reason they are clipping at the top and left. I will try and figure that out soon.

One cool thing I did too was to create a style with a visual tree that contained two content presenters. The first ContentPresenter is the element that the blur effect gets applied to. The second ContentPresenter is the white text. These are both aliased to the same content. The end result is really quick version of a reusable dropshadow text element. For this I used a button because I dont think we can legally do a visualtree on the text element and I refer to the Button's content property. You need to apply the actual blur effect to a ContentPresenter. I will describe creating a ContentStyle with ContentPresenter styles in the custom button article I referenced above.

Now I can create text with a drop shadow on it wherever I want.
<Button Style=“DropShadowText“>Text with a dropshadow on it</Button

Global styles and resources using application level resources

ndunlap — Fri, 19 Dec 2003 00:00:00 GMT

In DHTML you can create global CSS stylesheets that allow you to access your styles across multiple web pages. You can do the same thing by storing your resources in the application object. This is much more powerful with XAML because you can store more than just styles. For example, for my visual style I would store all my themed icons created using DrawingBrushes, my custom control modifications and defined metrics using styles, and all my colors as named resources. I can even resource text strings at the application level.

The SDK has a simple Application Level Resources demo here. This is a good doc on understanding the Application Object.

The quick summary on how this works is that you create your resource block in your application definition page.

<Application.Resources>
      <Color def:Name=“CustomColor1“ ... />
      <Image def:Name=“CustomLogo1“ ... />
      <Style def:Name=“CustomStyle1“ ... />
<Application.Resources>

</Application>

Now every page in you application will be able to access these three resources.

Where this gets really cool is when you start to use BasedOn styles to modify application level defined styles at the page level. I will post some good uses for BasedOn styles later.

Reusing Vectors with Styles and def:Includes

ndunlap — Wed, 17 Dec 2003 00:30:00 GMT

In my last post I mentioned that drawing brush is good when you don't want your vectors to intelligently resize and layout. So what do I do when I want to reuse vectors that I do want to dynamically resize? Well the obvious solution is to build my vector elements directly inline. The only problem is that this becomes really difficult to manage. So here are some tricks I use to avoid XAML bloat using def:include resources or styles. This allows me to use vectors as I would inline to get the benefit of layout, but I can reuse common designed elements.

I have posted an example here that demonstrates creating a panel with a "cutout" effect.

First, def:include resources are the most intuitive way to go, but in the PDC builds you can only use one instance of a def:include. (Don't worry, this will be fixed so that you can use it as you would expect...)

Here is how you define it:

Here is how you use it:

<def:Include def:Content="{MyCustomCanvas}"/>

Another way of doing this is by using Style resources. ( I will be going into way more depth on how to use Styles soon. )

Here is how you define it:

Here is how you use it:

Creating vector icons with DrawingBrush

ndunlap — Tue, 16 Dec 2003 00:13:00 GMT

OK, creating icons in today's world sucks... First I have to create multiple sizes of icons 16x, 24x, 32x 48x, 64x, etc. Even when I go through all the trouble of making sure I have all the different dimensions of the icons I need, I still run the risk of my icons being mangled when they show up on a monitor running a different DPI (with high dpi monitors on their way, this is becoming more and more of an issue).

Creating vector icons with DrawingBrush is a way that I get around the problems of needing multiple resolution and multiple dimension icons. DrawingBrush allows me to basically combine a bunch of vector shapes and then define them as a brush resource that I can paint the Fill, Background properties on elements. This is really convenient when I want to get the benefit of using vectors if I want my strokes and shapes to always proportionally scale and I don't mind if the vectors don't intelligently resize or if the strokes become distorted when stretching and scaling. This is typically the behavior I expect when I am using graphical elements like clipart and icons.

Here is what it looks like:

The image below show is a snap shot of a DrawingBrush that is used for various sized icons. I kept the jpg low res for the web, but if you run the app linked below you will see that the fidelity on every one of the icons is excellent. The stretched image shows that you will distort your shapes and strokes, but you wont ever show any pixelation.

Defining resources in markup

ndunlap — Thu, 11 Dec 2003 02:22:00 GMT

In the SDK is a demo where I completely change the look and feel of an app by swapping out resources on the fly based on user interaction. This demo is located here if you want to try it out.

I've got another demo where I have one set of resources defined on a page level that references application level resources. In the app level resources all that I define are some color and brush resources. Doing this made it super easy to just replace the app level resources to update the colors throughout the application, but I was able to maintain all the crazy styling that I had done on the other pages. At some point I will clean that demo up and post it.

I have posted a sample that I think is a really useful reference for using resources in markup here.

The types of resources I have in this sample include how to define and use bytes, strings, colors, brushes, styles, XMLDataSources, and more.

The demo doesn't do anything interesting other than just defines the different types of resources and then uses them. It's pretty cool though because I chain the resources off of each other. For example: I define a def:include that creates a button that uses a brush resource. That brush resource uses a color resource. The color resource uses a byte resource. All of this using markup only!

Clipping video

ndunlap — Tue, 09 Dec 2003 23:14:00 GMT

There are some great things you can do with Clipping. Most commonly you will use ClipToBounds to decide whether an elements children will draw beyond the element's described dimensions. However you can really go crazy with Clip. For example, clipping to a geometry.

This is a really cool effect with video that we used in one of the PDC keynote demos. The following code will let you clip video to any geometric shape you provide. In the case below I clipped the video to an ellipse.

The second geometry provided describes two shapes that are combined similar to path operations in tools like Illustrator and Freehand. Remove the first GeometryCollection and uncomment the second to try it out.

I've posted a project for this here. The video in this is using a hard coded path “c:\video\video.wmv” because relative paths on video weren't working for me in 4051 build.

Here is what it looks like:

You could use this to provide extremely custom ways of hosting video in your application. Clipping the video to fit into a space age television set, or making video fit into branding elements, etc.

Over my next few post's I'm going to create a highly customized button with clipped video incorporated into it. This should give me a chance to go over a few of my other favorite features like DrawingBrush, multiple timelines, and we can get into a bit of styling in Avalon.

Design Eye for the Dev Guy

ndunlap — Tue, 09 Dec 2003 01:15:00 GMT

Who I am, what I do and what's it to ya?

I have the luck and good fortune of being a designer on Avalon. Previously I was a designer on the IE SDK team where I picked up a bunch of DHTML skills. Match those skills with some proficiency in designer apps like Photoshop, Illustrator, After Effects, Flash, etc., and I get a job where I get to design UI for the most robust and incredibly powerful platform I have ever seen.

Seriously, I am pretty lucky. I have developers coming into my office asking me to dream up cool ways to show off their features in the platform that I know most designers would wet their pants for (for instance compositing multiple broadcast quality video elements with alpha masking...mmm...yummy).

I see alot of excitement in the developer community for Avalon, but the people who should be getting really excited about this are the designers. We are the ones who get to see our visions become a reality. Imagine not feeling like your designs were going to be trashed with compromises when it comes time to implement them. No more hacky workarounds to pull off the visual effects that you intend. Rather, with Avalon, designers get the joy of working with elegant solutions that compliment the way that your visuals were dreamed up in your favorite design tool. Of course Im biased, but I'm not afraid to let the technology prove the pudding.

So thats where this blog comes into play...

My goal with my blog is to get the word out on some of these cool features and showcase cool ways to use them. I'll be posting as many common designer tips and tricks as I can. Feel free to challenge me with some cool ideas that you would like to see pulled off in Longhorn.

Oh yeah, just a warning... I'm a designer. My developer skills are pretty lame. I pride myself in being able to understand the most basic programming skills, but when it comes down to it, I really only shine when I'm working in markup or designer tools (just another testament to the simplicity of the platform).