Telerik Forums / UI for Silverlight Forum / TileView /

Thresholds for the RadFluidContentControl

Telerik UI for Silverlight
Resources Buy Try

13 posts, 1 answers

sofi sofi

19 posts

Member since:
Jul 2009

Posted 05 Nov 2009 Link to this post

Hi, Telerik!
I have some problems with TileView! Could you please explain me, what exactly means Thresholds? I think, that i misunderstand their meaning! And what values should be,if TileView items count , for example, is 20 or more. Can you help me in this question, please?
Answer
Tihomir Petkov
Admin

576 posts

Posted 05 Nov 2009 Link to this post

Hello sofi,

The RadFluidContentControl has three content properties, only one of which is visible at any given time. The way the visible content is changed is determined by the four available threshold properties. The names of these threshold properties are hopefully descriptive enough and signify the transition between two contents. E.g. the SmallToNormalThreshold is used to determine when the normal content will be shown, in the cases when the SmallContent is currently visible. Alternatively, the NormalToSmallThreshold property controls when the normal content will be hidden and the SmallContent shown. I will give a brief example:

Let's say you have three visual elements that you want to show depending on the available space - SmallContent(200x200px), NormalContent(400x400px), LargeContent(600x600px). We set the FluidContentControl's corrsponding properties to hold our visual elements. Next, we need to set the threshold properties. Below are suitable values with brief explanations:

SmallToNormalThreshold - (400, 400): we set it to the size of our normal content, which means that as soon as enough space is available to render our normal content, it will be shown. This threshold is used when there is relatively little available space and our small content is shown and the available space increases - when the space reaches the threshold, the normal content is displayed and the SmallContent is hidden.

NormalToSmallThreshold - (399, 399): we set it to a size that is smaller than the SmallToNormalThreshold in order to avoid ambiguous situations. This threshold is used when the normal content is visible and the available space is decreasing. Thus, we set this threshold to a value just below the size of our normal content, which will hide it as soon as the available size is not enough to properly render the normal content.

NormalToLargeThreshold - (600, 600): the reasoning here is the same as for the SmallToNormalContent.

LargeToNormalContent - (599, 599): the reasoning here is the same as for the NormalToSmallContent.

In case you need to specify only the width or height of a threshold, you can set the other value to 0 - this way it will be disregarded. Also, you are by no means restricted to use the RadFluidContentControl within a RadtileView.

In the Q3 release we added a ContentChangeMode property which allows you to manually change the State of the control, and thus the visible content. When you set the property to "Manual", the thresholds are not considered and you are responsible for switching the visible content. Setting the property to "Automatic" makes the control use the thresholds instead.

I hope I was able to make things clearer. Let me know if you have any questions.

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.
sofi sofi

19 posts

Member since:
Jul 2009

Posted 05 Nov 2009 Link to this post

Thanks a lot, Tihomir! You helped me greatly!
Tihomir Petkov
Admin

576 posts

Posted 05 Nov 2009 Link to this post

Hello Sofi,

I am glad I was able to help. Let me know if you have any other questions.

Sincerely yours,
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.

Michael

15 posts

Member since:
Dec 2009

Posted 01 Mar 2010 Link to this post

Hello,

I'm hoping you can help me with this. I'm able to use the RadFluidContentControl to do what I need, however I get some sort of a weird after effect when making any transitions from one size to another. Here is my code.

As you can see, the chartMix.png image should only appear when tansitioning down to small or anything with a width less than 300. However when transitioning from normal (width over 300) to large (width over 300) the chartMix.png image will momentarily flash during the resize. Is there something I'm doing wrong here?

    
                                RadTileViewItem tile = new RadTileViewItem();  
        
                                tile.Header = reportChartData.ChartReportName;  
        
                                RadFluidContentControl contentControl = new RadFluidContentControl();  
        
                                contentControl.NormalToSmallThreshold = new Size(300, 0);  
        
                                contentControl.SmallToNormalThreshold = new Size(300, 0);  
        
                                Grid sp = new Grid() { };  
        
                                System.Windows.Media.Imaging.BitmapImage bmi =   
        
                                    new System.Windows.Media.Imaging.BitmapImage(  
        
                                        new Uri("Images/chartMix.png", UriKind.Relative)  
        
                                        );  
        
                                sp.Children.Add(  
        
                                    new Image() {   
        
                                        StretchStretch= Stretch.None,   
        
                                        Source = bmi,   
        
                                        VerticalAlignmentVerticalAlignment = VerticalAlignment.Center,   
        
                                        HorizontalAlignmentHorizontalAlignment = HorizontalAlignment.Center   
        
                                    });  
        
                                contentControl.SmallContent = sp;                      
        
                                contentControl.Content = currentChart;  
        
                                tile.Content = contentControl;  
        
                                tileView.Items.Add(tile);

Tihomir Petkov
Admin

576 posts

Posted 02 Mar 2010 Link to this post

Hello Michael,

The problem may be in that you set only two of the threshold properties - this way the default values are used for the thresholds you don't specify and these values are probably not good for your case. Can you please set the remaining two thresholds and see if the problem persists?

Regards,
Tihomir Petkov
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.
Michael

15 posts

Member since:
Dec 2009

Posted 02 Mar 2010 Link to this post

Much better! Thank you!
Tihomir Petkov
Admin

576 posts

Posted 03 Mar 2010 Link to this post

Hello Michael,

Yes, the threshold values may be tricky. I'm glad I was able to help.

Sincerely yours,
Tihomir Petkov
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.
Eric Schoenholzer

138 posts

Member since:
Mar 2004

Posted 31 Mar 2010 Link to this post

Hi,

Is there a way to use only two contents?

For example only the SmallContent and LargeContent?

Perhaps setting the threshold values to an impossible value or disabling a content?

Thanks

Eric
Tihomir Petkov
Admin

576 posts

Posted 01 Apr 2010 Link to this post

Hello Eric,

You should not have any problems implementing this scenario. You only need to set two of the content properties of the FluidContentControl and set all four of the threshold properties to the same value - the size at which you need your content to be switched. Below is an example:

<telerik:RadFluidContentControl SmallToNormalThreshold="240, 120"

                                            NormalToSmallThreshold="240, 120"

                                            NormalToLargeThreshold="240, 120"

                                            LargeToNormalThreshold="240, 120">

                <telerik:RadFluidContentControl.SmallContent>

                    <Rectangle Fill="Red" Height="100" Width="100" />

                </telerik:RadFluidContentControl.SmallContent>



                <telerik:RadFluidContentControl.LargeContent>

                    <Rectangle Fill="Blue" Height="300" Width="300" />

                </telerik:RadFluidContentControl.LargeContent>

            </telerik:RadFluidContentControl>

Let me know if you have any difficulties.

All the best,
Tihomir Petkov
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.

Eric Schoenholzer

138 posts

Member since:
Mar 2004

Posted 01 Jun 2010 Link to this post

Thanks, I tried it and there are some problems.

    
             <DataTemplate x:Key="ListItemTemplate">  
        
                         <controls:RadFluidContentControl telerikAnimation:AnimationManager.IsAnimationEnabled="True"   
        
                                                            SmallToNormalThreshold="5, 0" 
        
                                                            NormalToSmallThreshold="5, 0" 
        
                                                            NormalToLargeThreshold="200, 0" 
        
                                                            LargeToNormalThreshold="200, 0">  
        
                            <controls:RadFluidContentControl.Content> 
        
                                <Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch">  
        
                                    <TextBlock Text="{Binding Name}"  /> 
        
                                </Border> 
        
                                </controls:RadFluidContentControl.Content> 
        
                            <controls:RadFluidContentControl.LargeContent> 
        
                                <Grid> 
        
                                    <ListBox x:Name="listbox2" ItemsSource="{Binding DataSerie}" DisplayMemberPath="Entry"></ListBox> 
        
                                </Grid> 
        
                            </controls:RadFluidContentControl.LargeContent> 
        
                        </controls:RadFluidContentControl> 
        
                    </DataTemplate>

I want to use the Normal and LargeContent.
Code: Do you see something wrong?
When I use this template with two others different tiles, only tile seems to be flickering, switching from Normal to Large and so on, also when it is maximized (>> 200). Same happens with a Grid as Content, but not with a Chart. The underlying data doesn't seem to changing.

Thanks
Eric

Kiril Stanoev
Admin

1512 posts
Posted 04 Jun 2010 Link to this post

Hi Eric,
The flickering is caused by the 0 (zero) in the thresholds. Try increasing the height to at least 1 (one) to avoid the flickering. I've attached a sample project showing how to switch between normal and large content. The key here is to play with the thresholds in order to achieve the desired scenario. Have a look at the project and let me know if you have further questions or comments on the topic.
Regards,
Kiril Stanoev
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.

id256112.zip
Eric Schoenholzer

138 posts

Member since:
Mar 2004

Posted 06 Jun 2010 Link to this post

Hi Kiril,
Thanks for your answer.
So the adivse of Thiomir is wrong (see post http://www.telerik.com/community/forums/silverlight/tileview/thresholds-for-the-radfluidcontentcontrol.aspx#992133), which says:
"In case you need to specify only the width or height of a threshold, you can set the other value to 0 - this way it will be disregarded.".

Eric

Thresholds for the RadFluidContentControl

sofi sofi

Tihomir Petkov

sofi sofi

Tihomir Petkov

Michael

Tihomir Petkov

Michael

Tihomir Petkov

Eric Schoenholzer

Tihomir Petkov

Eric Schoenholzer

Kiril Stanoev

Eric Schoenholzer