Nathan Dunlap

Nathan Dunlap

May 2004 - Posts

  • MultiPropertyTrigger in Styles

    Posted by ndunlap to Nathan Dunlap on May 18 2004, 03:16 PM
    Filed under:

    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.

    PostTypeIcon
    3,633 Views

  • Creating Clip Art for Avalon

    Posted by ndunlap to Nathan Dunlap on May 17 2004, 05:44 PM
    Filed under: , ,

    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.

    1. Open “Add/Remove Programs” from the Control Panel.
    2. Click on "Add or Remove Windows Components"
    3. 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.

    1. Open a document in Microsoft Word.
    2. Click Insert > Picture > Clip Art...
    3. 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.
    4. Perform your Clip Art search.
    5. Click on a clip art tile to insert it in your Word document.
    6. 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.)
    7. Click File > Print then choose the Windows Client Printer Driver
    8. Click the “Properties“ button.
    9. 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)
    10. Click "OK" to continue on to printing and specify a file name and destination. (c:\foo.xaml)
    11. Navigate to the file destination and there should be the foo.xaml file and a folder called "foo_files"
    12. Open "Page_1.xaml" in this folder with your XAML editor.
    13. 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.
    PostTypeIcon
    5,000 Views

  • Hooray for WinHEC bits!

    Posted by ndunlap to Nathan Dunlap on May 07 2004, 02:07 PM
    Filed under: , , , ,

    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.

    PostTypeIcon
    5,709 Views