Layout question: Scaling tiles

07-18-2009 8:26 PM |

I'm trying to figure out how to accomplish a particular layout and I'm stuck. This is the easy part:

<ItemsControl ItemsSource="{Binding Solutions}">
	<ItemsControl.ItemsPanel>
		<ItemsPanelTemplate>
			<toolkit:WrapPanel/>
		</ItemsPanelTemplate>
	</ItemsControl.ItemsPanel>
	<ItemsControl.ItemTemplate>
		<DataTemplate>
			<controls:MyTile/>
		</DataTemplate>
	</ItemsControl.ItemTemplate>
</ItemsControl>

There's an items control that has a "tile" for each item, and the items wrap with a wrap panel.

The part I'm having trouble with is that I'd like to scale the items control to fill the entire space available. I thought I'd wrap the ItemsControl in a ViewBox, but unfortunately, that scales the tiles down such that they no longer wrap, and I get a single line of very small tiles. I'd really like to scale and wrap such that all the space is filled, horizontally and vertically.

Am I going to have to do some kind of custom layout, or is there something I can tweak to get the layout I'm looking for?

Thanks,

Eric

 

 

Re: Layout question: Scaling tiles

07-20-2009 5:34 PM |

This isn't a use case for ViewBox. What you're looking for is Stretching, not scaling.

Set the ItemsControl HorizontalAlignment & VerticalAlignment to Stretch and you should be fine. (depending on the type of layout it's nested in)  

Re: Layout question: Scaling tiles

07-20-2009 11:54 PM |

Let me clarify my situation a bit if I may. I have an unknown number of tiles in the items control, and I want them all to be visible at once regardless of how many there are. If they happen to all fit at their natural size, then stretching the items control is fine. If there are too many, they go off the bottom of the screen. Instead of wrapping the items control in a ScrollViewer, I'd like to scale the tiles down so that they continue to fit. The more tiles there are, the smaller they'll have to be to continue to fit.

The ViewBox works great for what I'm trying to achieve, but only in one dimension.  The tiles get smaller and smaller as more and more are added, but there's no longer any wrapping, so I get single row. If you'll pardon the ASCII art, the tiles do this:

xxxxxxxxxxxxxx

which leaves all the vertical space unused. What I want is:

XXXXXXXXXXXXXXX

XXXXXXXXXXXXXXX

XXXXXXXXXXXXXXX

Does that make sense?

Thanks,

Eric