Avalonia中ItemsRepeater内Canvas元素居中及悬停缩放问题

不用Canvas，改用Border作为裁剪容器，配合RenderTransformOrigin和ScaleTransform实现居中缩放，完全通过XAML和样式实现，无需后台代码操作元素。

步骤1：修改ItemTemplate布局 #

替换Canvas为Border，确保容器裁剪超出内容，同时让Image自动居中：

<ItemsRepeater>
    <ItemsRepeater.ItemTemplate>
        <Button Padding="0">
            <!-- Border作为裁剪容器，固定尺寸并开启裁剪 -->
            <Border Width="300" Height="200" ClipToBounds="True">
                <Image Source="{Binding Thumbnail}" 
                       Stretch="Uniform"
                       <!-- 设置缩放原点为自身中心 -->
                       RenderTransformOrigin="0.5,0.5">
                    <Image.RenderTransform>
                        <ScaleTransform ScaleX="1" ScaleY="1" />
                    </Image.RenderTransform>
                </Image>
            </Border>
        </Button>
    </ItemsRepeater.ItemTemplate>
</ItemsRepeater>

步骤2：编写悬停缩放样式 #

通过修改ScaleTransform的缩放比例实现效果，添加过渡动画让效果更平滑：

<Style Selector="ItemsRepeater Button Image">
    <Setter Property="RenderTransform.ScaleX" Value="1"/>
    <Setter Property="RenderTransform.ScaleY" Value="1"/>
    <!-- 添加过渡动画，和CSS transition逻辑一致 -->
    <Setter Property="Transition" Value="RenderTransform 0.2s ease-in-out"/>
</Style>
<Style Selector="ItemsRepeater Button:pointerover Image">
    <!-- 320/300≈1.07，对应原需求的宽度放大比例 -->
    <Setter Property="RenderTransform.ScaleX" Value="1.07"/>
    <Setter Property="RenderTransform.ScaleY" Value="1.07"/>
</Style>

关键说明 #

1. Border替代Canvas：Border是布局容器，会自动让Stretch="Uniform"的Image保持居中对齐，超出部分被ClipToBounds="True"裁剪，无需手动调整位置。
2. RenderTransformOrigin：设置为0.5,0.5后，缩放变换会以Image的中心为原点，实现从中心向外的缩放效果，解决原Canvas方案左上角缩放的问题。
3. ScaleTransform：相比修改Width/Height，通过变换实现缩放更高效，且不会破坏布局结构。
4. Transition属性：Avalonia的Transition支持对变换属性添加动画，和CSS的过渡效果完全一致，提升交互体验。

内容的提问来源于stack exchange，提问作者Sei