Tile height

[ere gon]

Hi
.
Is it possible to show only the header in a minimized and normal state?
I saw one answer where you have suggested to set the height of the item style to the height of the header, in a databound tileview. but i didnt succeded to implement it. can you give me a full example?

Erez 

[Tina Stancheva]

Hi ere gon,

In your case I'd suggest a different approach. You can use the RadFluidContentControl and set its ContentChangeMode to Manual and then you can use the TileStateChanged() event handler to change the RadFluidContentControl state, like so:

private void tileView_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
        {
            e.Handled = true;
            RadTileViewItem item = e.OriginalSource as RadTileViewItem;
            if (item != null)
            {
                var fluidControls = item.ChildrenOfType<RadFluidContentControl>();
                if (fluidControls.Count == 0)
                {
                    return;
                }
                RadFluidContentControl fluidControl = fluidControls[0];

                switch (item.TileState)
                {
                    case TileViewItemState.Maximized:
                        fluidControl.State = FluidContentControlState.Large;
                        break;
                    case TileViewItemState.Minimized:
                        fluidControl.State = FluidContentControlState.Small;
                        break;
                    case TileViewItemState.Restored:
                        fluidControl.State = FluidContentControlState.Normal;
                        break;
                }
            }
        }

You can also use the ItemTemplate to set a header for the TileViewItems and the ContentTemplate to define the content of the RadTileViewItem depending on the RadFluidContentControl state. You can set empty TextBlocks, for example, in the SmallContent and the Content of the  RadFluidContentControl and you can set the appropriate content of the RadFluidContentControl's LargeContent.

<DataTemplate x:Key="tileTemplate">

            <telerik:RadFluidContentControl ContentChangeMode="Manual" State="Normal">

                <telerik:RadFluidContentControl.SmallContent>
                    <TextBlock  />
                </telerik:RadFluidContentControl.SmallContent>

                <telerik:RadFluidContentControl.Content>
                    <TextBlock  />
                </telerik:RadFluidContentControl.Content>

                <telerik:RadFluidContentControl.LargeContent>
                    <TextBlock Text="{Binding Description}"/>
                </telerik:RadFluidContentControl.LargeContent>

            </telerik:RadFluidContentControl>

        </DataTemplate>

I prepared an example for you. Can you please take a look at it and let me know if it works for you or if your scenario requires a different approach.

Greetings,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[ere gon]

It isnt what i wanted.
i want to see only the header part without the panel under it.
also, another question: if i use a large amount of tiles = more then 80. it takes almost 10 seconds to return from maximized state to normal state.
is it possible to speed it up? maybe to skip the visual side of the change?

Thanks
Erez

[Tina Stancheva]

Hello ere gon,

Please accept my deepest apology, I obviously misunderstood your scenario.

The one approach you can use is to specify the MinimizedHeight of each tile to be equal to the height of an item's header, then you will get the desired effect.
However, If you data bind the control, you can specify the height in a dedicated style and set the TileView.ItemContainerStyle property to that style. I used this approach and modified the example accordingly. In the TileStateChanged() event handler I change the style of the RadTileViewItems depending on their state.

In the OnlyHeaderTileViewItemStyle I have set the height of the TileViewItem to display only the Header of the items (<Grid Height="44">). You can change this height accordingly to your needs. You can control the way the RadTileViewItems are displyed even further by editing their ControlTemplate using Blend.

As for your second question, unfortunately for now there is not an easy way to improve the performance of the RadTileView, however we have plans to add some significant improvements in a near future.

Please let us know if  we can further assist you or if your scenario requires a different approach.

Kind regards,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[ere gon]

Thanks,
It is close enough to what i wanted, even though when using less objects there are large spaces between the tiles.
what i need is to control the width and height of the tiles in normal view. now tiles are ordered and sized automatic by the component. i want it to stay in the same size regardless if i use 1 tile or 10 tiles. also the tiles are ordered horizontally, so if i have 10 tiles it will be ordered in two lines. what i want is to set the rowsmax value to 5, and the tiles will be adjusted vertically in two columns.

i hope there are solutions to what i need.
Thanks
Erez

[Tina Stancheva]

Hello ere gon,

Unfortunately, by design the RadTileViewItems are displayed evenly in the available space defined by the RadTileView width. However, we have previously received similar feature request and you can vote for it in our PITS thus increasing its priority.

Also to set the maximum number of columns you can use the MaxColumns property. In your case if you have 10 TileViewItems and you set MaxColumns="2" the items will be arranged in 2 columns and in 5 rows.

Let us know if you need more info on the matter.

All the best,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.