Anyone can give me some direction on how can I make the tile panel/container allow for variable height tiles? Ideally I would like to have variable heights and widths as show in the sample WPF app from here: http://blogs.infragistics.com/blogs/jason_beres/archive/2009/05/13/windows-azure-healthcare-mvvm-wpf-ado-net-data-services.aspx
However, I would be happy with having fixed width/columns (say two columns of equal width) but I really need to be able to have variable height; that is, two tiles in the same column can have different heights.
Thanks!
AP
Hi,Do you need something like this picture?Regars,Marin
Exactly like that...
Any help would be appreciated.
Thanks.
1. Custom TilePaneWe need properties that control the height and position of a TilePane relative to the tile dimensionsThe HeightFactor is used to calculate a tile height relative to the uniform cell (normal size)The VerticallOffsetFactor is used to position a tile relative to the normal position. public class MyTilePane : TilePane{ public double HeightFactor { get; set; } public double VerticalOffsetFactor { get; set; } protected override Size MeasureOverride(Size availableSize) { if (!double.IsInfinity(availableSize.Height)) { // The availableSize is a uniform cell size availableSize.Height *= this.HeightFactor; } Size sz = base.MeasureOverride(availableSize); return sz; }}
2. Custom TilePanelWe need to arrange a tile in a rectangle that has different height and position (according the height and vertical offset factors).public class MyTilePanel : TilePanel{ private bool _hasMaximized; protected override Size MeasureOverride(Size availableSize) { this._hasMaximized = false; foreach (TilePane tile in this.Children) { if (tile.TileState != TileState.Normal) { this._hasMaximized = true; break; } } return base.MeasureOverride(availableSize); } protected override void ArrangeChild(UIElement element, Rect finalRect, bool useAnimation) { if (!this._hasMaximized) { MyTilePane tile = element as MyTilePane; if (tile != null) { finalRect.Y += tile.VerticalOffsetFactor * finalRect.Height; finalRect.Height *= tile.HeightFactor; } } base.ArrangeChild(element, finalRect, useAnimation); }}
3. XamWebTileView control templateOpen your page in Blend, edit the XamWebTileView template to create a new style and replace TilePanel with MyTilePanelthe original line is something like this: <igPrim:TilePanel x:Name="PagePanel" and the new line should be: <local:MyTilePanel x:Name="PagePanel" Finally your code will look like this:<igTV:XamWebTileView x:Name="tv3" RowsInPage="2" ColumnsInPage="3" Style="{StaticResource MyTileViewStyle}"TileDragCompleted="tv3_TileDragCompleted"><local:MyTilePane Header="1" Content="1" HeightFactor="0.5" VerticalOffsetFactor="0"/><local:MyTilePane Header="2" Content="2" HeightFactor="1.5" VerticalOffsetFactor="0"/><local:MyTilePane Header="4" Content="4" HeightFactor="0.5" VerticalOffsetFactor="0"/><local:MyTilePane Header="3" Content="3" HeightFactor="1.5" VerticalOffsetFactor="-0.5"/><local:MyTilePane Header="6" Content="6" HeightFactor="0.5" VerticalOffsetFactor="0.5"/><local:MyTilePane Header="5" Content="5" HeightFactor="1.5" VerticalOffsetFactor="-0.5"/></igTV:XamWebTileView>
4. Drag and DropDrag and Drop replaces positions of two tile and we need to recalculate offset and height factors:private void tv3_TileDragCompleted(object sender, TileDragCompletedEventArgs e){ MyTilePane tile1 = e.DragElement as MyTilePane; MyTilePane tile2 = e.TargetElement as MyTilePane; if (tile1 != null && tile2 != null) { double t; t = tile2.VerticalOffsetFactor; tile2.VerticalOffsetFactor = tile1.VerticalOffsetFactor; tile1.VerticalOffsetFactor = t; t = tile2.HeightFactor; tile2.HeightFactor = tile1.HeightFactor; tile1.HeightFactor = t; }}
It is all. I'm going to attach the full solution but right now I'm busy.This sample produces the following result:
Hello. Where can I download the solution for this post? I'm having similar problem. Thank you
Thanks Marin, this is very helpful.
I'll try putting the pieces together this afternoon.