RenderTransformOrigin 不起作用。UWP

Question

I have a problem that I don't understand how to solve it. I have a UWP application. In the XAML there is a Grid that has RenderTransformOrigin. But what value I would give it doesn't matter when I change the width of the grid the width is calculated from the center.

This is the XAML

<Page
x:Class="TestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Background="White">

    <Grid Background="Red" x:Name="image" RenderTransformOrigin="0,0">
        <Grid.RenderTransform>
            <CompositeTransform />
        </Grid.RenderTransform>
        <Border x:Name="LeftScale" Width="50" Height="50" Background="Black" HorizontalAlignment="Left" VerticalAlignment="Center" ManipulationDelta="LeftScale_ManipulationDelta" ManipulationMode="TranslateX,TranslateY" />

    </Grid>

</Grid>

And the C#

public sealed partial class MainPage : Page
{
    public Point Origin { get; set; }
    public MainPage()
    {
        this.InitializeComponent();
        image.Width = 500;
        image.Height = 500;
    }

    private void LeftScale_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        Origin = new Point(1, 0.5);
        image.RenderTransformOrigin = Origin;
        image.Width -= e.Delta.Translation.X;
    }
}

Thanks for attention.

Answer 1

RenderTransformOrigin is suitable for transformation. This transformation needs to be completed by the CompositeTransform you define. It cannot be changed by changing the Width property.

You can rewrite the code and try this:

Page.xaml

<StackPanel>
    <Grid Background="Red" x:Name="image" RenderTransformOrigin="0,0" HorizontalAlignment="Center">
        <Grid.RenderTransform>
            <CompositeTransform x:Name="imageCompositeTransform"/>
        </Grid.RenderTransform>
    </Grid>
    <Slider Maximum="500" 
            HorizontalAlignment="Center"
            Width="500" 
            Margin="0,30,0,0" 
            ValueChanged="Slider_ValueChanged"/>
</StackPanel>

Page.xaml.cs

public Point Origin { get; set; }
public MainPage()
{
    this.InitializeComponent();
    image.Width = 500;
    image.Height = 500;
}

private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    Origin = new Point(1, 0.5);
    image.RenderTransformOrigin = Origin;
    var proportion = e.NewValue / image.Width;
    imageCompositeTransform.ScaleX = 1 - proportion;
}

Transform the width of the control through ScaleX (not Width ) so that RenderTransformOrigin can take effect.

---

Update

If you wish to do the width transformation of the Grid through your original code, here is the method:

private double moveX = 0;

private void LeftScale_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    moveX -= e.Delta.Translation.X;
    var proportion = moveX / image.Width;
    imageCompositeTransform.ScaleX = 1 - proportion;
}

However, because your Rectangle is inside the Grid , the width of the Rectangle will also change when the Grid width is transformed. If you want to keep the size of the Rectangle unchanged, it is recommended to move it out.

Best regards.