方法 Rotate 在 UWP 中无法正常工作答案

【问题标题】：Method Rotate doesn't work correct in UWP方法 Rotate 在 UWP 中无法正常工作
【发布时间】：2020-12-11 23:24:48
【问题描述】：

我正在使用 Rotate from 方法

using Microsoft.Toolkit.Uwp.UI.Animations;

旋转 UIElement

但是这种方法不能正常工作。旋转元素，但改变高度和宽度。我的xml代码：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Button Click="Button_Click" 
            Content="Click"
            VerticalAlignment="Center"
            HorizontalAlignment="Center"/>
    <ScrollViewer Height="150" 
                  Width="200" 
                  Grid.Row="1"
                  VerticalScrollBarVisibility="Auto"
                  HorizontalScrollBarVisibility="Auto">
        <Image x:Name="myImage" 
            Source="/Images/TestImage.png" />
    </ScrollViewer>

</Grid>

转法：

int Pos = 0;

    private async void Button_Click(object sender, RoutedEventArgs e)
    {
        Pos = --Pos;

        await myImage.Rotate(duration: 0, delay: 1, 
            centerX: (float)myImage.ActualWidth / 2,
                centerY: (float)myImage.ActualHeight / 2,
                value: Pos * 90).StartAsync();
    }

UIElement 的一部分没有显示（剪辑），因此无法滚动整个元素。

如何旋转元素以改变其尺寸？

【问题讨论】：

标签： c# xaml uwp

【解决方案1】：

如果将图像放入ScrollViewer 控件中，则图像将不会完全显示，因为ScrollViewer 中有足够的内部空间。并且ScrollViewer的Height和Width属性已经设置，旋转后图像的实际大小不会超过ScrollViewer的Height和Width属性。因此，旋转时图像的尺寸不会改变。

如果要旋转图片使其尺寸发生变化，请不要使用ScrollViewer，直接设置图片的Height和Width属性，如下所示：

<Image x:Name="myImage"  Height="150" Width="200" Grid.Row="1" Source="Assets/TestImage.png" Stretch="Uniform"/>

【讨论】：

事实是在ScrollViewer中我有一个用户可以增减的元素，我需要ScrollViewer这样用户才能滚动对象
ScrollViewer.Content（这里是图像）的大小是在ScrollViewer 控件加载图像后确定的。当您旋转图像时，由于旋转图像的宽度超过了ScrollViewer.Content 的高度，部分图像将被剪裁。您可以尝试旋转ScrollViewer 控件而不是旋转图像。或者，您可以将图像的Width 属性和Height 属性的值设置为相同。

【解决方案2】：

我只找到了一种方法来解决这个问题，那就是放一个网格塞。

    <ScrollViewer Height="150" 
                  Width="200" 
                  x:Name="myScrollViewer"
                  Grid.Column="0"
                  VerticalScrollBarVisibility="Auto"
                  HorizontalScrollBarVisibility="Auto">
            <StackPanel x:Name="mainContext" Orientation="Vertical">
                <Grid x:Name="BungTop" Visibility="Collapsed" Height="100" Width="100" />
                <Image x:Name="myImage" 
                        Source="/Images/TestImage.png" />
                <Grid x:Name="BungBotton" Visibility="Collapsed" Height="100" Width="100"/>
            </StackPanel>
     </ScrollViewer>

他们可以打开或关闭可见性，或调整大小。

【讨论】：