Tile View NormalHeight property?

[Murray]

I am using your TileView as a dashboard, however dashboards rarely have equally sized panels when in the normal position. Would it be impossible to add the property "Normalheight" (as oppsoed to MinimizedHeight) which would apply to the tile size when in the normal state?
Something like in the attached

[Murray]

Or this as I understand row spans arent possible (see attached).

I also understand this would make re-ordering hard, but it could re-order per column and just push down if needed?

[Zarko]

Hello Murray,
The RadTileView supports this features from the Q2 2011 Beta so could you please read this blog post and if you have more questions feel free to ask.

Kind regards,
Zarko
the Telerik team

[Murray]

It's like magic! I ask and "poof!" it appears!

Thank you so much for the hard work and quick response!

So as a wish list, would it be possible to let users resize the tiles (drag handles) in the normal state view?

[Zarko]

Hello Murray,
I'm sorry but I'm not sure if I understand what you're asking, so could you please try to explain it with some more details? I've also created a sample project that looks like the two images you send us so could you examine it and see if this is what you're looking for?

Kind regards,
Zarko
the Telerik team

[Murray]

Thank you for the sample and response. i have attached a mockup video of what I mean with user resizing,

http://muzman.net/telerik/Telerik%20Resize%20Example.zip

[Murray]

An alternative (though less intuitive) would be to wrap the tiles in split containers?

[Zarko]

Hello Murray,
Unfortunately at the moment the RadTileView doesn't support this behavior. You can track and vote for this feature here. You can try to set some GridSplitters and change the size of the RadTileViewItems with them.
If you have more questions feel free to ask.

Regards,
Zarko
the Telerik team

[Murray]

That's what I thought. Thanks Zarko!

[Murray]

I am trying to have 5x tiles and I want the first tile to be the full height, with the other 4x tiles filing up the space to the right (see attached image)

Here is my code:

<telerik:RadTileView Margin="0"
        ColumnsCount="3"
        ColumnWidth="Auto"
        RowHeight="Auto"
        PreservePositionWhenMaximized="True"
        IsItemsSizeInPercentages="True">
            <telerik:RadTileViewItem Header="RadTileViewItem1" RestoredWidth="33" RestoredHeight="100"/>
            <telerik:RadTileViewItem Header="RadTileViewItem2" RestoredHeight="50" RestoredWidth="33"/>
            <telerik:RadTileViewItem Header="RadTileViewItem3" RestoredHeight="50" RestoredWidth="33"/>
            <telerik:RadTileViewItem Header="RadTileViewItem4" RestoredHeight="50" RestoredWidth="33"/>
            <telerik:RadTileViewItem Header="RadTileViewItem5" RestoredHeight="50" RestoredWidth="33"/>
        </telerik:RadTileView>

What am I doing wrong?

Also, the following code in your sample crashes my app:

telerik:TileViewPanel.IsSizeBoundToPosition="True"
                             telerik:TileViewPanel.IsRowsShrinkEnabled="True"
                             telerik:TileViewPanel.IsColumnsShrinkEnabled="True"

[Murray]

Sample project

http://muzman.net/telerik/TelerikSizeTest.zip

[Zarko]

Hello Murray,
From the sample project I can see that you've downloaded the latest dlls and I guess that you don't have problems with

telerik:TileViewPanel.IsColumnsShrinkEnabled="True"
telerik:TileViewPanel.IsRowsShrinkEnabled="True"
telerik:TileViewPanel.IsSizeBoundToPosition="True">

any more?
Unfortunately there's no straight forward way to achieve this layout without some hacks - the problem is that the RadTileView can't have different number of tiles in the different rows. As a workaround you can create an "invisible" item (with RestoredHeight = 0.1) like this:

<telerik:RadTileViewItem Header="RadTileViewItem1"
                             RestoredHeight="100"
                             RestoredWidth="33" />
<telerik:RadTileViewItem Header="RadTileViewItem2"
                             RestoredHeight="50"
                             RestoredWidth="33" />
<telerik:RadTileViewItem Header="RadTileViewItem3"
                             RestoredHeight="50"
                             RestoredWidth="33" />
<telerik:RadTileViewItem Header="HidenItem"
                             RestoredHeight="0.1"
                             RestoredWidth="33" />
<telerik:RadTileViewItem Header="RadTileViewItem4"
                             RestoredHeight="50"
                             RestoredWidth="33" />
<telerik:RadTileViewItem Header="RadTileViewItem5"
                             RestoredHeight="50"
                             RestoredWidth="33" />

If you have more questions please feel free to ask.

Best wishes,
Zarko
the Telerik team

[Murray]

Thank you Zarko! That worked fine for now. Any thoughts on variable size with a rowspan or column span option?

[Murray]

One more problem. How do I hide the "hiden" tiles when in the small state?

[Zarko]

Hello Murray,
We've considered the RowsSpan/ColumnsSpan option but if we try to implement it now it will be a breaking change and we really don't want to do that, so we'll stick with this workaround for now.
Could you explain us what exactly do you mean by "the "hiden" tiles when in the small state"? If you want to hide an item in the RadTileView you can set the Visibility propery of the RadTileViewItem to Collapsed.
If you need further assistance feel free to ask.

All the best,
Zarko
the Telerik team

[Murray]

The method you gave me gives the restored height to 0.1 which effectively hides the tile from view and corrects the layout (restored.png). However when I maximize one of the tiles, the "hidden" tile shows in its small state.(small.png)

I need a way to collapse the tile when it is in the small state.

See attachments

[Murray]

I tried this behavior which works to collapse the tile, but I cant find a trigger to make the tile visible again once it is collapsed.

<telerik:RadTileViewItem x:Name="Hide" Header="HidenItem"
                             RestoredHeight="20"
                             RestoredWidth="33" Background="Red">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="TileStateChanged" SourceName="radTileView" SourceObject="{Binding ElementName=radTileView}">
                        <i:Interaction.Behaviors>
                            <ei:ConditionBehavior>
                                <ei:ConditionalExpression>
                                    <ei:ComparisonCondition LeftOperand="{Binding TileState, ElementName=Hide}" RightOperand="Minimized"/>
                                </ei:ConditionalExpression>
                            </ei:ConditionBehavior>
                        </i:Interaction.Behaviors>
                        <ei:ChangePropertyAction PropertyName="Visibility">
                            <ei:ChangePropertyAction.Value>
                                <Visibility>Collapsed</Visibility>
                            </ei:ChangePropertyAction.Value>
                        </ei:ChangePropertyAction>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </telerik:RadTileViewItem>

[Zarko]

Hi Murray,
The problem with your approach is that the TileStateChanged event is not fired for collapsed items. There are two ways to hide the item when minimized:
- You can set its MinimizeHeight to 1
- You can handle the PreviewTileStateChange and do something like this there:

private void myTileView_PreviewTileStateChanged(object sender, PreviewTileStateChangedEventArgs e)
{
var container = e.OriginalSource as RadTileViewItem;

if (container != null)
{
int indexOfHidenItem = 3;
var hiddenContainers = this.myTileView.ItemContainerGenerator.ContainerFromIndex(indexOfHidenItem) as RadTileViewItem;
if(container.TileState == TileViewItemState.Maximized)
{
hiddenContainers.Visibility = System.Windows.Visibility.Collapsed;
}

if (container.TileState == TileViewItemState.Restored)
{
hiddenContainers.Visibility = System.Windows.Visibility.Visible;
}
}
}

I can advise you to use the MinimizedHeight.
If you have further questions feel free to ask.


Greetings,
Zarko
the Telerik team

[Murray]

Perfect! I tried the minimizedheight as 0 which didnt work, but 1 works fine!

thanks again Zarko!