0

I want to create a tilemap based game in c#. (I know that mvvm and c# might not be the best approach for games but it's a requirement for my class).

I want to have an ObservableCollection of Tiles (a class that I made already which is holding x and y positions as well as the path to the image itself). Now I want my Map-Canvas in my xaml file to be bound to that ObservableCollection, displaying an Image on that Canvas for every single Tile (using the x, y and image-path attributes of that object), so that when I add or delete another Tile the Canvas automatically updates. I've been searching for a solution for a quite a bit and I've stumbled across DataTemplates several times, but I couldn't find any example of using Images like that on a Canvas. (Canvas gives me the best flexibility for the rest of the project ,I rather not want to use a GridPane unless it's totally necessary)

Could you give me a small example of how this might work in MVVM? Thanks in advance.

Philip Feldmann
  • 7,887
  • 6
  • 41
  • 65

1 Answers1

1

Just a few hints: To display objects represented in an ObservableCollection you'll need an ItemsControl. To make this ItemsControl use a Canvas as the underlying panel, set it's ItemsPanel property. Assuming that the ObservableCollection's items that represent the tiles provide three properties Path, X, and Y, this could look somewhat like the following:

<ItemsControl ItemsSource="{Binding ImagesCollection}">
    <ItemsControl.ItemsPanel>
        <Canvas />
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Path}" Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

As mentioned before, the ItemsPanel defines the panel to be used as a container for all the items. The ItemTemplate part defines how each of the items shall be displayed (in your case, this will be a simple Image control).

I suggest that you try to get along from here, and ask another more detailed question if you encounter specific problems!

andreask
  • 4,248
  • 1
  • 20
  • 25
  • Thanks a lot for your reply. This seems to be what I wanted but I get an error for the xaml code: The ItemsPanel Property doesnt support values of "Canvas" (This might not be the original error since I translated it from german but it should be similar) I've tried putting it in an inside the ItemsControl.ItemsPanel and I get to run it but it doesn't display anything. – Philip Feldmann Dec 05 '15 at 16:14
  • You can't do the `Canvas.Left` and `Canvas.Top` binding in the ItemTemplate, because the Canvas from the ItemsPanelTemplate will not be the direct parent of the Image controls in the DataTemplate. Instead, you'll have to do it in an ItemContainerStyle, as shown in [this answer](http://stackoverflow.com/a/22325266/1136211). – Clemens Dec 05 '15 at 16:41
  • Thanks a lot for your reply! Your answer in the duplicate post did the trick. – Philip Feldmann Dec 06 '15 at 14:28