RadFluidContentControl doesn't switch to SmallContent

[Lennart]

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?

[Kiril Vandov]

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

[Lennart]

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>

 

[Lennart]

Sorry, can't edit my post. I meant to say that I "can't get the transition from normal to small to work"

[Dinko | Tech Support Engineer]

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

[Dinko | Tech Support Engineer]

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

[Lennart]

Hello Dinko,

 

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