Search code examples
wpfxamlwinui-3itemscontrol

Overlay multiple ImageSources automatically in WinUI / WPF using Itemsrepeater/ItemsControl

I have created several Bitmaps with a transparent background to display data. The data loads correctly, but I'm having trouble overlaying these images. I need help adjusting the layout of an ItemsRepeater or ItemsControl so that it stacks images on top of each other without a predefined layout.

My goal is to recreate the following structure using ItemsRepeater or a similar control:

<Grid>
    <Image Grid.Row="1" Grid.Column="1" Source="{x:Bind ViewModel.ImagePath1, Mode=OneWay}" 
           AutomationProperties.Name="cliff" Stretch="Uniform"
           HorizontalAlignment="Center" VerticalAlignment="Center"/>
    <Image Grid.Row="1" Grid.Column="1" Source="{x:Bind ViewModel.ImagePath2, Mode=OneWay}" 
           AutomationProperties.Name="cliff" Stretch="Uniform"
           HorizontalAlignment="Center" VerticalAlignment="Center"/>
<!-- Images from 1-n -->
</Grid>

But I can't get the images to overlay properly. How can I achieve this layout using ItemsRepeater or another suitable control?

I tried using ItemsRepeater like this:

<ItemsRepeater ItemsSource="{x:Bind ViewModel.ContourPlots, Mode=OneWay}" 
               ItemTemplate="{StaticResource ContourPlotImageTemplate}" />
<Image Grid.Row="1" Grid.Column="1" Source="{x:Bind ViewModel.ImagePath2, Mode=OneWay}" 
       AutomationProperties.Name="cliff" Stretch="Uniform"
       HorizontalAlignment="Center" VerticalAlignment="Center"/>
Solution

  • This worked for me:

    <ItemsControl ItemsSource="{x:Bind ViewModel.ContourPlots, Mode=OneWay}">
<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <Grid />
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

<ItemsControl.ItemTemplate>
    <StaticResource ResourceKey="ContourPlotImageTemplate" />
</ItemsControl.ItemTemplate>

    <Page.Resources>
    <DataTemplate x:Key="ContourPlotImageTemplate" x:DataType="viewmodels:ContourlineUIHolder">
        <Image Visibility="{x:Bind CVisibility, Mode=TwoWay}" Source="{x:Bind ContourlineSource, Mode=TwoWay}" AutomationProperties.Name="cliff"
               HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </DataTemplate>
</Page.Resources>