3

I'm trying to make a basic tile map edior and I want to display each tile from the loaded tileset in some sort of grid, so that new tiles are added on the same row until the row is full, and then start filling the next row. I've added an image to better illustrate what I what:

enter image description here

Should i use a modified ListView of some sort, or perhaps a canvas? The panel containing the tiles is resizible, and i would love the tiles to rearange depending on the size of the panel.

Panagiotis Kanavos
  • 120,703
  • 13
  • 188
  • 236
User892313
  • 225
  • 3
  • 19
  • 1
    As the playingfield: Since you will want this to work flickerless and seamless - write your own control and overwrite the OnRender method. Any kind of panel would add lot lot of unnecessary overhead. For the Toolbox: Use a wrappanel – Manfred Radlwimmer Mar 08 '17 at 11:11
  • 1
    @ManfredRadlwimmer that's unnecessary with WPF since it already provides such functionality. You can use any repeating control with an itemtemplate that uses an image. You can also change the layout control used by the repeater. You can create a *listbox* that scrolls horizontally first – Panagiotis Kanavos Mar 08 '17 at 11:12
  • @PanagiotisKanavos Yea, I kind of misinterpreted the question at first. – Manfred Radlwimmer Mar 08 '17 at 11:12
  • Possible duplicate of [Displaying Images in ListView (or something better!) in WPF MVVM using databinding](http://stackoverflow.com/questions/15594289/displaying-images-in-listview-or-something-better-in-wpf-mvvm-using-databindi) – Panagiotis Kanavos Mar 08 '17 at 11:16
  • You don't need to write your own panel. Using an existing panel won't add overhead. In fact, it may be very easy. Most repeating data bound controls allow you to specify a *different* layout than their default, by changing their `ItemsPanel` or `DataTemplate` templates – Panagiotis Kanavos Mar 08 '17 at 11:18

1 Answers1

4

You can reach this by using an ItemsControl with a UniformGrid as ItemsTemplate like

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <!-- Present your item here -->
        </DataTemplate>
    </ItemsControl.Itemtemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="5"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>
Fruchtzwerg
  • 10,999
  • 12
  • 40
  • 49
  • 1
    This will create a grid as asked in the title. The image though scrolls to the right - which *is* possible with a StackPanel or WrapPanel – Panagiotis Kanavos Mar 08 '17 at 11:14
  • You can also use `` – Panagiotis Kanavos Mar 08 '17 at 11:16
  • Sorry, I'm really green to WPF. I got the binding working, but how do i create this ItemTemplate? It says it the resource "ImageTemplate" cannot be resolved. – User892313 Mar 08 '17 at 12:02
  • My view is connected to a TilesetViewModel that has a Tileset object that has an observable collection of Tile objects. I've managed to display these objects in a ListView by using ItemsSource="{Binding Tileset.Tiles}". – User892313 Mar 08 '17 at 12:09
  • I've edited my answer, check it out let me know if there are any problems. – Fruchtzwerg Mar 08 '17 at 12:15
  • Thank you. I realized i had an issue with my images. The images were Bitmap objects, but WPF require BitmapSource objects to display them in the ListView – User892313 Mar 09 '17 at 22:11
  • You can use a conversion to solve this problem: http://stackoverflow.com/questions/22499407/how-to-display-a-bitmap-in-a-wpf-image – Fruchtzwerg Mar 09 '17 at 22:14