URGENT: Fixed size tiles and override of the default layout

[Sparky]

Good day all
I am using the RadTileView but I am stuck. Basically we have a few items we are displaying (see pic 1) but because of the way the layout is done, as you can see it looks pretty bad. In addition I am using a MaxWidth/Height for the tiles. I am also using a datatemplate to wrap the fluidcontentcontrol. I have just an empty border for the Small and Content sections, and a grid for the Large one. Basically, we don't care to see anything in the small or normal layout - but these are always shown depending on the number of items in the panel. This is why I used fixed width and height. I have a few questions.
1. Since I do not know how to control the layout of the tiles, I used MaxH/W as previously mentioned.The problem is, with this, if you go to any other state (ex maximized), the size is still fixed (makes sense). However, on max I want to actually resize the tile. I came across another post with something like this:

private void criticalProviderAlert_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)

{

     RadTileViewItem maximizedItem = criticalProviderAlert.ItemContainerGenerator.ContainerFromItem(criticalProviderAlert.MaximizedItem) as RadTileViewItem;

     if (maximizedItem != null )

     {

        maximizedItem.MaxHeight = 352;

        maximizedItem.MaxWidth = 330;

        return;

     }

}

So now I can change the size when the tile state is changed (pic 2). However, when I go back to the restored state - pic 3 is what happens. I wanted it to look as it did when I first started the app.

2. The next problem is layout. Notice that even though I have given the tiles explicit values, the control is treating the tiles as if they are using the default values based on what the panel computed. This is apparent in pic 3. Ideally, I would like it to look like pic 4. Is there a way to override/change the layout behavior so that it respects my explicit values rather than the default ones?
Thanks - this is a cool control.

UPDATE:
I have a working solution for 1 where I can resize the tiles as I see fit. I am doing this in code behind (we are using mvvm) since this is just a view related issue. The code is as follows but if anyone has any other ideas, please feel free to share:

private void providerAlert_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
    var s = e.Source;
    RadTileViewItem maximizedItem =
        providerAlert.ItemContainerGenerator.ContainerFromItem(providerAlert.MaximizedItem) as RadTileViewItem;
    if (maximizedItem != null )
    {
        maximizedItem.MaxHeight = 352;
        maximizedItem.MaxWidth = 330;
    }
    else
    {
        var tileItems = providerAlert.Items;
        foreach (var tile in tileItems)
        {
            var actualTile = providerAlert.ItemContainerGenerator.ContainerFromItem(tile) as RadTileViewItem;
            if(actualTile != null)
            {
                actualTile.MaxHeight = 50;
            }
        }
    }
}

[Tina Stancheva]

Hi Sparky,

From the snapshots you sent it seems that you want to display only the Header of the Restored and Minimized  RadTileViewItems. If this is indeed the case, then there is another approach that might work for you.

You can edit the ControlTemplate of the RadTileViewItem (read more) and define the main Grid element's Height value so that there is enough space to display only the Header, for example like so:

<Style x:Key="OnlyHeaderTileViewItemStyle" TargetType="telerik:RadTileViewItem">
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:RadTileViewItem">
                <Grid Height="44">

                ...

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Also, by design the restored RadTileViewItems are evenly displayed in the available space - the space that is set through the Width and Height properties of the RadTileView. And, the space between the items is set through the Padding property of the RadTileViewItem, which by default is 7. Therefore, you can control the RadTileView size in order to control the layout of the RadTileViewItems.

In your case you can for example define a Height for the RadTileView and handle the TileStateChanged() event to change the RadTileView's Height property instead of the RadTileViewItem's Height property.

I attached a sample project illustrating this approach. Please give ti a try and let me know if it works for you. You can also take a look at this forum thread where similar scenario is discussed.

Regards,
Tina Stancheva
the Telerik team