Clouds using Expression Design with Expression Blend & XAML for WP7!


Ever want to make clouds and then use them in your phone app?  Here is a quick way to use Expression Design (or a similar tool you know how to use) to make clouds.  We will then change the clouds into a Usercontrol and then use it in Blend.  Once the code is in Blend, then a quick examination of the XAML. Finally we will run it on the WP7 Emulator!
Let’s get started!
In Expression Design

Expression Design image




Not Expression Blendimage

Select the New Menu and then New document.  Make the canvas small, maybe 100 width by 100 height
image
 image
Add ellipses to the canvas make it look like the image to the right, but do a better job, mine is kind of ugly.

image 		image
Now we want to do a quick process to do the conversion.

You can press the “v” key, make sure you have the selection cursor (the black arrow) on and select all of the ellipses that you created.

You should see the guide marks like the image to right
image		 image
Now export your beautiful Cloud

Right click on the image and select Export
image 		image
Now open Expression Blend:
image
Select New Project and then keep it at Windows Phone Application.
Give it a name, then select OK 		image
Now add your cloud you created in Expression Design, I called mine cloud.png

So you will need to add existing item

Right click on your project (you could have more than one) and select
Add Existing Item 		image
Now make your cloud into a usercontrol (you can use it as a PNG, but if it is a usercontrol it won’t pixelate).
Double click the cloud and it will appear in the Objects and Timeline

image
Give your usercontrol a name, it can’t be the same as the image, so the practice is to use the letters “uc” in front of the image name.

For instance I will use:

ucControl 		image
Now you have a UserControl named ucCloud.xaml and a code behind named ucCloud.xaml.cs

image
Next you will need to rebuild the program so that the ucCloud will show up under Assets. image
Under the Assets tab you should see the Usercontrol ucCloud (if you named it that)

Now you can drag it over to the phone app 		image
Add some clouds (and I changed the TitlePanel and PageTitle to Cloud)

Just changing sizes, etc. will make your clouds look random.		 image
Let’s look at the related xaml on the phone.

Your code may look different (hopefully)
Note that the Canvas.Left and Canvas.Top shows us the location of the top part of the UserControl image.

Height and Width are used to define the rectangle that holds the image. 		Canvas x:Name="ContentPanel" Margin="12,0,12,0" Grid.Row="1" >
            <local:ucCloud Height="84" Canvas.Left="51" Canvas.Top="62" Width="152"/>
            <local:ucCloud Height="47" Canvas.Left="271" Canvas.Top="32" Width="55"/>
            <local:ucCloud Height="35" Canvas.Left="262" Canvas.Top="111" Width="64"/>
            <local:ucCloud Height="50" Canvas.Left="367" Canvas.Top="62" Width="48"/>
            <local:ucCloud Height="41" Canvas.Left="164" Canvas.Top="17" Width="66"/>
        </Canvas>
This user control is simpler, the source for the image and whether or not it stretches to fill the rectangle <Grid x:Name="LayoutRoot" Background="Transparent">
        <Image Source="Cloud.png" Stretch="Fill"/>
    </Grid>
Well that It’s, we have covered how to use Expression Design, Use Expression Blend to make a user control (previously we used Expression Design) and then discussed the XAML that was generated.  No C# code was generated or written.

Take a look at my other blogs:
Finally take a look at my colleagues blogs!

Comments

Post a Comment