Search code examples
wpfwpf-animation

wpf: is there a way to passing button click event to content template?


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>

Solution

  • 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>