How to find the name of the grandson object in the animation storyboard?

Question

 <VisualState x:Name="Flipped">
                  <Storyboard>
                    <DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="Angle"
                                     Storyboard.TargetName="Rota"/>
                  </Storyboard>
                </VisualState>
...
...
           <ToggleButton Name="FlipButton">
          <ToggleButton.Template>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
              <Grid>
                <Ellipse Width="25" Height="25" Fill="LightBlue" Stroke="Gray" StrokeThickness="1"></Ellipse>
                <Path Data="M2,6 l0 10 l13 -5z" Stroke="Black" StrokeThickness="1" Fill="Cyan"
                      HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5">
                  <Path.RenderTransform>
                    <RotateTransform x:Name="Rote" Angle="0"></RotateTransform>
                  </Path.RenderTransform>
                </Path>
              </Grid>
            </ControlTemplate>
          </ToggleButton.Template>
        </ToggleButton>

When I switched the visual state of the control to "flipped", I was prompted that I couldn't find the name of "rota". Because I want to rotate the Path object in the button, do you know what to do?

Answer 1

I do some updates for your code like below:

 <StackPanel>  
        <ToggleButton Name="FlipButton">  
            <ToggleButton.Template>  
                <ControlTemplate TargetType="{x:Type ToggleButton}">  
                    <Grid>  
                        <VisualStateManager.VisualStateGroups>  
                            <VisualStateGroup x:Name="CommonStates">  
                                <VisualStateGroup.Transitions>  
                                    <VisualTransition GeneratedDuration="0:0:1" To="MouseOver" />  
                                    <VisualTransition GeneratedDuration="0:0:1" To="Normal" />  
                                </VisualStateGroup.Transitions>  
                                <VisualState x:Name="Normal" />  
                                <VisualState x:Name="MouseOver">  
                                    <Storyboard>  
                                        <DoubleAnimation Duration="0:0:1" To="180"  Storyboard.TargetProperty="Angle" Storyboard.TargetName="Rota"/>  
                                    </Storyboard>  
                                </VisualState>  
                            </VisualStateGroup>  
                        </VisualStateManager.VisualStateGroups>  
                          
                        <Ellipse Width="80" Height="25" Fill="LightBlue" Stroke="Gray" StrokeThickness="1"></Ellipse>  
                        <Path Data="M2,6 l0 10 l13 -5z" Stroke="Black" StrokeThickness="1" Fill="Cyan" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5">  
                            <Path.RenderTransform>  
                                <RotateTransform x:Name="Rota" Angle="0"></RotateTransform>  
                            </Path.RenderTransform>  
                        </Path>  
                    </Grid>  
                </ControlTemplate>  
            </ToggleButton.Template>  
        </ToggleButton>  
    </StackPanel>  

And the result picture is:

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.