Question

I have a WPF Window with a Canvas that is used to show a terrain map. I would like to place symbols on this map according to an IEnumerable<MapSymbolDefinition> where MapSymbolDefinition is defined as follows:

public class MapSymbolDefinition
{
  string SymbolFileName { get; set; }
  int XLocation { get; set; }
  int YLocation { get; set; }
}

All symbols are stored in the Symbols folder of my project, so the path to any symbol would be [ProjectFolder]/Symbols/SymbolFileName.bmp.

Any thoughts on how I can set this up so I don’t have to populate a bunch of Image objects manually in the code-behind?

Thanks.

Answer 1

Use an ItemsControl with customized ItemsPanel, ItemContainerStyle and ItemTemplate:

<ItemsControl ItemsSource="{Binding MapSymbols}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Canvas.Top" Value="{Binding YLocation}"/>
            <Setter Property="Canvas.Left" Value="{Binding XLocation}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="{x:Type local:MapSymbolDefinition}">
            <Image Source="{Binding SymbolFileName, Converter={StaticResource ImageNameConverter}}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Update after comments: You can define an ItemTemplate to provide the visual tree for each item in the collection. In this case I used a converter to convert the SymbolFileName property to an image, but you could equally define a separate property on your MapSymbolDefinition class that yields the full path. The latter approach is more in line with MVVM best practices.