Questions about using TileView

[Alberto]

Hello,

I was looking at the TileView examples in the demo application and I liked very much the way it work, I have a few questions about if it is possible to achieve some features:

1. I saw in other example that is possible to hide the header bar in the TileViewItem, I would like to know if I can add some buttons in my content and maximize or minimize the TileViewItem.

2. In the TileView2 image that I attached you can see I have 4 TileViewItems, is it possible to increase the space between TileViewItems and the borders of the window to have someting like the TileView3 image?

I am hiding the minimized Items with this code:

if ((e.OriginalSource as RadTileViewItem).TileState == TileViewItemState.Maximized)
            {
                this.sbTileView.MinimizedColumnWidth = new GridLength(0);
            }

3. If it is possible the previous feature, when I maximize a TileViewItem can I specify the size of the TileViewItem so when it is maximized only take the space of the 4 TileViewItems? Something like the TileView4 image.

4. Having the same 4 TileViewItems each one with a RadFluidContentControl, is it possible that LargeContent shows only when the TileViewItem is maximized regardless of its size?

Any help would be great.

Thanks in advance,

Alberto

[Pavel R. Pavlov]

Hi Alberto,

Let me go straight to your questions. Basically, in order to achieve your requirements you need to extract the default templates of the RadTileView and the RadTileViewItem controls. You can find more information about extracting templates in this article.

Next I will try to guide you on the steps that you need to take to achieve your requirements:

1. I saw in other example that is possible to hide the header bar in the TileViewItem, I would like to know if I can add some buttons in my content and maximize or minimize the TileViewItem. - The header of the RadTileViewItems is actually different control, hosting the buttons and allowing users to move the items. In order to hide the header you can comment that control. In order to allow users to move the items you need to set x:Key attribute to the Grid component hosting the header. It is the first child of the Border called "outerBorder" in the default template of the RadTileView control.
2. In the TileView2 image that I attached you can see I have 4 TileViewItems, is it possible to increase the space between TileViewItems and the borders of the window to have someting like the TileView3 image? - After extracting the default templates you will be able to apply custom Margins to the ItemsPresenter component (in the template of the RadTileView) visualizing the RadTileViewItems. Also, you can apply Margins to each of the items. By doing so you will be able to achieve your requirements.
3. If it is possible the previous feature, when I maximize a TileViewItem can I specify the size of the TileViewItem so when it is maximized only take the space of the 4 TileViewItems? Something like the TileView4 image. - Please note that the RadTileView control is designed so that the maximized item takes all the available space except the space needed for the minimized items. Hence, if you have only four items in restored state, the maximized one will take their place.
4. Having the same 4 TileViewItems each one with a RadFluidContentControl, is it possible that LargeContent shows only when the TileViewItem is maximized regardless of its size? - Please note that the RadFluidContentControl exposes ContentChangeMode property. If you set it to Manual, you as a developer, will be allowed to control the state and the content of the different RadTileViewItems. You can find more information about this approach in this article.

For your convenience I extracted and edited the default templates. Please take a look at the attached project and let me know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik