如何在WinUI/WPF中用ItemsRepeater/ItemsControl自动叠加图片

要让ItemsRepeater或ItemsControl里的图片自动叠加，核心是替换默认的流式布局为重叠布局容器，以下是两种可行方案：

方案一：使用ItemsRepeater + GridLayout #

ItemsRepeater默认用StackLayout（垂直/水平排列），我们需要指定GridLayout作为布局容器，让所有图片都放在同一个Grid单元格里，实现叠加：

<!-- 首先定义ItemTemplate -->
<Page.Resources>
    <DataTemplate x:Key="ContourPlotImageTemplate" x:DataType="local:你的图片数据类型">
        <Image Source="{x:Bind ImagePath, Mode=OneWay}"
               AutomationProperties.Name="cliff"
               Stretch="Uniform"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"/>
    </DataTemplate>
</Page.Resources>

<!-- 使用ItemsRepeater并指定GridLayout -->
<ItemsRepeater ItemsSource="{x:Bind ViewModel.ContourPlots, Mode=OneWay}"
               ItemTemplate="{StaticResource ContourPlotImageTemplate}">
    <ItemsRepeater.Layout>
        <GridLayout />
    </ItemsRepeater.Layout>
</ItemsRepeater>

GridLayout默认会把所有子元素放在Grid的(0,0)单元格，所以所有图片会自动居中叠加，和你手动在Grid里放多个Image的效果完全一致。

方案二：使用ItemsControl + Grid作为ItemsPanel #

如果你更习惯用ItemsControl，只需要把它的默认ItemsPanel（StackPanel）替换成Grid即可：

<ItemsControl ItemsSource="{x:Bind ViewModel.ContourPlots, Mode=OneWay}">
    <ItemsControl.ItemTemplate>
        <DataTemplate x:DataType="local:你的图片数据类型">
            <Image Source="{x:Bind ImagePath, Mode=OneWay}"
                   AutomationProperties.Name="cliff"
                   Stretch="Uniform"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

关键说明 #

你之前的尝试失败是因为ItemsRepeater默认用StackLayout，图片会垂直排列而非重叠。只要把布局容器换成Grid（不管是用GridLayout还是ItemsControl的Grid面板），就能让所有图片共享同一布局空间，实现透明背景的叠加效果。

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