Animation for showing/hiding elements

Comments (3)

Posted 14 years ago by Actipro Software Support - Cleveland, OH, USA

Hi Cameron,

We did a quick test here and it appears to work. When you hide an item, it disappears and the other elements are moved into their new location.

If you've changed the AnimatedStackPanel.ArrangeAnimation, then you'd just need to ensure that ArrangeAnimation.ArrangeUpdateAnimation includes the Size flag. This tells the panel that changes in the size of an element should be animated.

When toggling from visible to collapsed, it's size is effectively set to "0,0". So the other children are repositioned. When toggling from collapsed to visible, it's size goes from "0,0" to it's desired size. Again, the children are repositioned.

If you were expecting a fade in/out animation, then that's not something we could do if you are toggling an elements Visibility property.

If you are seeing a different behavior, please put together a small sample project that reproduces the issue and email it over to our support address. Be sure to remove any executable files from the zip archive, or rename the extension.

Actipro Software Support

Posted 14 years ago by Cameron MacFarland - Senior Software Engineer, Orelogy Geotechnical

Ah, I was expecting a fade in/out animation. I see now that when the item appears it looks like it's fading in because of the other items moving out of the way, but it's not really fading in.

Is it possible to get a fade in/out animation with either a custom animation or custom panel?

Here's a sample that mimics what I'm trying to do.

<Window x:Class="VisibilitySample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="boolToVis" />
    </Window.Resources>    
    <StackPanel>
        <ToggleButton x:Name="toggle" Content="Show/Hide" IsChecked="True" />
        <ListBox>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <views:AnimatedStackPanel />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBoxItem>Item 1</ListBoxItem>
            <ListBoxItem Visibility="{Binding ElementName=toggle, Path=IsChecked, Converter={StaticResource boolToVis}}">Item 2</ListBoxItem>
            <ListBoxItem>Item 3</ListBoxItem>
        </ListBox>
    </StackPanel>
</Window>

Posted 14 years ago by Actipro Software Support - Cleveland, OH, USA

Hi Cameron,

Once you set the visiblity to collapsed, there's nothing we or you could do to fade it in or out. There are some solutions out there that will intercept the setting of Visibility on the element, and fade it in/out before commiting the new visibility value. One such example can be found here and the follow on article here.

The problem with this approach is the other elements will not move into their new location until after the element is faded out. Because until the visibility value is committed it will continue to use it's space. You may be able to set it's Width or Height to 0, to have the element fade out and shrink at the same time to fix this.

All in all, it's probably easier to build a ListCollectionView that contains your items and is bound to the Listbox.ItemsSource. You can then use the ListCollectionView.Filter property to remove items you don't want to see. You can call ListCollectionView.Refresh if the filter logic changes. Depending on the number of items, this may not be the best approach though.

Actipro Software Support

The latest build of this product (v24.1.4) was released 1 month ago, which was after the last post in this thread.

Comments (3)

Add Comment