RadFluidContentControl doesn't switch to SmallContent

7 posts, 0 answers
  1. Lennart
    Lennart avatar
    4 posts
    Member since:
    Mar 2016

    Posted 18 Mar Link to this post

    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?

  2. Kiril Vandov
    Admin
    Kiril Vandov avatar
    324 posts

    Posted 22 Mar Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Lennart
    Lennart avatar
    4 posts
    Member since:
    Mar 2016

    Posted 22 Mar in reply to Kiril Vandov Link to this post

    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>

     

  5. Lennart
    Lennart avatar
    4 posts
    Member since:
    Mar 2016

    Posted 22 Mar in reply to Lennart Link to this post

    Sorry, can't edit my post. I meant to say that I "can't get the transition from normal to small to work"
  6. Dinko
    Admin
    Dinko avatar
    206 posts

    Posted 25 Mar Link to this post

    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.
  7. Dinko
    Admin
    Dinko avatar
    206 posts

    Posted 28 Mar Link to this post

    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.
  8. Lennart
    Lennart avatar
    4 posts
    Member since:
    Mar 2016

    Posted 29 Mar in reply to Dinko Link to this post

    Hello Dinko,

     

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

Back to Top
UI for WPF is Visual Studio 2017 Ready