Sliding overlaying panel

Question

I have an ItemsControl set up in my View and it generates items (duh!) which are clickable. When a user clicks/selects one of the items, I would like a panel/grid to slide from the left to the right and overlay (occupy the whole space). How can I implement this via MVVM with the slide animation? I know how to code it so that the grid appears with the correct data and all by setting a style DataTrigger but it is horrible as it just appears, no animation what so ever.

PS: since some will ask, I just set up a new bool item in my ViewModel like:

public bool ShowGrid
{
    get { return _showGrid; }
    set
    {
        _showGrid = value;
        NotifyOfPropertyChange(() => ShowGrid);
    }
}

And the DataTrigger just says: if ShowGrid = true then visibility="Visible". Nothing fancy.

How can this be coded so that when the DataTrigger knows to show/hide the grid, it slides it in/out ?

score 0 · Accepted Answer · edited May 23 '17 at 11:50

There are several variants of this implementation. I would have done so. I would create a attached dependency property, which was set to True, the event is triggered when you click on an item. In DataTrigger according to the dependency property, the animation would show sliding animation.

The sample of attached dependency property:

public static class PanelBehaviors
{
    public static void SetIsSliding(DependencyObject target, bool value)
    {
        target.SetValue(IsSlidingProperty, value);
    }

    public static readonly DependencyProperty IsSlidingProperty =
                                              DependencyProperty.RegisterAttached("IsSliding",
                                              typeof(bool),
                                              typeof(PanelBehaviors),
                                              new UIPropertyMetadata(false, OnIsSliding));

    private static void OnIsSliding(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        if (e.NewValue is bool && ((bool)e.NewValue) == true)
        {
            // You can do the operations on the object for which the property is set,
            // for example, for panel - set Visible
        }
    }
}

In behind code (for example: in event handler), you can set value for attached dependency property like that:

PanelBehaviours.SetIsSliding(SomeControl, Value // True or False);

Or in XAML:

<SomeControl local:PanelBehaviours.SetIsSliding="True" ... />

In OnIsSliding you can apply animation, but I would do it on the XAML side. Show panel can be done on the side by dependency properties or animation.

The sample of DataTrigger and Slide-animation:

<DataTrigger Binding="{Binding ElementName=MyPanel, Path=(local:MyDependencyClass.IsSliding), Mode=OneWay}" Value="True">
    <DataTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <!-- Here you can show the panel, or use additional animation -->
                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="MyPanel" Storyboard.TargetProperty="VerticalAlignment">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                        <DiscreteObjectKeyFrame.Value>
                            <VerticalAlignment>Bottom</VerticalAlignment>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.EnterActions>
</DataTrigger>

In WPF no animation alignment, the only thing that can come up - it ThicknessAnimation (using Margin). But you can use the DiscreteObjectKeyFrame to set the alignment. Above is a simple demonstration in which to Panel set VerticalAlignment in Bottom.

In principle, all of these options should not contradict the pattern MVVM.

Please see my examples of implementations with attached properties and alignment animations:

wpf ObjectAnimationUsingKeyFrames setting the left value

Animation limited by panel

How to clear the contents of a PasswordBox when login fails without databinding?

How to inherit Button behaviour in WPF style?

Quit application from a user Control