Thresholds for the RadFluidContentControl

13 posts, 1 answers
  1. sofi sofi
    sofi sofi avatar
    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?
  2. Answer
    Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    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.
  3. DevCraft banner
  4. sofi sofi
    sofi sofi avatar
    19 posts
    Member since:
    Jul 2009

    Posted 05 Nov 2009 Link to this post

    Thanks a lot, Tihomir! You helped me  greatly!
  5. Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    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.
  6. Michael
    Michael avatar
    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); 
  7. Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    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.
  8. Michael
    Michael avatar
    15 posts
    Member since:
    Dec 2009

    Posted 02 Mar 2010 Link to this post

    Much better!  Thank you! 
  9. Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    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.
  10. Eric Schoenholzer
    Eric Schoenholzer avatar
    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

  11. Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    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.
  12. Eric Schoenholzer
    Eric Schoenholzer avatar
    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
  13. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    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.
  14. Eric Schoenholzer
    Eric Schoenholzer avatar
    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
Back to Top
DevCraft banner