« Graphic Design and .NET Framework 3.0 Apps Part 1: Code in the Designer | Main | Map of the Internet - 2006 »

Graphic Design and .NET Framework 3.0 Apps Part 2: Rich Graphic Design

This is the second post in a series on graphic design with Microsoft’s Expression Blend and Visual C# Express Edition. In my previous post, I talked about the rich integration between Microsoft’s Expression Blend and Microsoft Visual C# Express. I showed how you can code up a collection of Points and databind that to a graphical object and have that object appear in the Blend design environment.

In this post, I’ll explore some of the fun that’s to be had by playing around in Blend and realizing those rich graphics changes in your C# project.

If you recall, we started off with a simple spiral; part of the source code found in Petzold’s Applications = Code + Markup: A Guide to the Microsoft Windows Presentation Foundation.

Spiral0

I could tweak the XAML file by hand, say to thicken the stroke, like so:

<Grid>
    <Canvas x:Name="_canvas" HorizontalAlignment="Center" VerticalAlignment="Center">
        <src:SpiralData x:Name="data1"/>
        <Polyline x:Name="_poly" Stroke="Black" StrokeThickness="5" Points="{Binding ElementName=data1, Path=Points}"/>
    </Canvas>
</Grid>

Spiral0a

While this is completely possible, there is a better way. You can use Blend’s rich design tools to brighten up the spiral. First, I can load in my C# project into the Blend editor. Interestingly enough, I get to see the extent of the spiral beyond the edges of the window.

Spiral1

I can now click on the spiral in the visual tree to select it. Interestingly, I could not easily select it in the editor. In any case, I can select the StrokeThickness property and change it to 5:

SpiralTools1

Yielding this design-time view:

Spiral2

It gets better. How about I play around with some of the gradient settings. I save my changes and “run” the project as a regular .NET Framework 3.0 app:

Spiral3

Here I am having some more fun:

Spiral4

Nice dropshadow. That’s a trivial effect, by the way, and I have full control over the degree of blurring, the opacity, and the distance the shadow is from the object.

Spiral5

Dizzy yet? What’s even better is that the XAML generated by Blend is almost exactly what I would have done myself if I had memorized all of the property and effect names. It’s ultra-clean XAML:

<Grid>
     <Grid.Background>
      <RadialGradientBrush>
       <GradientStop Color="#FF3F4AB9" Offset="0"/>
       <GradientStop Color="#FFFFFFFF" Offset="0.774"/>
      </RadialGradientBrush>
     </Grid.Background>
  <Canvas x:Name="_canvas" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FF000000">
   <src:SpiralData x:Name="data1"/>
   <Polyline x:Name="_poly" Points="{Binding ElementName=data1, Path=Points}" RenderTransformOrigin="0.5,0.5" Fill="{x:Null}" StrokeThickness="12" Canvas.Left="-62" Canvas.Top="-61" TextElement.Foreground="{x:Null}">
    <Polyline.BitmapEffectInput>
     <BitmapEffectInput/>
    </Polyline.BitmapEffectInput>
    <Polyline.RenderTransform>
     <TransformGroup>
      <ScaleTransform ScaleX="0.55" ScaleY="0.55"/>
      <SkewTransform AngleX="0" AngleY="0"/>
      <RotateTransform Angle="0"/>
      <TranslateTransform X="0" Y="0"/>
     </TransformGroup>
    </Polyline.RenderTransform>
    <Polyline.Stroke>
     <RadialGradientBrush>
      <GradientStop Color="#FF001392" Offset="0"/>
      <GradientStop Color="#FFFFFFFF" Offset="0.928"/>
     </RadialGradientBrush>
    </Polyline.Stroke>
   </Polyline>
  </Canvas>
</Grid>

In my next post, I’ll play around with creating a “timeline” in Blend and activating it with a mouse click. This will realize a designer’s vision for how something should bounce around the screen, but allow the programmer the ability to activate it via application code. 

TrackBack

TrackBack URL for this entry:
http://www.primordia.com/blog/mt-tb.cgi/681