Question

In a WPF application, I would like to display a grid of tiles (buttons essentially) using images from a folder location. There could be any different number of images in the folder, so the tiles/buttons need to be generated dynamically and formatted based on the amount. These need to be buttons that can trigger mouse click events.

I’m very new to C# and .NET, so I’d just like some direction on what the best way of doing this would be. I’ve started this as a WPF application so would using a template be a good idea? Or if just dynamically creating form buttons with background images is an easy option then I’ll give that a go.

Answer 1

I would go for ItemsControl. You need a class representing your buttons, with properties such as X, Y, ImageUri, and so on. You expose your generated buttons via ObservableCollection and bind it to ItemsSource of your ItemsControl. Then you change your ItemsPanelTemplate to grid:

        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid>                        
                    <!--Here go rows and columns definitions-->
                </Grid>
            </ItemsPanelTemplate>                
        </ItemsControl.ItemsPanel>

If you have fixed number of rows and columns, you may add them directly in XAML, otherwise generate them at runtime in code-behind. You add ItemsContainerStyle for positioning:

        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Grid.Row" Value="{Binding Y}" />
                <Setter Property="Grid.Column" Value="{Binding X}" />
            </Style>
        </ItemsControl.ItemContainerStyle>

Also, you need ItemTemplate which will cover displaying button with image. Other options would be to use Canvas or UniformGrid as ItemsPanelTemplate (both with their advantages and disadvantages).