Image Reflection in Windows Store App

Introduction

Today we will talk about the reflection effect in a Metro style application. This effect is implemented with the Render Transform and Transform Group tags in XAML pages applied on the target control where you want to have the effect. Here we will show this effect on an image; to do this we will use two rectangles for image containers and apply the transformation to them.

In the following we are including the entire code of the XAML file and the code behind file to create this mini application. 

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how you will create it.

• Open Visual Studio 2012
• File -> New -> Project
• Choose Template -> Visual C# ->Metro Style Application
• Rename the application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the MainPage.xaml and MainPage.xaml.cs files.

Step 3 : The MainPage.xaml file is as in the following code:

Code :

<Page

    x:Class="App1.MainPage"

    IsTabStop="false"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:App5"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Page.Resources>

        <BitmapImage x:Key="bi" UriSource="ims.jpg"/>

    </Page.Resources>

    <Grid Background="Beige" >

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="442*"></ColumnDefinition>

            <ColumnDefinition Width="469*"></ColumnDefinition>

            <ColumnDefinition Width="455*"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height=".033*"></RowDefinition>

            <RowDefinition Height=".333*"></RowDefinition>

        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0" Text="Image Reflection in Metro Apps"

                   Foreground="Red" FontSize="30" FontWeight="ExtraBold"

                   HorizontalAlignment="Center"  VerticalAlignment="Bottom"

                   Grid.ColumnSpan="2" Margin="430,0,10,0" Width="471"/>

        <Canvas Margin="47,54,413,0" RenderTransformOrigin="0.5,0.5"

                Grid.Column="1" Grid.Row="1" UseLayoutRounding="False"

                d:LayoutRounding="Auto">

        <Canvas.RenderTransform>

            <CompositeTransform Rotation="0.35"/>

        </Canvas.RenderTransform>

        <Rectangle x:Name="myrect" Canvas.Left="-47" Canvas.Top="-38"

                   Width="446" Height="229">

            <Rectangle.Fill>

                <ImageBrush ImageSource="{StaticResource bi}"/>

            </Rectangle.Fill>

        </Rectangle>

        <Rectangle Canvas.Left="-47" Canvas.Top="418" Width="445"

                   Height="227" Opacity=".8">

            <Rectangle.Fill>

                <ImageBrush ImageSource="{StaticResource bi}"/>

            </Rectangle.Fill>

            <Rectangle.RenderTransform>

                <TransformGroup>

                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleY="-1"/>

                </TransformGroup>

            </Rectangle.RenderTransform>

        </Rectangle>

    </Canvas>

</Grid>

</Page>

 

Step 4 : After running this code the output looks like this: