Printed Page layout application with images in C#

Question

I'm working on an application to help create printed-page layouts (to be then fed into a custom script for InDesign). I'm facing a problem regarding placing images on a page. Either a single image could be placed on a page, or multiple images.

• If a single image is placed, the user should be able to define whether it's placed at the top center, or middle of the page
• if two images, the user defines either top/bottom or left/right - though top/bottom would make much sense for two portrait images, so I'd like a way to enforce left/right for portrait and vice versa for landscape images
• if three images, the user defines top/middle/bottom or left/center/right.

This is fairly basic, but I want to throw in the ability to define grid-based layouts. That is, maybe a full width top image, with a left/right image below and so on.

I'm having difficulty envisioning the best approach to do this.

At the moment, I have a PhotoPage object, with an array of Images, which has a placement enum for each image, however this falls apart for grid-based layouts. I was hoping someone could shed some more light on solving this placement problem, other than calculating the exact geometry for each image and sending that to the InDesign script.

Answer 1

Look at how window layout is done in, say, WPF, because it's basically what you're trying to solve from scratch.

You have various container options with different layout strategies: StackPanel with horizontal or vertical orientation, GridPanel with fixed or dynamic sized cells, DockPanel with its "start from border, fill then center" approach.

Your application would only have to keep track of the chosen layout manager, a list of images to be placed, maybe some "layout hints".

On a side note: You wrote (my emphasis):

so I'd like a way to enforce left/right for portrait and vice versa for landscape images

Please don't. Show a preview of the currently chosen layout options, use clearly visible switches to choose between orientations, but leave the choice to the user.

Answer 2

Your first three options are just special cases of grids. The first one is simply a grid with one row and one column, the second a grid with two rows and one column or vice versa, and the third a grid with three rows and one column. What you have to keep track here is

• the kind of grid (number of rows / columns)

• in which grid cell which picture will be placed

• the horizontal or vertical alignment of each picture within a cell (left/middle/right, top/middle/bottom)

If you use such a datastructure for your layout, it will be easily extendable by other grid types. Just allow other kinds of grid configurations, for example grids where each row might contain a different number of columns, or grids with "n x m" cells.

Another variant of this approach is to allow only "n x 1" or "1 x m" grids, but to allow grid cells which contain other grids recursively.

Which of those variants will be the best one for your case depends on what kind of grids you need, and how you want to do the size calculation and scaling.