CODEWITHSUNDEEP
wpf
AkselK
AkselK

Reputation: 2593

Showing the user that an item moved to the bottom of a list

I have a GridView which contains a lot of elements showing certain actions performed by the system.

The items are ordered by priority, meaning the topmost items are the first actions to be performed. An action may fail, in which case the user have the option to click retry. This moves the job to the bottom of the list.

Currently I'm just removing the item, and then adding it to the list again. This makes the item just disappear, and reappear in the bottom of the list (which may be so long it's below the visible area).

If the user is unaware of this behaviour, he may miss that it happened. I need to show this to the user.

I'm thinking some kind of animation that visibly moves the item down, or one that makes it clear that it's disappearing from it's place, but I don't see how I can use the WPF animations to do this.

Upvotes: 1

Views: 44

Answers (1)

Vinny
Vinny

Reputation: 316

How about fading the item out before removing and re-adding it? At least this way the user sees that the item is disappearing.

Example below implemented in PreviewMouseDoubleClick event handler. This fades out the item over a span of 1 second.

    private void OnListViewPreviewMouseDoubleClick(object sender, MouseButtonEventArgs e)
    {
        var item = (ListViewItem)sender;
        var da = new DoubleAnimation
        {
            From = 1.0, 
            To = 0.0, 
            Duration = new Duration(TimeSpan.FromSeconds(1))
        };
        da.Completed += (o, args) =>
        {
            var content = item.Content;
            items.Remove(content);
            items.Add(content);
        };
        item.BeginAnimation(ListViewItem.OpacityProperty, da);
    }

EDIT:

As for MVVM here is an examle of defining the animation in XAML.

        <ListView.Resources>
            <Storyboard x:Key="FadeOut" Completed="OnFadeOutCompleted">
                <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:1" From="1.0" To="0.0"/>
            </Storyboard>
            <Style TargetType="ListViewItem">
                <Style.Triggers>
                    <EventTrigger RoutedEvent="PreviewMouseDoubleClick">
                        <BeginStoryboard Storyboard="{StaticResource FadeOut}" x:Name="BeginStoryboard" />
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </ListView.Resources>

Note - this still registers an event handler on Storyboard.Completed to actually remove the item from the collection

Completed="OnFadeOutCompleted"

IMO this doesn't violate MVVM because the entire process of Animation is strictly an implementation of the View. The code-behind would just remove the item via the ViewModel.

Upvotes: 1

Related Questions