RadSlideHubTile Visible even if container isn't

[Nuno]

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?

[Nuno]

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>

[Nuno]

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.

[Ves]

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

 

 

[Nuno]

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.