时间戳

首页 > 解决方案 > RenderTransformOrigin 不起作用。UWP

c# - RenderTransformOrigin 不起作用。UWP

问题描述

我有一个问题，我不明白如何解决它。我有一个 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;
    }
}

感谢关注。

标签： c#.net.net-coreuwpuwp-xaml

解决方案

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通过(not 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不变​​，建议将其移出。

此致。

推荐阅读