Click button to reset default position for Transformed Image

Question

Hi, I loaded an image and the default alignment is "center". After that I drag the image around the screen. Then I need a button to reset the image position to default position which is "center". How to I do that? Thanks 

Answer 1

Typically you would drag the image around by updating the UIElement's RenderTransform.

To undo that, set the transform back to its original value. For example, if you used a TranslateTransform set its X and Y properties to 0.

See Using manipulation events for sample code to drag a rectangle around.

--Rob

Answer 2

Here is my XAML sample code:

<Image x:Name="photo" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" ManipulationMode="All" Width="960" Height="680">
      <Image.RenderTransform>
           <CompositeTransform/>
      </Image.RenderTransform>
</Image>

<Button x:Name="btn_load" Content="Load" FontSize="20" Width="130" Height="40" HorizontalAlignment="Center"/>
<Button x:Name="btn_clear" Content="Clear" FontSize="20" Width="130" Height="40" HorizontalAlignment="Center"/>

Here is my C#:

 public sealed partial class MainPage : Page
    {
        private CompositeTransform compositeTranslation;
        private Windows.Foundation.Collections.IPropertySet appSettings;
        StorageFile file;

        public MainPage()
        {
            this.InitializeComponent();
            btn_load.Click += btn_load_Click;
            appSettings = ApplicationData.Current.LocalSettings.Values;
            photo.ManipulationDelta += Composite_ManipulationDelta;
            compositeTranslation = new CompositeTransform();
            photo.RenderTransform = this.compositeTranslation;
        }

 void Composite_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            // scale the rectangle.
            compositeTranslation.CenterX = photo.ActualWidth / 2;
            compositeTranslation.CenterY = photo.ActualHeight / 2;
            compositeTranslation.ScaleX *= e.Delta.Scale;
            compositeTranslation.ScaleY *= e.Delta.Scale;
            compositeTranslation.Rotation += e.Delta.Rotation;            compositeTranslation.TranslateX += e.Delta.Translation.X;
            compositeTranslation.TranslateY += e.Delta.Translation.Y;
        }

async void btn_load_Click(object sender, RoutedEventArgs e)
        {
            FileOpenPicker fileOpenPicker = new FileOpenPicker();
            fileOpenPicker.ViewMode = PickerViewMode.Thumbnail;
            fileOpenPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
            fileOpenPicker.FileTypeFilter.Add(".jpg");
            fileOpenPicker.FileTypeFilter.Add(".jpeg");
            fileOpenPicker.FileTypeFilter.Add(".png");
            fileOpenPicker.FileTypeFilter.Add(".bmp");
            file = await fileOpenPicker.PickSingleFileAsync();

            if (file != null)
            {
                var fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);

                BitmapImage bmp = new BitmapImage();
                bmp.SetSource(fileStream);
                photo.Source = bmp;
                //scroll.Visibility = Visibility.Visible;
                img.Visibility = Visibility.Collapsed;
            }
        }

private void btn_clear_Click(object sender, RoutedEventArgs e)
{
      img.Visibility = Visibility.Visible;
      photo.Source = null;
      appSettings.Remove(photoKey);       
}

private async void btnCrop_Click(object sender, RoutedEventArgs e)
{

}

What should I code in the btnCrop_Click event handle? Thanks

Answer 3

Set everything in the compositeTransform back to neutral:

compositeTranslation.ScaleX = 1.0;
compositeTranslation.ScaleY = 1.0;
compositeTranslation.Rotation = 0;
compositeTranslation.TranslateX =0;
compositeTranslation.TranslateY =0;'

--Rob

Answer 4

Hi, Thanks for your reply, but it doesn't work. When I load a new image, still displayed transformed.

Answer 5

If you update the image's transform to neutral then it will undo the transform. If that's not happening then you're probably updating the wrong transform. It's not clear from your description what you are doing, so I cannot provide further advice.

--Rob