Рейтинг@Mail.ru

Анимация изменения цвета фона элемента при наведении мыши в XAML

Чтобы создать простейший эффект изменения цвета фона элемента, создадим в разделе статических ресурсов:

<Color x:Key="selectedColor" A="255" R="191" G="191" B="204" />
<Color x:Key="originalColor" A="255" R="230" G="230" B="250" />
<SolidColorBrush x:Key="originalColorBrush" Color="{StaticResource originalColor}" />

Теперь для элемента настроим триггеры:

<Border Background="{StaticResource originalColorBrush}">
  <Border.Triggers>
    <EventTrigger RoutedEvent="Border.MouseEnter">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation From="{StaticResource originalColor}" To="{StaticResource selectedColor}" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Duration="0:0:0.5"  />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Border.Triggers>
  …
</Border>

Поделиться