Question

I have a DockPanel and a Button inside it. I want to animate (for example, fade in/out) the button by event (for example, mouse hovering) in the dock panel.

EDIT

Well, I found the solution only for nontemplated/nonstyled case (see below). How to bring it to reusable way?

<DockPanel>
  <Button> 
    Name="aaa"
  </Button>

  <DockPanel.Triggers>
    <EventTrigger RoutedEvent="DockPanel.MouseEnter">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Duration="0:0:0.100" 
            To="1" 
            Storyboard.TargetName="aaa"
            Storyboard.TargetProperty="Opacity"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="DockPanel.MouseLeave">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Duration="0:0:0.100" 
            To="0" 
            Storyboard.TargetName="aaa"
            Storyboard.TargetProperty="Opacity"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>    
  </DockPanel.Triggers>

</DockPanel>

Answer 1

Hmm, the only idea I have is to wrap the Controls you want to show in a ContentControl. Then you may only need to create a template for the ContentControl.

EDIT

ContentPresenter => ContentControl

EDIT2

According to the edit of the TO:

If you would like to take an approach with events, which is a proper but IMHO less elegant approach, you would have to implement these methods in the code behind of your view. e.g.

private void OnMouseOver(object sender, MouseEventArgs e)
{
  var control = sender as Control; // perhaps you could cast to another base class
  if (control == null)
    return;
  // implement the behavior you like
  // ...
}

The biggest problem, and IMHO the reason why is less elegant, you have to add and remove the method to each Control which is added to the DockPanel in code behind.

If you’re not familiar with templating it may be the better solution for you.