Try it: Create a reflection of an object on the artboard

You can use the transform and gradient tools in Microsoft Expression Blend to create the impression of a reflection of an object on the artboard.

To create a reflection of an image on the artboard

In order to create a reflection of an image on the artboard, you first add an image to your project. You then create a container for your images and adjust the height, width, and placement of the container to create a mirror image. After you have created the container and added the images, you can apply transforms and gradients to create the impression of a reflection of the image.

Reflection of an object on the artboard

To add an image to the project

  1. On the Project menu, click Add Existing Item.

  2. In the Add Existing Item dialog box, locate the image that you want to add, and then click Open.

    You may receive a message warning you that your image is larger than 250 KB, and recommend that you embed the image. If you receive this message, click Yes.

    Tip

    For this example, use an image from the Sample Pictures folder.

The image is added to the Projects panel.

To create the mirror image

  1. Add a StackPanel control to the artboard. On the Assets panel, click Panels, and then double-click StackPanel. Confirm that you are using a vertical StackPanel control by selecting StackPanel in the Objects and Timeline panel, and then locating Orientation in the Layout category in the Properties panel. The Orientation value should be set to Vertical.

    Tip

    You can create a reflection by using many different types of controls. A StackPanel control helps by allowing you to "stack" objects and making it easier to align objects and move a collection of objects by using a single control.

  2. With the StackPanel selected in the Objects and Timeline panel, right-click the image file in the Projects panel and then click Insert.

  3. Adjust the size of the image by modifying the Height and Width in the Layout category of the Properties panel. For this example, the Height is 200 and the Width is 267.

    Tip

    You can also scale the image. In the Transform category of the Properties panel, click Scale, and then enter the values that you want for X and for Y. Use the same values for both X and Y to maintain the aspect ratio.

  4. Adjust the height and width of the StackPanel by selecting StackPanel in the Objects and Timeline panel, and then modifying the Height and Width in the Layout category of the Properties panel. The width should be the same width as the image width that you selected. The height should be twice the height of the image height that you selected, as two images will be used to create the reflection. For this example, the Height is 400 and the Width is 267.

    Insert image

  5. Insert a second instance of the same image by repeating step 2. Because you are using a vertical StackPanel control, the image is appears below the first image. Adjust the height by clicking Set to Auto Hh134794.aa9ec064-22f8-4b62-9eed-3f4772362d22(en-us,Expression.40).png to the right of Height in the Layout category of the Properties panel.

    Insert second image

  6. Click StackPanel in the Objects and Timeline panel and drag the StackPanel to the middle of the artboard.

  7. With the second image (the bottom image in the StackPanel) selected in the Objects and Timeline panel, in the Transform category of the Properties panel, click Flip Y Axis on the Flip Hh134794.2ba85702-e92f-4341-9497-9c9fb8af9c75(en-us,Expression.40).png tab.

    Flip image on Y axis

Now that the impression of a mirror image has been created, you can adjust the opacity, apply gradients, and transform the image to create the impression of a reflection.

To create the reflection

  1. With the second image (the bottom image in the StackPanel) selected in the Objects and Timeline panel, in the Brushes category, click Gradient brush, and then click OpacityMask.

  2. In the color editor, click the left gradient stop, and type 0 in the Alpha channel text box.

    Alpha channel 0%

    Tip

    You can also click and drag the value inside the Alpha channel text box.

  3. Slide the left gradient stop to adjust the opacity, or type a value into the Selected gradient stop offset text box. For this example, type 20 into the Selected gradient stop offset text box.

  4. In the color editor, click the right gradient stop, and then type 70 in the Alpha channel text box.

  5. With the second image (the bottom image in the StackPanel) selected in the Objects and Timeline panel, hover the pointer over the image handle until the Skew pointer Hh134794.2be41f49-8a61-4966-bf08-598f4253b610(en-us,Expression.40).png appears. Click and drag the handle until the image appears the way that you want it.

    Skew reflection

    Tip

    The Skew pointer corresponds to the Skew tab on the RelativeTransform box in the Properties panel.

  6. Hover the pointer over the image handle until the Scale pointer Hh134794.7d350cd4-6d4f-40bc-9d04-d46d2d54ebee(en-us,Expression.40).png appears. Click and drag the handle until the image appears the way that you want it.

    Scale reflection

    Tip

    The Scale pointer corresponds to the Scale tab on the RelativeTransform box in the Properties panel.

  7. Press F5 to build and run your project.

    Reflection of an image on the artboard

The image and its reflection appear.

You can use similar methods to create reflections of a wide variety of controls in Expression Blend.

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.