This is a migrated thread and some comments may be shown as answers.

Grid inside TileView

1 Answer 76 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Tigran
Top achievements
Rank 1
Tigran asked on 22 Jul 2014, 12:43 PM
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?

1 Answer, 1 is accepted

Sort by
0
Pavel R. Pavlov
Telerik team
answered on 25 Jul 2014, 10:41 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
TileView
Asked by
Tigran
Top achievements
Rank 1
Answers by
Pavel R. Pavlov
Telerik team
Share this question
or