Блог

Главная - Вопросы по программированию - Метод Rotate не работает корректно в UWP

Метод Rotate не работает корректно в UWP

#c# #xaml #uwp

#c# #xaml #uwp

Вопрос:

Я использую метод Rotate из

 using Microsoft.Toolkit.Uwp.UI.Animations;

Для поворота UIElement

Но этот метод работает не так, как должен. Поворачивает элемент, но изменяет высоту и ширину. Мой код xaml:

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

И часть пользовательского элемента не отображается (обрезается), и из-за этого невозможно выполнить прокрутку по всему элементу.

Нормальное положение

VerticalScroll

Как вы можете повернуть элемент так, чтобы его размеры изменились?

Ответ №1:

Если вы поместите изображение в ScrollViewer элемент управления, изображение не будет показано полностью, потому что в a достаточно внутреннего пространства ScrollViewer . Height И Width свойство ScrollViewer and уже установлено, фактический размер повернутого изображения не будет превышать свойство Height and Width ScrollViewer . Следовательно, размеры изображения не изменятся при его повороте.

Если вы хотите повернуть изображение так, чтобы его размеры менялись, пожалуйста, не используйте ScrollViewer , установите свойство Height and Width изображения напрямую, вот так:

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

Комментарии:

1. Дело в том, что в ScrollViewer у меня есть элемент, который пользователь может увеличивать и уменьшать, и мне нужен ScrollViewer, чтобы пользователь мог прокручивать объект

2. Размер 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>

Они могут включать или выключать видимость или изменять размер.