Windows Now

December 2003 - Posts

• Global styles and resources using application level resources

  Posted by ndunlap to Nathan Dunlap on Dec 18 2003, 06:00 PM

  Filed under: Resources, Styles

  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 xmlns="http://schemas.microsoft.com/2003/xaml/"
      xmlns:def="Definition"
      def:CodeBehind="App.xaml.cs"
      def:Class="WCSample.App"
      StartupUri="Default.xaml">

    <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.
  

  4,520 Views

• Reusing Vectors with Styles and def:Includes

  Posted by ndunlap to Nathan Dunlap on Dec 16 2003, 06:30 PM

  Filed under: Resources, Vectors, Styles, Layout

  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:

  <Canvas Width="10%" Height="10%" def:Name="MyCustomCanvas" >
      <Rectangle ... />
      <Rectangle ... />
      <Rectangle ... />
  </Canvas>

  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:

  <Style def:Name="MyCustomCanvas" >
  <Canvas Width="100%" Height="100%" />
   <Style.VisualTree>
     <Canvas Width="10%" Height="10%"  >
        <Rectangle ... />
        <Rectangle ... />
        <Rectangle ... />
     </Canvas>
   </Style.VisualTree>
  </Style>

  Here is how you use it:

  <Canvas Style="{MyCustomCanvas}" Width="80%" Height="100" Margin="10" />
  

  3,282 Views

• Creating vector icons with DrawingBrush

  Posted by ndunlap to Nathan Dunlap on Dec 15 2003, 06:13 PM

  Filed under: Resources, DrawingBrush

  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:

  <Canvas>
  <Canvas.Resources>
   <!-- Define the vector icon with a drawing brush -->
        <DrawingBrush ViewBox="-5,-5,265,265" def:Name="Blue_Ball_Icon">
           <Drawing>
             <PATH ... />
             <Ellipse .. />
             <Rectangle ... />
           </Drawing>
        </DrawingBrush>
  </Canvas.Resources>
  
  <!-- Use the vector icon -->
  <Button Background="{Blue_Ball_Icon}" Width="16px" Height="16px" />
  <Button Background="{Blue_Ball_Icon}" Width="160px" Height="160px" />

  Working example posted here.

  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.
  
  

  9,709 Views

• Defining resources in markup

  Posted by ndunlap to Nathan Dunlap on Dec 10 2003, 08:22 PM

  Filed under: Resources

  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!
  

  3,024 Views

• Clipping video

  Posted by ndunlap to Nathan Dunlap on Dec 09 2003, 05:14 PM

  Filed under: Video

  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.

  <Video ID="myVideo"  Begin="Indefinite" Width="800" Height="600" Source=”myVideo”  Stretch="Fill" >
     <Video.Clip>
        <GeometryCollection>
           <EllipseGeometry Center="300,300" RadiusX="300" RadiusY="300" />
        </GeometryCollection>
      <!--  
        <GeometryCollection CombineMode="Xor">
           <RectangleGeometry Rect="0 0 200 200" />
           <RectangleGeometry Rect="100 100 200 200" />
        </GeometryCollection>
       -->
     </Video.Clip>
  </Video>

  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.

   
  

  4,264 Views

• Design Eye for the Dev Guy

  Posted by ndunlap to Nathan Dunlap on Dec 08 2003, 07:15 PM

  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).

   

   
  

  2,634 Views