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

RadFluidContentControl doesn't switch to SmallContent

6 Answers 33 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Lennart
Top achievements
Rank 1
Lennart asked on 18 Mar 2016, 01:34 PM

Hi,

 

I'm currently evaluating the RadFluidContentControl for our application, but have run into two issues. Basically, I just want to switch between the states as soon as the LargeContent is too large for the rendered area. The documentation says this is done automatically ("Alternatively, the control will hide the large content (and show the normal content) as soon as the available size is not enough to properly render the large content."). In my example, this doesn't really work. The normal content is only displayed if the large content is halfway clipped (via resizing the window with the mouse). The second issue is that the content is stretched to the full height of the window, although I would expect to just limit it to its minimum size if I set the Height to "Auto".

 

Here's my code:

 

<telerik:RadFluidContentControl Height="Auto">          
 
            <telerik:RadFluidContentControl.Content>
 
            <StackPanel Orientation="Vertical" Background="DeepSkyBlue">
                <Grid Margin="0,0,0,5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <DatePicker/>
                    <TextBlock
                    Grid.Column="1"
                    Margin="9,0"
                    VerticalAlignment="Center"
                    Text="until" />
                </Grid>
                <DatePicker />
            </StackPanel>
 
        </telerik:RadFluidContentControl.Content>
 
            <telerik:RadFluidContentControl.LargeContent>
            <StackPanel Margin="0,0,0,2" Orientation="Horizontal" Background="GreenYellow">
                <DatePicker Margin="3" />
                <TextBlock
                Margin="3"
                VerticalAlignment="Center"
                Text="until" />
                <DatePicker Margin="3" />
            </StackPanel>
        </telerik:RadFluidContentControl.LargeContent>
             
             
</telerik:RadFluidContentControl>

 

What am I doing wrong?

6 Answers, 1 is accepted

Sort by
0
Kiril Vandov
Telerik team
answered on 22 Mar 2016, 12:05 PM
Hello Lennart,

The RadFluidContentControl exposes properties which control when the control to enter in from Normal to Small and from Normal to Large content  (NormalToLargeThreshold="500 500" NormalToSmallThreshold="300 300"). Based on the height/width of your Content you can set them in order to change the state once the remaining space is changed, this is explained in the help article that you mentioned in your previous post.
As for your second question the you are using StackPanels to display your content which are automatically Stretched vertically and Horizontally taking the entire space, you can simply change their Horizontal/Vertical Alignment properties to remove the stretch effect.

I hope this information helps.

Kind regards,
Kiril Vandov
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Lennart
Top achievements
Rank 1
answered on 22 Mar 2016, 01:59 PM

Hi Kiril,

 

so that means I have to set both Threshold properties anyway? I understood the docs that, if omitted, the transitions occur when there is not enough space for the respective larger control. I'm trying to avoid setting fixed sizes because I have (in our case) no way of knowing how large exactly a control is. I just have three templates (small, medium, large) which should change as soon as e.g. the width of the window is too small to completely display a particular control.

However, even if I use these thresholds I can't really reproduce my desired behaviour. The docs state that if I use "0" for either width or height, the value is ignored. I slightly modified the sample from your docs, and get the transition from normal to small to work:

 

<telerik:RadFluidContentControl NormalToSmallThreshold="400 0" NormalToLargeThreshold="600 0">
     
    <telerik:RadFluidContentControl.SmallContent>
        <Border Background="LightBlue" >
            <TextBlock Text="Small Content" />
        </Border>
    </telerik:RadFluidContentControl.SmallContent>
 
    
    <telerik:RadFluidContentControl.Content>
        <Border Background="LightGreen" >
            <TextBlock Text="Normal Content" />
        </Border>
    </telerik:RadFluidContentControl.Content>
 
    
    <telerik:RadFluidContentControl.LargeContent>
        <Border Background="LightYellow">
            <TextBlock Text="Large Content" />
        </Border>
    </telerik:RadFluidContentControl.LargeContent>
</telerik:RadFluidContentControl>

 

0
Lennart
Top achievements
Rank 1
answered on 22 Mar 2016, 02:00 PM
Sorry, can't edit my post. I meant to say that I "can't get the transition from normal to small to work"
0
Dinko
Telerik team
answered on 25 Mar 2016, 12:57 PM
Hello Lennart,

We need more time to investigate your scenario. We will contact as soon as we have more information about your case.

Thanks in advance for your cooperation.

Regards,
Dinko
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Dinko
Telerik team
answered on 28 Mar 2016, 10:47 AM
Hello Lennart,

After additional investigation on our side we were able to reproduce the reported behavior. 

Currently, the fluid content control depends on both Width and Height of the threshold properties when it comes to the normal to small content transition. We will check the behavior described in the help documentation and update it accordingly to the control behavior if necessary.

To resolve this you can change the state from normal to small using the NormalToSmallThreshold property by specifying the Width and the Height values. In your case you can set the Height to some big dummy value. 
<telerik:RadFluidContentControl NormalToSmallThreshold="400 1400" NormalToLargeThreshold="600 0" />

Can you try this approach and let us know if this works for you.

Regards,
Dinko
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Lennart
Top achievements
Rank 1
answered on 29 Mar 2016, 06:08 AM

Hello Dinko,

 

yes that works, that's the solution I also used myself while tinkering with the control

Tags
TileView
Asked by
Lennart
Top achievements
Rank 1
Answers by
Kiril Vandov
Telerik team
Lennart
Top achievements
Rank 1
Dinko
Telerik team
Share this question
or