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

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

3 Answers 60 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Tracy
Top achievements
Rank 1
Tracy asked on 15 Apr 2012, 10:56 PM
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

3 Answers, 1 is accepted

Sort by
0
Zarko
Telerik team
answered on 18 Apr 2012, 03:39 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Tracy
Top achievements
Rank 1
answered on 18 Apr 2012, 04:41 PM
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

0
Zarko
Telerik team
answered on 20 Apr 2012, 03:07 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
TileView
Asked by
Tracy
Top achievements
Rank 1
Answers by
Zarko
Telerik team
Tracy
Top achievements
Rank 1
Share this question
or