RadSlideHubTile Visible even if container isn't

5 posts, 0 answers
  1. Nuno
    Nuno avatar
    4 posts
    Member since:
    Sep 2014

    Posted 12 Sep 2014 Link to this post

    So that, is my predicament at the moment.

    I have a page with a dinamic grid set up, that has a row with a listbox, that can be hidden by setting height to zero while another row grows, so it reveals another state.

    The listbox has been altered to have RadSlideHubTile as the ItemTemplate, inside a RadWrapPanel as the ItemPanel, and it works perfectly.

    However, whenever I activate the storyboard, that hides one area to open another, the animation flows correctly, but when it's completed, the RadSlideHubTile pop into view again, even if both the GridRow and the Listbox have a height of 0. Only by completly hiding the Listbox do they dissapear, but it makes for a shoddy animation.

    What is forcing the HubTile into view? I tried setting the tiles IsFrozen as true, they do not longer animate but are still in view. How can I disable this behaviour?
  2. Nuno
    Nuno avatar
    4 posts
    Member since:
    Sep 2014

    Posted 15 Sep 2014 Link to this post

    Well after saying a few bad words to the computer, and a coffee later, I got it to work.

    I noticed that they where indeed "hiding" while the container was being resized, only after the container height was set to 0 they would appear again, so I added one animation where at the 90% mark of the animation the visibility of the control would be set to Collapsed, that way they would not flicker into existence again.

    Here's a xaml sample for anyone that may encounter this issue in the future.

    <Storyboard x:Name="LogInOpenStoryboard">
         <!-- Closes Top -->
         <DoubleAnimation
             To="0" Duration="00:00:1"
             Storyboard.TargetName="NewsGrid"
             Storyboard.TargetProperty="Height" />
     
         <!-- Opens Bottom -->
         <DoubleAnimation x:Name="LogInGridOpenAnimation"
             To="600" Duration="00:00:1"
             Storyboard.TargetName="LogInGrid"
             Storyboard.TargetProperty="Height">
             <DoubleAnimation.EasingFunction>
                 <BounceEase Bounces="2" EasingMode="EaseOut"
                          Bounciness="10" />
             </DoubleAnimation.EasingFunction>
         </DoubleAnimation>
     
    <!-- This is the animation that solves the issue -->
         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SourceList" Storyboard.TargetProperty="Visibility" Duration="00:00:1">
             <DiscreteObjectKeyFrame KeyTime="00:00:00.90" Value="Collapsed"/>
         </ObjectAnimationUsingKeyFrames>
     
     </Storyboard>


  3. DevCraft banner
  4. Nuno
    Nuno avatar
    4 posts
    Member since:
    Sep 2014

    Posted 15 Sep 2014 Link to this post

    Added 2 SWF vids recorded using Jing, to showcase the issue, and the fixed version using the xaml provided.

    Prolematic - http://1drv.ms/1tVXXOr

    Fixed - http://1drv.ms/1s8WuOJ


    In any case, it is a great control, this issue just caught me by surprise.
  5. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 17 Sep 2014 Link to this post

    Hi Nuno,

    The reason for this behavior is in RadDataBoundListBox's default value for MinHeight. It is 100, so right after the animation is complete, this value kicks in. As a workaround, you can set it to 1.

    Best regards,
    Ves
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Nuno
    Nuno avatar
    4 posts
    Member since:
    Sep 2014

    Posted 24 Sep 2014 in reply to Ves Link to this post

    Hello Ves.

    Sorry for the delay of the response, I haven't watched the thread since I got it to work.


    I was not using a RadDataBoundListBox, but rather a normal listbox with a custom item data template using the HubTile.

    I traced the issue to the fact that it has the CacheMode="BitmapCache" on the hubtile, meaning it would always draw it from memory untill the container actually changes the visibility property to Collapsed.

    You can reproduce it even with a normal Image control, set in in a container with CacheMode="BitmapCache" and then set the container height to 0 using a storyboard. Since the storeboard does not change the status of the visual control, it will still render as it is on the GPU cache.

    Hence why the solution I found is to set the ListBox visibility to Collapsed at 90% of the storyboard as to update all the child controls inside of it and they stop being rendered with the GPU cache values.
Back to Top
DevCraft banner