Exactly like that...

Any help would be appreciated.

Thanks.

AP

Thanks Marin,

I thought the solution would be along that path. I tried several things myself with TilePanel but I was unable to come up with anything close to what we need. We are currently evaluating the Silverlight toolkit for our product, and being able to have the variable height tiles is a must.

Looking forward to your sample code, I am sure it will be of great help!

AP

1. Custom TilePane
We need properties that control the height and position of a TilePane relative to the tile dimensions
The 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 TilePanel
We 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 template
Open your page in Blend, edit the XamWebTileView template to create a new style and replace TilePanel with MyTilePanel
the 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 Drop
Drag 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;
  }
}

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. 

It is all. I'm going to attach the full solution but right now I'm busy.
This sample produces the following result: