Кнопка переключения анимации IsMouseOver

Question

Кнопка переключения анимации IsMouseOver

Я хотел бы добавить анимацию затухания, когда ToggleButton IsChecked=false и IsMouseOver деактивируется.

У меня есть кнопка переключения с пользовательским шаблоном управления.

Следующие триггеры настроены и отлично работают.

Когда IsChecked=true, прозрачность фона дисплея =1

Когда IsMouseOver=true, прозрачность фона дисплея =1

            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Opacity" TargetName="innerRectangle" Value="1"/>
                </Trigger>

                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Opacity" TargetName="innerRectangle" Value="1"/> 
                </Trigger>
            </ControlTemplate.Triggers>

Однако теперь я хочу добавить анимацию затухания, когда кнопка ToggleButton НЕ отмечена, а функция IsMouseOver отключена.

Я создал анимацию раскадровки, которая изменяет значение непрозрачности с 1 до 0 за 100 мс:

<Storyboard x:Key="OnMouseOut">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="innerRectangle">
        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
      </DoubleAnimationUsingKeyFrames></Storyboard>

Что я пробовал

Я добавил EnterAction и ExitAction к триггеру IsMouseOver, и он выполняет намеренный эффект. Однако, если ToggleButton отмечен, я не хочу запускать анимацию.

   <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard x:Name="OnMouseIn_BeginStoryboard" Storyboard="{StaticResource OnMouseIn}"/>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard Storyboard="{StaticResource OnMouseOut}"/>
                                </Trigger.ExitActions>
                                <Setter Property="Opacity" TargetName="innerRectangle" Value="1"/>
                            </Trigger>

Что я попробовал Часть 2

Использование MultiTrigger не решает проблему.

 <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                    <Condition Property="IsChecked" Value="False"/>
                                </MultiTrigger.Conditions>
                                <MultiTrigger.EnterActions>
                                    <BeginStoryboard x:Name="OnMouseIn_BeginStoryboard" Storyboard="{StaticResource OnMouseIn}"/>
                                </MultiTrigger.EnterActions>
                                <MultiTrigger.ExitActions>
                                    <BeginStoryboard Storyboard="{StaticResource OnMouseOut}"/>
                                </MultiTrigger.ExitActions>
                                <Setter Property="Opacity" TargetName="innerRectangle" Value="1"/>
                            </MultiTrigger>

1

wpf wpf-controls wpf-animation

Источник

user684869 24 июл '15 в 13:26

1 ответ

Решение

Другие вопросы по тегам wpf wpf-controls wpf-animation

user684869 24 июл '15 в 18:11 2015-07-24 18:11 · Accepted Answer · 2015-07-24 18:11

Это выглядит просто сумасшедшим, но это работает. По сути, я создал идентичную раскадровку с другим именем, когда IsChecked завершает работу. На Hover я отменяю эту вторичную раскадровку.

 <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True"/>
                                <Condition Property="IsChecked" Value="False"/>
                            </MultiTrigger.Conditions>
                            <MultiTrigger.EnterActions>
                                <StopStoryboard BeginStoryboardName="OnMouseOut_BeginStoryboard2"/>
                                <BeginStoryboard x:Name="OnMouseIn_BeginStoryboard" Storyboard="{StaticResource OnMouseIn}"/>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard x:Name="OnMouseOut_BeginStoryboard" Storyboard="{StaticResource OnMouseOut}"/>
                            </MultiTrigger.ExitActions>
                            <Setter Property="Opacity" TargetName="innerRectangle" Value="1"/>
                        </MultiTrigger>

                        <Trigger Property="IsChecked" Value="True">
                            <Trigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="OnMouseOut_BeginStoryboard"/>
                                <StopStoryboard BeginStoryboardName="OnMouseIn_BeginStoryboard"/>
                                <BeginStoryboard x:Name="OnMouseOut_BeginStoryboard2" Storyboard="{StaticResource OnMouseOut}"/>

                            </Trigger.ExitActions>
                            <Trigger.EnterActions>
                                <StopStoryboard BeginStoryboardName="OnMouseOut_BeginStoryboard"/>
                                <StopStoryboard BeginStoryboardName="OnMouseIn_BeginStoryboard"/>
                            </Trigger.EnterActions>
                            <Setter Property="Opacity" TargetName="innerRectangle" Value="1"/>
                        </Trigger>

                    </ControlTemplate.Triggers>