I want to use animation in the content template(the example is click event,actually may be other event even custom event),so is it possible to passing the event to content template?
<Button Content="Hello">
<!--work-->
<!--<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To=".5" Duration="0:0:0.500"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>-->
<!--not work-->
<Button.ContentTemplate>
<DataTemplate>
<Grid x:Name="Grid">
<TextBlock Text="{Binding}"/>
</Grid>
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Grid" Storyboard.TargetProperty="Opacity" From="1" To=".5" Duration="0:0:0.500"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Button.ContentTemplate>
</Button>
You must move the trigger either to the ControlTemplate
or to a Style
.
If you are only interested in animating the button's opacity (and not the opacity of a particular template child, simply move the trigger to the Button:Triggers
collection.
Note, if you don't add any special elements to the DataTemplate
, it is completely redundant. The Button
will implicitly add a TextBlock
to host the text content
Unless you want to change the layout or override the default layout behavior you should implement the trigger in a Style
or add it directly to the Button.Triggers
collection:
Trigger in Button.Triggers
<Button Content="Hello!">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="1"
To=".5"
Duration="0:0:0.500" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
Trigger in Style
<Button Content="Hello!">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="1"
To=".5"
Duration="0:0:0.500" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Trigger in ControlTemplate
Note, this solution requires to implement the default behavior of the control for example mouse over effects.
<Button Content="Ah dutty and ah like it so!">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="1"
To=".5"
Duration="0:0:0.500" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>