Binding a TileView ObservableCollection

[Alvaro]

I'm trying to bind a tileview with an observablecollection list, but I'm not quite sure how to set the templates. I managed to do the following code which is kind of working, but I am not able to set the header for each tile. Could you provide me an example using tileview with templates? binding against an observable collection?

thanks

       <telerikNavigation:RadTileView  x:Name="RadTileView1"

                                                 Width="950"

                                                 Height="400" 

MinimizedColumnWidth="197"

                                               ItemsSource="{Binding StandardList}"

>

            <telerikNavigation:RadTileView.ContentTemplate  >

                

                <telerik:HierarchicalDataTemplate >

                    

                <telerik:RadFluidContentControl telerikAnimation:AnimationManager.IsAnimationEnabled="True" 

SmallToNormalThreshold="291, 130"

                                                NormalToSmallThreshold="292, 131"

                                                NormalToLargeThreshold="730, 350"

                                                LargeToNormalThreshold="731, 351">

                    <telerik:RadFluidContentControl.SmallContent>

                        <Border Width="193" Height="30">

                            <TextBlock Text="Small Content" />

                        </Border>

                    </telerik:RadFluidContentControl.SmallContent>

                    <telerik:RadFluidContentControl.Content>

                        <TextBlock Text="normal content" />

                    </telerik:RadFluidContentControl.Content>

                    <telerik:RadFluidContentControl.LargeContent>

                        <Grid>

                            <mine:BigStandardView Name="bv2"></mine:BigStandardView>

                        </Grid>

                    </telerik:RadFluidContentControl.LargeContent>

                    </telerik:RadFluidContentControl>

                    </telerik:HierarchicalDataTemplate>

            </telerikNavigation:RadTileView.ContentTemplate>

        </telerikNavigation:RadTileView>

[Tihomir Petkov]

Hi Alvaro,

I prepared a sample that demonstrates data binding and data templates. I also bound the TileView to an ObservableCollection. Please take a look at the project and let me know if it helps.

Regards,
Tihomir Petkov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Alvaro]

Hi Tihomir,  thanks for the promptly response.

It definitely worked. I've noticed that as I keep adding content to each template the transition animation its affected. I'm wondering if there is any way to solve this problem. The small,normal, large views seem to be "too heavy" for the control to handle, therefore the transition is done with a rough and not smooth  transition. I have tiles, a progress bar in each small view (I was using telerik linear gauge but the transition was drastically affected). large view contains charts, treeviews, normal view contains a chart view. Again I tried to use telerik controls but it gets too slow. Could you recommend something so I can use the telerik controls?

thanks

alvaro 

thanks

-alvaro

[Tihomir Petkov]

Hi Alvaro,

We are aware of the performance issues in scenarios involving controls that are heavy in terms of the number of visual elements they contain. We will be working on improvements in that direction, but currently you will have to optimize your layout as much as possible. It is generally a good practice to use fewer visual elements in Silverlight applications if performance is a priority. The animations are slowed down by the large number of visual elements that are resized while the tiles change their state. Possible optimizations are:

1) Hiding the "heavy" visuals when a resizing of a tile begins - you can use the PreviewTileStateChanged event for that. You can also display a screenshot or some other visual in the place of the hidden ones so that the resizing tile does not remain empty.

2) If you are using FluidContentControls, you can precisely time the moment when contents are swapped. E.g. when a tile is transitioning from maximized to minimized state, hide the large content as soon as the resizing begins (in the opposite case - show the large content only after the transition to maximized state has finished).

3) A third, not very visually pleasing optimization would be to disable the resizing animations in the TileView control via the IsItemsAnimationEnabled property.

I know the above suggestions are not an elegant solution to the problem, but that is what can be done at the moment. I hope until we are able to build some optimizations into the control, you will be able to achieve decent performance with the some of my suggestions.

Best wishes,
Tihomir Petkov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Abhilash]

Hi,
I liked this control. The data binding feature is good. But when I use DataPager, the first page comes nicely but all other pages are scrambled. Why is it so? Is there a fix for this?

[Tihomir Petkov]

Hi Abhilash,

There is currently a known issue affecting the initial rendering of the TileViewItems in certain scenarios, but I will need to see your code before judging if you have encountered the same issue or the problem is something else. Can you please provide sample code that reproduces the problem you are reporting or at least explain with more details what exactly you are doing?

Greetings,
Tihomir Petkov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[ticcoid]

hello,

very nice example but now i try to bind hierarchical business logic to the tileview. for example your class product has another collections attribute. how could i bind this in your application?

i tried so many things but i have no idea.

[Tina Stancheva]

Hello ticcoid,

I modified the example to illustrate how to use HierarchicalDataTemplate to bind the RadTileView to hierarchical data items. Please take a look at it and let me know if this is what you had in mind.

All the best,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[ticcoid]

hey tina,

thank you, this is what i searched for. thank you very much.