Indermove
@Indermove
C#/.NET back-end разработчик

Как по событию родительского объекта начать анимацию дочернего объекта и наоборот в WPF?

Всем добрый день, товарищи! Столкнулся с такой проблемой, есть Grid, внутри которого лежат разные картинки. Нужно сделать так, чтобы при наведении на Grid начинали крутиться картинки, а когда нажимаешь на картинку, то изменялось свойство Background у Grid. Да и вообще интересует вопрос, как по событию одного объекта вызывать анимацию другого? Как это сделать или хотя бы в каком направлении гуглить? Заранее спасибо.

Вот это то что сейчас уже есть, то есть событие, которое срабатывает когда мы наводимся на изображение:

<UserControl.Resources>
        <Style TargetType="Image">
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter>
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <RotateTransform></RotateTransform>
                </Setter.Value>
            </Setter>   
            
            <Style.Triggers>
                <EventTrigger RoutedEvent="Grid.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard Name="rotateStoryBoardBegin">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
                                                 To="360" Duration="0:0:0.8"
                                                 RepeatBehavior="Forever">
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>

                <EventTrigger RoutedEvent="Grid.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard Name="rotateStoryBoardEnd">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
                                                 Duration="0:0:0.8">
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>
  • Вопрос задан
  • 333 просмотра
Решения вопроса 1
Indermove
@Indermove Автор вопроса
C#/.NET back-end разработчик
Нашел ответ на свой вопрос, если нужно обратиться к дочернему элементу сетки, при событии сетки, то внутри сетки добавляется триггер и в нем в свойстве Storyboard.TargetName указывается имя дочернего элемента, который хотим анимировать. Пример:
<Grid.Triggers>
            <EventTrigger RoutedEvent="Grid.MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard Name="rotateStoryBoardBegin">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="Image" Storyboard.TargetProperty="RenderTransform.Angle"
                                                 To="180" Duration="0:0:0.4">
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
       <Grid.Triggers>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Woberin
Копать нужно в сторону XAML.

Пример вращения картинки при наведении курсора:
<Grid>
        <Image Height="62" HorizontalAlignment="Left" Margin="259,0,0,176" Stretch="Fill" VerticalAlignment="Bottom" Width="62" Source="Background.jpg" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <RotateTransform x:Name="Povorot" Angle="0"/>
            </Image.RenderTransform>

            <Image.Triggers>
                <EventTrigger RoutedEvent="Button.MouseEnter">
                    <BeginStoryboard>
                        <BeginStoryboard.Storyboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.25" AutoReverse="False" Storyboard.TargetName="Povorot" Storyboard.TargetProperty="Angle" RepeatBehavior="Forever" From="0" To="200" />
                            </Storyboard>
                        </BeginStoryboard.Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.MouseLeave">
                    <BeginStoryboard>
                        <BeginStoryboard.Storyboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.25" Storyboard.TargetName="Povorot" Storyboard.TargetProperty="Angle" To="0" />
                            </Storyboard>
                        </BeginStoryboard.Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
        </Image>
    </Grid>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы