UWP - вращение изображения с выравниванием по сетке, используя только XAML - PullRequest
Новая
       37

UWP - вращение изображения с выравниванием по сетке, используя только XAML

0 голосов
/ 06 ноября 2018

Используя Windows Template Studio , я создал (в основном, автоматически сгенерированный) пример приложения UWP, которое показывает несколько изображений в GridView.

Для их поворота я использовал следующий блок xaml - note RenderTransform, который я добавил, и комментарии в этой области: 

<Grid x:Name="ContentArea">
    <GridView
        x:Name="ImagesGridView"
        ItemsSource="{x:Bind Source}"
        IsItemClickEnabled="True"
        Padding="{StaticResource MediumLeftRightMargin}"
        SelectionMode="None">
        <GridView.ItemTemplate>
            <DataTemplate x:DataType="models:SampleImage">
                <Image
                    x:Name="galleryImage"
                    Style="{StaticResource ThumbnailImageStyle}"
                    Source="{x:Bind Source}"
                    AutomationProperties.Name="{x:Bind Name}"
                    ToolTipService.ToolTip="{x:Bind Name}">
                    <Image.RenderTransform> <!-- That's the part which I've added, on top of the auto-generated xaml -->
                        <RotateTransform Angle="90" CenterX="114" CenterY="114" /> <!-- because the ThumbnailImageStyle defines width and height as 228 -->
                    </Image.RenderTransform>
                </Image>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>

Так что это работало нормально - пока я не попробовал не квадратные фотографии. На этом этапе результатом было то, что само изображение иногда показывалось за пределами контейнера в сетке:

note the first two images' locations, compared to where their grid item container actually is

Я пробовал:

  • Использовать разные значения для полей CenterX и CenterY (в соответствии с размером элемента сетки, в соответствии с исходным размером изображения или просто "0.5, 0.5" ), но это не решило случай.
  • Для использования Image.LayoutTransform (, как предлагается здесь ), но, похоже, он недоступен в универсальном приложении (или, может быть, мне не хватает какой-либо ссылки?).
  • Заметил, что когда я нажимаю на проблемные изображения, они внезапно возвращаются в свое ожидаемое место в сетке (и иногда вращение исчезает, поэтому оно возвращается к исходному изображению).

В конце концов, я решил это, повернув изображение в коде позади ( как здесь ), прежде чем добавить его в связанный источник GridView - но не должно быть правильного способа достичь что просто с помощью самого xaml?

1 Ответ

0 голосов
/ 07 ноября 2018

Так что это работало нормально - пока я не попробовал не квадратные фотографии. На этом этапе результатом было то, что само изображение иногда показывалось вне его контейнера в сетке:

Если вы хотите, изображение будет вращаться с центром и не будет отображаться снаружи GridView. Вы можете установить RenderTransformOrigin свойство. 

<Image Width="100" Height="100" RenderTransformOrigin="0.5,0.5"
Source="{Binding}">
    <Image.RenderTransform>
        <!-- That's the part which I've added, on top of the auto-generated xaml -->
        <RotateTransform Angle="90" />
        <!-- because the ThumbnailImageStyle defines width and height as 228 -->
    </Image.RenderTransform>
</Image>

enter image description here

Обновление Когда щелкнул элемент GridView, статуэтка Pressed visual по умолчанию будет преобразовывать содержимое gridview. В настоящее время существует обходной путь, который использует стиль GridViewItemExpanded. 

<GridView ItemContainerStyle="{StaticResource GridViewItemExpanded}"
...