HELP!!! Tile Placement Is Wrong -- Different Sizes

[Tracy]

Hi,

I am having issues with trying to get my tiles in restored mode to "fill in" when one tile is bigger than the others.
I have a RadTileView which needs to show 7 panels (tile in position 0 is going to be 100% height and 50% width of the tile viewer). The rest of the tiles are sized so they should fit in the remaining space available, however 3 of the tiles align themselves below the tile in position 0. This means they are not visible and the user has to scroll.

I tried following the article - http://blogs.telerik.com/zarkovidolov/posts/11-06-25/new-tileview-features.aspx 
and tried downloading the sample but the link is bad.

Here is my xaml, which I am hoping that you will be able to help me:

<telerik:RadTileView Grid.Row="0" x:Name="ChartTiles"
                                TileStateChangeTrigger="SingleClick"
                                telerik:StyleManager.Theme="Office_Blue"
                                ColumnsCount="3"
                                RowsCount="3"
                                ColumnWidth="Auto"
                                RowHeight="Auto"
                                MinimizedColumnWidth="300"
                                MinimizedRowHeight="300"
                                PreservePositionWhenMaximized="true"
                                IsItemsSizeInPercentages="True"
                                ItemsSource="{Binding ChartingViewModel.Charts}"
                                telerik:TileViewPanel.IsColumnsShrinkEnabled="True"
                                telerik:TileViewPanel.IsRowsShrinkEnabled="True"
                                telerik:TileViewPanel.IsSizeBoundToPosition="True"
                                TileStateChanged="ChartTiles_TileStateChanged"
                                Loaded="ChartTiles_Loaded"
                                TilesPositionChanged ="ChartTiles_TilesPositionChanged"
                                 >

    <telerik:RadTileView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" Style="{StaticResource tileItemStyle}"/>
        </DataTemplate>
    </telerik:RadTileView.ItemTemplate>

    <telerik:RadTileView.ItemContainerStyle>
        <Style TargetType="telerik:RadTileViewItem">
            <Setter Property="RestoredHeight" Value="{Binding TileRestoredHeight, Mode=TwoWay}" />
            <Setter Property="RestoredWidth" Value="{Binding TileRestoredWidth, Mode=TwoWay}" />
            <!--<Setter Property="Position" Value="{Binding TilePosition, Mode=TwoWay}" />-->
            <Setter Property="ContextMenu" Value="{StaticResource ChartContextMenu}" />
        </Style>
    </telerik:RadTileView.ItemContainerStyle>

    <telerik:RadTileView.ContentTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30" />
                    <RowDefinition />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <Label Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" Content="{Binding Path=Title}"/>

                <StackPanel Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal">
                    <RadioButton Content="Pie Chart" IsChecked="{Binding Path=IsPieChartActive}" Margin="0,5,0,5"/>
                    <RadioButton Content="Bar Chart" IsChecked="{Binding Path=IsBarChartActive}" Margin="5"/>
                </StackPanel>

                <ecaAnalyzerViews:PieChartControl Grid.Row="1" Grid.ColumnSpan="2"
                                     Visibility="{Binding Path=PieChartVisibility, TargetNullValue=Collapsed, FallbackValue=Collapsed}"
                                     />

                <ecaAnalyzerViews:BarChartControl Grid.Row="1" Grid.ColumnSpan="2"
                                     Visibility="{Binding Path=BarChartVisibility, TargetNullValue=Collapsed, FallbackValue=Collapsed}"
                                     />

            </Grid>

        </DataTemplate>
    </telerik:RadTileView.ContentTemplate>

</telerik:RadTileView>

Thanks in advance for any help!!!

Tracy

[Zarko]

Hello Tracy,
The problem is that at the moment you can't have different number of items on each row - for example items with positions 0, 1 and 2 are on your first row and on your second row you'll have items with positions 3, 4 and 5 and the last item (with position 6) will be on the third row - and that's why the layout of the items is not how you expect it to be. The only workaround at the moment is to create "invisible" items with very small height and place them on positions 3 and 6 so that no other items will go beneath the first one (the one with height 100).
I've attached a sample project to show you hot to do this so could you please examine it and if you have more questions feel free to ask.

Regards,
Zarko
the Telerik team

[Tracy]

Thanks for the test app -- that should solve my problem.

Is there going to be a way to do the same thing without having to use invisible items?  Something like a ColumnSpan or RowSpan option?

Tracy

[Zarko]

Hi Tracy,
There's a feature request for this behavior in our PITS, but we can't tie to any exact date because to implement this exact functionality we'll have to make major changes to the RadTileView and there will be a lot of breaking changes (this is the main reason that we still haven't implemented it).
If you have further questions feel free to ask.

All the best,
Zarko
the Telerik team