Используя 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>
Так что все работало нормально - пока я не попробовал не квадратные фотографии. На этом этапе результат состоял в том, что само изображение иногда показывалось вне его контейнера в сетке:
Я пробовал:
Image.LayoutTransform
(как предлагается здесь), но, похоже, он недоступен в универсальном приложении (или, может быть, мне не хватает какой-либо ссылки?).В конце концов, я решил эту проблему, повернув изображение в выделенном фрагменте кода (как здесь), прежде чем добавлять его в связанный источник GridView - но разве не должен быть правильный способ достичь этого, просто используя сам xaml?
Так что все работало нормально - пока я не попробовал не квадратные фотографии. На этом этапе результат состоял в том, что само изображение иногда показывалось вне его контейнера в сетке:
Если вы хотите, изображение будет вращаться с центром и не будет отображаться за пределами 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>
Обновление При щелчке элемента GridView
содержимое visual
статуи Pressed по умолчанию изменяет макет gridview. В настоящее время существует обходной путь, который использует стиль GridViewItemExpanded
.
<GridView ItemContainerStyle="{StaticResource GridViewItemExpanded}"
Pressed
визуальной статуя будет вызывать содержание GridView будет повторно макет. В настоящее время существует обходной путь, который использует стиль GridViewItemExpanded
.