January 2004 - Posts

Creating Shapes with CombineMode

Posted by ndunlap to Nathan Dunlap on Jan 29 2004, 06:41 PM

Filed under: Vectors

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:

<Path Fill="#6699CC" Stroke="Black" StrokeThickness="2" DockPanel.Dock="top" >
    <Path.Data>
       <GeometryCollection CombineMode="Xor">
         <RectangleGeometry Rect="0 0 50 50" />
         <RectangleGeometry Rect="25 25 50 50" />
       </GeometryCollection>
     </Path.Data>
   </Path>

Here is a snapshot for a visual reference:

2,747 Views

GelButton Article and using DockPanel with Margin

Posted by ndunlap to Nathan Dunlap on Jan 22 2004, 09:22 PM

Filed under: Styles, Layout

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>

5,882 Views
Creating dropshadow text in Avalon using ImageEffectBlur

Posted by ndunlap to Nathan Dunlap on Jan 21 2004, 02:10 AM

Filed under: Styles

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.

<Style def:Name=“DropShadowText“>
   <Button />
        <Style.VisualTree>
            <Canvas>

                <ContentPresenter def:StyleId=“DropShadow“ Canvas.Top=“1“ Canvas.Top=“1“
                 ContentControl.Content="*Alias(Target = Content)"
                 ContentControl.ContentStyle="{DropShadowContentStyle}" />

                <ContentPresenter def:StyleId=“DropShadow“
                 ContentControl.Content="*Alias(Target = Content)"
                 ContentControl.ContentStyle="{WhiteTextContentStyle}" />
            </Canvas>
        </Style.VisualTree>
</Style>

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

7,605 Views