title: XAML - Simple animation for simple custom control
body: <p>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.</p>
  
  <p>On my <code>MainPage.xaml</code> I created a user control: A <code>StackPanel</code> with horizontal orientation, with just an <code>Image</code> and a <code>TextBlock</code> inside. Like this:</p>
  
  <pre><code>&lt;!-- language: lang-xml --&gt;
  &lt;StackPanel Width="300" Height="100" Orientation="Horizontal" Margin="0,0,0,20" Tapped="LoremIpsum_Tapped"&gt;
      &lt;Image Source="/Assets/pic.jpg" Margin="20"/&gt;
      &lt;TextBlock FontFamily="Segoe UI" FontSize="30" VerticalAlignment="Center"&gt;
          Lorem Ipsum
      &lt;/TextBlock&gt;
  &lt;/StackPanel&gt;
  </code></pre>
  
  <p>Which looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/sGQLI.png" alt="enter image description here"></p>
  
  <p>I use it as a custom kind of button to get to some sub-page. Now the thing is, there are <strong>no animations</strong>. I wanted to have the typical animations that <code>ListItem</code>s 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.<code>StandardStyles.xaml</code> <code>Standard130ItemTemplate</code>). But I found out (<a href="http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh452701.aspx#pointer" rel="nofollow noreferrer">here</a>) that there are predefined animations for that: <code>PointerDownThemeAnimation</code> and <code>PointerUpThemeAnimation</code>. 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 <a href="http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj649432.aspx" rel="nofollow noreferrer">this site specifically about those pointer theme animations</a> (about C#) should help, but it leads to <a href="http://code.msdn.microsoft.com/windowsapps/using-the-animation-787f3720/" rel="nofollow noreferrer">sample for HTML/Javascript animations</a>. But I found solutions <a href="http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/ab9e46ff-4a49-4edc-bf55-7504ed56350d" rel="nofollow noreferrer">here</a>, <a href="http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh452703.aspx" rel="nofollow noreferrer">here</a> and <a href="http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.pointerdownthemeanimation.aspx" rel="nofollow noreferrer">here</a>.</p>
  
  <p>So I needed <code>Storyboard</code>s in the control resources, a name so the control can be targeted and event handlers in the code-behind.</p>
  
  <p>Applied on my XAML it becomes this:</p>
  
  <pre><code>&lt;!-- language: lang-xml --&gt;
  &lt;StackPanel x:Name="LoremIpsum" Width="300" Height="100" Orientation="Horizontal" Margin="0,0,0,20" Tapped="LoremIpsum_Tapped" PointerPressed="LoremIpsum_AnimDown" PointerReleased="LoremIpsum_AnimUp" PointerExited="LoremIpsum_AnimUp"&gt;
      &lt;Image Source="/Assets/pic.jpg" Margin="20"/&gt;
      &lt;TextBlock FontFamily="Segoe UI" FontSize="30" VerticalAlignment="Center"&gt;
          Lorem Ipsum
      &lt;/TextBlock&gt;
      &lt;StackPanel.Resources&gt;
          &lt;Storyboard x:Name="pointerDownStoryboard"&gt;
              &lt;PointerDownThemeAnimation TargetName="LoremIpsum" /&gt;
          &lt;/Storyboard&gt;
          &lt;Storyboard x:Name="pointerUpStoryboard"&gt;
              &lt;PointerUpThemeAnimation TargetName="LoremIpsum" /&gt;
          &lt;/Storyboard&gt;
      &lt;/StackPanel.Resources&gt;
  &lt;/StackPanel&gt;
  </code></pre>
  
  <p>Plus the additional event handlers in the code-behind:</p>
  
  <pre><code>&lt;!-- language: lang-cs --&gt;
  private void Latest_AnimDown(object sender, PointerRoutedEventArgs e)
  {
      pointerDownStoryboard.Begin();
  }
  private void Latest_AnimUp(object sender, PointerRoutedEventArgs e)
  {
      pointerUpStoryboard.Begin();
  }
  </code></pre>
  
  <p>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 <code>Standard130ItemTemplate</code> didn't help. So I thought about custom controls. I was hoping I could just define a <code>MyStackPanel</code> that's nothing but a <code>StackPanel</code> + the <code>StoryBoard</code>s, 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.</p>
  
  <p>I started looking for how to do that and found this sample of how to create custom controls: <a href="http://code.msdn.microsoft.com/windowsapps/XAML-user-and-custom-a8a9505e" rel="nofollow noreferrer">XAML user and custom controls sample</a>.</p>
  
  <p>There's the custom control in a Generic.xml:</p>
  
  <pre><code>&lt;!-- language: lang-xml --&gt;
  xmlns:local="using:UserAndCustomControls"&gt;
  &lt;Style TargetType="local:BasicCustomControl"&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="local:BasicCustomControl"&gt;
                  &lt;Border
                      Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}"&gt;
                  &lt;/Border&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>And a code file, but not code-behind:</p>
  
  <pre><code>&lt;!-- language: lang-cs --&gt;
  namespace UserAndCustomControls
  {
      public sealed class BasicCustomControl : Control
      {
          public BasicCustomControl()
          {
              this.DefaultStyleKey = typeof(BasicCustomControl);
          }
      }
  }
  </code></pre>
  
  <p>But the sample didn't contain anything about animations. So I played around with the example, trying to add the <code>StoryBoard</code>s to the Border or to the ControlTemplate, adding event handlers to a self created Generic.xaml.cs code-behind. Nothing worked.</p>
  
  <p>Then I found <a href="http://social.msdn.microsoft.com/forums/en-US/wpf/thread/89e96adc-f49c-4f99-8d6d-e9d15ea40b98" rel="nofollow noreferrer">this</a>, but wasn't sure about how and why to put an event handler into the <code>BasicCustomControl</code> class. I tried it anyway:</p>
  
  <p>In <code>Generic.xaml</code>:</p>
  
  <pre><code>&lt;!-- language: lang-xml --&gt;
  xmlns:local="using:UserAndCustomControls"&gt;
  &lt;Style TargetType="local:BasicCustomControl"&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="local:BasicCustomControl"&gt;
                  &lt;Border x:Name="Border"
                      Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}"&gt;
                      &lt;Border.Resources&gt;
                          &lt;Storyboard x:Name="pointerDownStoryboard"&gt;
                              &lt;PointerDownThemeAnimation TargetName="Border" /&gt;
                          &lt;/Storyboard&gt;
                          &lt;Storyboard x:Name="pointerUpStoryboard"&gt;
                              &lt;PointerUpThemeAnimation TargetName="Border" /&gt;
                          &lt;/Storyboard&gt;
                      &lt;/Border.Resources&gt;
                  &lt;/Border&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>And in <code>BasicCustomControl.cs</code>:</p>
  
  <pre><code>&lt;!-- language: lang-cs --&gt;
  protected override void OnPointerPressed(PointerRoutedEventArgs e)
  {
      ((Storyboard)this.Resources["PointerDownThemeAnimation"]).Begin(this);
  }
  </code></pre>
  
  <p>That didn't work. The <code>Begin()</code> 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.</p>
  
  <p>Then I found this on SO: <a href="https://stackoverflow.com/questions/205751/how-to-add-xaml-storyboard-animation-to-a-full-blown-wpf-custom-control-in-an-xb">How to add XAML storyboard animation to a full blown WPF Custom Control in an XBAP?</a></p>
  
  <p>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: <a href="http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465374.aspx" rel="nofollow noreferrer">Quickstart: control templates</a></p>
  
  <p>Now at this point I spent quite some time on this and I'm just thinking that for this <strong>simple thing</strong> - a simple, even pre-defined animation for a custom control -, <strong>there must be a simple solution</strong>. I hope I'm just overlooking something and it's not really that complicated.</p>
  
  <p>To sum up the questions:</p>
  
  <ol>
  <li>Where's the animation of the <code>Standard130ItemTemplate</code> defined and "attached" to the template?</li>
  <li>Is there a control that I can "inherit" from that behaves the way I want (just those up/down animations on three events)?</li>
  <li>Is there a way to create that kind of control, that I can inherit from - with XAML + Code?</li>
  <li>Is there a way to do this just with XAML? Is this preferable to the former way?</li>
  <li>Is there a simple example or tutorial on this?</li>
  <li>Are there any collections of custom controls that I can download and use? I wasn't able to find any.</li>
  </ol>