UWP - 在保持与网格对齐的同时旋转图像，仅使用 XAML

问题描述

使用

我试过了:

• 为 CenterX 和 CenterY 字段使用不同的值(根据网格的项目大小，根据原始图像大小，或者只是

  更新当GridView项被点击时，默认的Pressed visual状态会使gridview的内容重新布局.目前，有一种使用 GridViewItemExpanded 样式的解决方法.

  Using Windows Template Studio, I created a (mostly auto-generated) sample UWP application, which shows a bunch of Images within a GridView.

  In order to rotate them, I've used the following xaml - note RenderTransform block which I've added, and the comments within that scope:

  <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>
  

  So that worked fine - until I tried non-square photos.At this stage, the result was that the image itself would sometimes show outside of its container within the grid:

  I've tried:

  • To use different values for the CenterX and CenterY fields (according to the grid's item size, according to the original image size, or just "0.5, 0.5"), but that didn't solve the case.
  • To use Image.LayoutTransform (as suggested here), but it doesn't seem to be available in a Universal Application (or perhaps I'm missing some reference?).
  • Noticed that when I click on the problematic images, they will suddenly move back to their expected location within the grid (and also sometimes the rotation will be gone, so its back to the original image).

  Eventually, I solved it by rotating the image in the code-behind (like here), before adding it to the binded source of the GridView - but shouldn't there be a proper way to achieve that just by using the xaml itself?

  解决方案

  If u want the image will rotate with center and it will not display outside GridView. you could set RenderTransformOrigin property.

  <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>
  

  UpdateWhen the GridView item clicked, the default Pressed visual statue will make the content of gridview re-layout. Currently, there is a workaround that use GridViewItemExpanded style.

  <GridView ItemContainerStyle="{StaticResource GridViewItemExpanded}"
  

  这篇关于UWP - 在保持与网格对齐的同时旋转图像，仅使用 XAML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！