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的大小不變，建議將其移出。

此致。