RenderTransformOrigin 不起作用。UWP

Question

我有一个问题，我不知道如何解决。我有一个 UWP 应用程序。在 XAML 中有一个具有 RenderTransformOrigin 的网格。但是当我改变网格的宽度时，我会给它什么值并不重要，宽度是从中心计算出来的。

这是 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>

还有 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;
    }
}

感谢关注。

Answer 1

RenderTransformOrigin 适合转换。此转换需要由您定义的CompositeTransform 完成。它不能通过更改Width 属性来更改。

你可以重写代码试试这个：

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;
}

通过ScaleX（不是Width）变换控件的宽度，使RenderTransformOrigin生效。

---

更新

如果你想通过你的原始代码做Grid的宽度变换，方法如下：

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;
}

但是，由于您的Rectangle 在Grid 内，所以Rectangle 的宽度也会在Grid 宽度发生变化时发生变化。如果要保持Rectangle的大小不变，建议移出。

最好的问候。