Generate an inverted (mirror image) of an image in wp8

Question

I've to generate a mirror image of an image in window phone 8 using c#. What I was tried till now is here. My Xaml code:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
        <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Button Name="submit" Grid.Row="0" Content="Select an Image" Tap="submit_Tap"/>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Name="mainImage" Stretch="Fill" Grid.Column="0" Height="500" Width="200"/>
            <Image Name="InvertedImage" Stretch="Fill" Grid.Column="1" Height="500" Width="200"/>
        </Grid>
        <Button Name="mirrorImage" Grid.Row="2" Content="Create Mirror Image" Tap="mirrorImage_Tap"/>
    </Grid>

`

And my c# code:

private void submit_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    PhotoChooserTask task = new PhotoChooserTask();
    task.Completed+=new EventHandler<PhotoResult>(task_Completed);
    task.Show();
}
BitmapImage mainImageSource = new BitmapImage();
private void task_Completed(object sender, PhotoResult e)
{
    if (e.TaskResult == TaskResult.OK)
    {
        mainImageSource.SetSource(e.ChosenPhoto);
        mainImage.Source = mainImageSource;
    }
}

private void mirrorImage_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    InvertedImage.Source = mainImageSource;
}
}

In the mirrorImage_Tap. I've to set inverted image in source of InvertedImage. Help is appreciated.

Answer 1

Try the below code

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image Name="mainImage" Stretch="Fill" Grid.Column="0" Height="500" Width="200"/>
        <Image Name="InvertedImage" Stretch="Fill" Grid.Column="1" RenderTransformOrigin="0.5,0.5"Height="500" Width="200">
        <Image.RenderTransform>
                <CompositeTransform ScaleX="-1"/>
            </Image.RenderTransform>
        </Image>
    </Grid>

I think <CompositeTransform ScaleX="-1"/> on image will do the job for you.