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属性来更改。

您可以重写代码并尝试以下操作：

页面.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>

页面.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 ）变换控件的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内部，所以当Grid宽度转换时， Rectangle的宽度也会发生变化。 如果要保持Rectangle的大小不变，建议将其移出。

此致。