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

Thresholds for the RadFluidContentControl

12 Answers 348 Views

TileView

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

12 Answers, 1 is accepted

Accepted

answered on 05 Nov 2009, 03:44 PM

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.

answered on 01 Mar 2010, 10:20 PM

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);

answered on 01 Apr 2010, 11:40 AM

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.

answered on 01 Jun 2010, 03:53 PM

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

answered on 04 Jun 2010, 01:16 PM

id256112.zip

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Thresholds for the RadFluidContentControl

12 Answers, 1 is accepted