Expression Blend

When WPF - the new .net technology- arrived, Microsoft try to provide some tools makes life easy to WPF Developers, one of this tools was Expression Blend, we will try to show some features about it in this topic.

Try to download it form Microsoft web site, then run it and choose new Project - WPF Application (*.exe):

You can now choose your name, folder and .net language you want.

Click View-Active Document View then click split view to show both code and design view:

In the left side, you will find all tools you need for your design including painting tools such as brushs and pens. You can find also .net components such as commandbuttons. You can also click the link to more item to show all tools:

While you are painting, you will find additional properties for each tool in the right side:

Example:

Add new <canvas>, this will the container of our picture for this example:

<Canvas> <Canvas x:Name="MainImageCanvas" Canvas.Left="40" Canvas.Top="120">

Add new MediaElement to add a picture:

<MediaElement x:Name="MainImage" Source="c:/example/futex.jpg" Width="300" Height="300" ></MediaElement>

Now we will apply some effects through properties, this is an example of code results from some operations:

<Canvas.RenderTransform><TransformGroup> <SkewTransform x:Name="MainSkewTransform" AngleY="-19" AngleX="0" CenterX="0" CenterY="0"/> <ScaleTransform x:Name="MainScaleTransform" ScaleY="1" ScaleX = "1" CenterX="0" CenterY="0"/></TransformGroup> </Canvas.RenderTransform></Canvas>

Press F5 now, this is a snap shot of expected results:

Now we will try to apply some shadow to the picture, so we will add <canvas> for a new picture object refer to the same file with new transformation parameters to make the second picture seems to be a shadow:

<Canvas x:Name="ReflectionImageCanvas" Canvas.Left="260" Canvas.Top="640"> <MediaElement x:Name="ReflImage" Source="c:/example/futex.jpg" Width="300" Height="300" Volume="0"> </MediaElement> <Canvas.RenderTransform> <TransformGroup> <SkewTransform x:Name="ReflectionSkewTransform" AngleY="19" AngleX="-41" CenterX="0" CenterY="0" /> <ScaleTransform x:Name="ReflectionScaleTransform" ScaleY="-1" ScaleX="1" CenterX="0" CenterY="0" /> </TransformGroup> </Canvas.RenderTransform> </Canvas>

Previous Code Result:

Last topic in this lesson is to add some transparent to the shadow of picture through opacity property, the result XAML maybe like that:

<Canvas x:Name="ReflectionImageCanvas" Canvas.Left="260" Canvas.Top="640"> <MediaElement x:Name="ReflImage" Source="c:/example/futex.jpg" Width="300" Height="300" Volume="0"> </MediaElement> <Canvas.RenderTransform> <TransformGroup> <SkewTransform x:Name="ReflectionSkewTransform" AngleY="19" AngleX="-41" CenterX="0" CenterY="0" /> <ScaleTransform x:Name="ReflectionScaleTransform" ScaleY="-1" ScaleX="1" CenterX="0" CenterY="0" /> </TransformGroup> </Canvas.RenderTransform> <Canvas.OpacityMask> <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0"> <GradientStop Offset="0.345" Color="#00000000" x:Name="ReflGradientStop1" /> <GradientStop Offset="1.0" Color="#CC000000" x:Name="ReflGradientStop2" /> </LinearGradientBrush> </Canvas.OpacityMask> </Canvas>

Now, you have to try to edit the position of shadow by changing top and left manually, the result must be something like that:

Full XAML Code:

<Canvas> <Canvas x:Name="MainImageCanvas" Canvas.Left="40" Canvas.Top="120"> <MediaElement x:Name="MainImage" Source="c:/example/FUTEX.JPG" Width="300" Height="300" > </MediaElement> <Canvas.RenderTransform> <TransformGroup> <SkewTransform x:Name="MainSkewTransform" AngleY="-19" AngleX="0" CenterX="0" CenterY="0"/> <ScaleTransform x:Name="MainScaleTransform" ScaleY="1" ScaleX = "1" CenterX="0" CenterY="0"/> </TransformGroup> </Canvas.RenderTransform> </Canvas> <Canvas x:Name="ReflectionImageCanvas" Canvas.Left="267" Canvas.Top="645"> <MediaElement x:Name="ReflImage" Source="c:/example/futex.jpg" Width="300" Height="300" Volume="0"> </MediaElement> <Canvas.RenderTransform> <TransformGroup> <SkewTransform x:Name="ReflectionSkewTransform" AngleY="19" AngleX="-41" CenterX="0" CenterY="0" /> <ScaleTransform x:Name="ReflectionScaleTransform" ScaleY="-1" ScaleX="1" CenterX="0" CenterY="0" /> </TransformGroup> </Canvas.RenderTransform> <Canvas.OpacityMask> <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0"> <GradientStop Offset="0.345" Color="#00000000" x:Name="ReflGradientStop1" /> <GradientStop Offset="1.0" Color="#CC000000" x:Name="ReflGradientStop2" /> </LinearGradientBrush> </Canvas.OpacityMask> </Canvas> </Canvas>

Don't forget that MediaElement can accept any type of media, try to attach video and see the result.

Anyway, you can copy this XAML code to a WPF .net solution and the same result will apply to your form.