WPF(.Net Core) Trigger multiple EventTrigger (From the children) of a Grid/StackPanel at the same time

Question

I have a WPF-app which has a grid. Inside the grid there is a StackPanel with one Image and one TextBlock Element. When I use the Event Handler "MouseOver" of the grid/StackPanel, I want to increase the size of the picture (ThicknessAnimationUsingKeyFrames) and the FontSize of the TextBlock (DoubleAimation) at the same time (everything inside the StackPanel).

The problem is that I am not able to use the Event Handler of the grid to run the EventTrigger from the Children of the grid (Image and TextBlock.

I also tried to create a custom RoutedEvent but since Tunneling Events and Bubbling Events can't reach the children (no broadcast) it is not possible.

Used the whole day to find a similar problem and solution. But no success. Can anybody help me? I don't know what to do. There must be a solution.

Here is my Grid:

<Grid Name="grid_Settings" Grid.Row="0" Grid.Column="5"   MouserEnter="Grid_Settings_MouseEnter>

  <StackPanel>
    <Image Name="image_Settings" Margin="45,10,45,0"       RenderTransformOrigion = "0.5, 0.5">
      <Image.Triggers>
        <EventTrigger RoutedEvent="**MouseEnter**">
          <BeginStoryboard>
            <Storyboard>
              <ThicknessAnimationUsingKeyFrames  Storyboard.TargetProptery="Margin" BeginTime ="0:0:0">
                <SplineThicknessKeyFrame KeyTime="0:0:0" Value="45,10,45,0"></SplineThicknessKeyFrame>
                <SplineThicknessKeyFrame KeyTime="0:0:0.2" Value="35,10,35,0"></SplineThicknessKeyFrame>
              </ThicknessAnimationUsingKeyFrames>
            </Storyboard>
         </BeginStoryboard>
        </EventTrigger>

        <EventTrigger RoutedEvent="MouseLeave">
         <BeginStoryboard>
           <Storyboard>
             <ThicknessAnimationUsingKeyFrames Storyboard.TargetProptery="Margin" BeginTime ="0:0:0">
               <SplineThicknessKeyFrame KeyTime="0:0:0" Value="35,10,35,0"></SplineThicknessKeyFrame>
               <SplineThicknessKeyFrame KeyTime="0:0:0.2" Value="45,10,45,0"></SplineThicknessKeyFrame>
             </ThicknessAnimationUsingKeyFrames>
           </Storyboard>
        </BeginStoryboard>
       </EventTrigger>
    </Image.Triggers>
   </Image>

   <TextBlock Name="textBlock_Settings" FontSize="15" Margin="15" Text="Options">
     <TextBlock.Triggers>
       <EventTrigger RoutedEvent="MouseEnter">
         <BeginStoryboard>
           <Storyboard>
             <DoubleAnimation Duraiton="0:0:.5" Storyboard.TargetProperty="FontSize" To="20"></DoubleAnimation>
           </Storyboard>
         </BeginStoryboard>
       </EventTrigger>

       <EventTrigger RoutedEvent="MouseLeave">
         <BeginStoryboard>
           <Storyboard>
             <DoubleAnimation Duraiton="0:0:.5" Storyboard.TargetProperty="FontSize" To="20"></DoubleAnimation>
           </Storyboard>
         </BeginStoryboard>
       </EventTrigger>
     </TextBlock.Triggers>
   </TextBlock>

  </StackPanel>
</Grid>

The EventTriggers should be triggered with the Event Handler MouserEnter="Grid_Settings_MouseEnter" from the grid/StackPanel instead of having one EventTrigger with a RoutedEvent="MouseOver/Leave" each.

Thank you very much for possible answers and excuse me if I have expressed myself incomprehensibly. It is too late :D

Answer 1

Your StackPanel needs Background to be set.

Move your animations under it, and add to each animation it's target:

<DoubleAnimation Storyboard.TargetName="textBlock_Settings" ....>