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

2

Используя 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 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>

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

Изображение 174551

Я пробовал:

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

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

  • 0
    Windows Community Toolkit имеет альтернативный элемент управления LayoutTransform, описанный здесь
Теги:
uwp
uwp-xaml
win-universal-app

1 ответ

2
Лучший ответ

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

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

<Image Width="100" Height="100" RenderTransformOrigin="0.5,0.5"
Source="{Binding}">
    <Image.RenderTransform>
        <!-- That 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>

Изображение 174551

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

<GridView ItemContainerStyle="{StaticResource GridViewItemExpanded}"
  • 0
    С другой стороны, это не полностью решает мою проблему ... потому что, когда я нажимаю на изображения, они возвращаются к своей первоначальной ориентации, без поворота. Что мне здесь не хватает?
  • 0
    Я видел это, когда GridView Item щелкнул по умолчанию Pressed визуальной статуя будет вызывать содержание GridView будет повторно макет. В настоящее время существует обходной путь, который использует стиль GridViewItemExpanded .
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню