XAML - Simple animation for simple custom control

Question

I'm working on a Windows Store App with C# and ran into something where I can't imagine it's difficult, but I can't find out how to do it.

On my MainPage.xaml I created a user control: A StackPanel with horizontal orientation, with just an Image and a TextBlock inside. Like this:



    
    
        Lorem Ipsum

Which looks like this:

enter image description here

I use it as a custom kind of button to get to some sub-page. Now the thing is, there are no animations. I wanted to have the typical animations that ListItems have in a SplitView: shrink when pressed, grow back to normal when either released or when the pointer exits the virtual borders of the control. I couldn't find the animation declaration/definition associated with those ListItems (Common.StandardStyles.xaml Standard130ItemTemplate). But I found out (here) that there are predefined animations for that: PointerDownThemeAnimation and PointerUpThemeAnimation. But then it took me quite a while to find out how to apply them to the control. You might think the sample mentioned on this site specifically about those pointer theme animations (about C#) should help, but it leads to sample for HTML/Javascript animations. But I found solutions here, here and here.

So I needed Storyboards in the control resources, a name so the control can be targeted and event handlers in the code-behind.

Applied on my XAML it becomes this:



    
    
        Lorem Ipsum

Plus the additional event handlers in the code-behind:


private void Latest_AnimDown(object sender, PointerRoutedEventArgs e)
{
    pointerDownStoryboard.Begin();
}
private void Latest_AnimUp(object sender, PointerRoutedEventArgs e)
{
    pointerUpStoryboard.Begin();
}

This worked. But... as I have lots of those kind of user controls, I certainly don't want to add all that for every control. As mentioned before the Standard130ItemTemplate didn't help. So I thought about custom controls. I was hoping I could just define a MyStackPanel that's nothing but a StackPanel + the StoryBoards, and that the targeting to the x:Name would work and maybe I could put the event handlers in the LayoutAwarePage code-behind, so all others inherit from it.

I started looking for how to do that and found this sample of how to create custom controls: XAML user and custom controls sample.

There's the custom control in a Generic.xml:


xmlns:local="using:UserAndCustomControls">

And a code file, but not code-behind:


namespace UserAndCustomControls
{
    public sealed class BasicCustomControl : Control
    {
        public BasicCustomControl()
        {
            this.DefaultStyleKey = typeof(BasicCustomControl);
        }
    }
}

But the sample didn't contain anything about animations. So I played around with the example, trying to add the StoryBoards to the Border or to the ControlTemplate, adding event handlers to a self created Generic.xaml.cs code-behind. Nothing worked.

Then I found this, but wasn't sure about how and why to put an event handler into the BasicCustomControl class. I tried it anyway:

In Generic.xaml:


xmlns:local="using:UserAndCustomControls">

And in BasicCustomControl.cs:


protected override void OnPointerPressed(PointerRoutedEventArgs e)
{
    ((Storyboard)this.Resources["PointerDownThemeAnimation"]).Begin(this);
}

That didn't work. The Begin() method doesn't take arguments and without the argument the build succeeded, but I got an System.Runtime.InteropServices.COMException when clicking on the control.

Then I found this on SO: How to add XAML storyboard animation to a full blown WPF Custom Control in an XBAP?

This seems to be an interesting solution, but I don't get it. Here's also some description of VisualState stuff for custom controls, but again I don't know how to apply this to my needs: Quickstart: control templates

Now at this point I spent quite some time on this and I'm just thinking that for this simple thing - a simple, even pre-defined animation for a custom control -, there must be a simple solution. I hope I'm just overlooking something and it's not really that complicated.

To sum up the questions:

Where's the animation of the Standard130ItemTemplate defined and "attached" to the template?
Is there a control that I can "inherit" from that behaves the way I want (just those up/down animations on three events)?
Is there a way to create that kind of control, that I can inherit from - with XAML + Code?
Is there a way to do this just with XAML? Is this preferable to the former way?
Is there a simple example or tutorial on this?
Are there any collections of custom controls that I can download and use? I wasn't able to find any.

XAML - Simple animation for simple custom control

Answers (1)

Related Questions