Grid inside TileView

[Tigran]

Hello everyone, 

I'm using RadTileView and I've decided to use Grid inside tileview for items positioning. But it causes top bar with maximize/minimize button. Here is my code and the result is displayed in picture(TileWithGrid.png). 

<telerik:RadTileView   x:Name="tileView" >
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2.5*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <telerik:RadTileViewItem Background="Red"
                                     Header="Item 0"
                                     Style="{DynamicResource RadTileViewItemStyle}"
                                         Grid.Row="0" Grid.Column="0"
                                         DataContext="{StaticResource NewTile}"/>


                <telerik:RadTileViewItem Background="Blue"
                                     Header="Item 0"
                                     Style="{DynamicResource RadTileViewItemStyle}"
                                         Grid.Row="1" Grid.Column="0"
                                         DataContext="{StaticResource RecentTile}"/>
<Grid>
            <telerik:RadTileViewItem Background="Orange"
                                     Header="Item 0"
                                     Style="{DynamicResource RadTileViewItemStyle}"
                                     Grid.Row="0" Grid.Column="1"  Grid.RowSpan="2"
                                     DataContext="{StaticResource ErrorsTile}"/>


            </Grid>
        </telerik:RadTileView>
</Grid>

But when I remove Grid inside TileView top bar disappears. Here is code without Grid and the result is displayed in TileWithoutGrid.png

<Grid>

        <telerik:RadTileView x:Name="tileView" >

                <telerik:RadTileViewItem Background="Red"
                                     Header="Item 0"
                                     Style="{DynamicResource RadTileViewItemStyle}"

                                         DataContext="{StaticResource NewTile}"/>


                <telerik:RadTileViewItem Background="Blue"
                                     Header="Item 0"
                                     Style="{DynamicResource RadTileViewItemStyle}"

                                         DataContext="{StaticResource RecentTile}"/>

                <telerik:RadTileViewItem Background="Orange"
                                     Header="Item 0"
                                     Style="{DynamicResource RadTileViewItemStyle}"

                                     DataContext="{StaticResource ErrorsTile}"/>

        </telerik:RadTileView>
    </Grid>

So how can I mix TileView with Grid without top bar displayed?

[Pavel R. Pavlov]

Hi Tigran,

First I want to thank you for providing us with detailed information about your scenario. It helped me understand and trace down the reasons behind your issue. Let me know try to explain why this behavior is expected and what exactly happens in your particular scenario.

In the first snippet you have defined a RadTileView control. Inside it, you have defined one Grid panel which hosts three RadTileViewItems. Those items have their Style property set. With this structure you actually define nested RadTileViewItems. The reason for this is the fact that the Grid component is automatically wrapped in a RadTileViewItem by the RadTileView control. Since your custom style is applied only to specific RadTileViewItems, that autogenerated item has the default style applied. This is why you can see the maximize/minimize button.
Please note that this button is hosted by a separate control that represents the header of a RadTileViewItem. I suppose that your custom style targeting the RadTileViewItem predefines the Template of an item and that header control is not included in your customized template. This is why when you remove the Grid panel, the RadTileView control hosts only the items that have custom style (without header control visualized) applied and you cannot see the referenced button.

As far as I understand you need to remove the header control from the default template also. I am happy to inform you that there is straightforward way to achieve this requirement. You can use the ItemContainerStyleSelector property of the RadTileView control. By using it you can define custom container style selector which will select different styles based on custom logic. By using this approach you will be able to define style (without header control) that will be applied on the outer style and the other custom styles will be applied to the inner items.

Please try to achieve your requirement using this property and let us know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik