Вынести анимацию в отдельный стиль

@Lesch · Регистрация: 28.05.2020

Студворк — интернет-сервис помощи студентам

Добрый день, мне постоянно кажется что я делаю что то не так, что есть более правильные методы написания кода.
Сделал анимацию для боковых кнопок, мне кажется это не нормально привязывать анимации по отдельности. Есть ли способы укоротить?
Пример:

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
                   <Border>
                        <Button x:Name="B1" Width="40" Height="40" Margin="10" Style="{DynamicResource Menu.button.Style.CornerRadius}" Mouse.MouseEnter="Button_MouseEnter" Mouse.MouseLeave="Button_MouseLeave"   >
                            <Button.Triggers>
                                <EventTrigger RoutedEvent="MouseEnter">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="Width" Storyboard.TargetName="popup"
                              From="0" To="{Binding ElementName=popup,Path=MaxWidth}"  AutoReverse="False"  Duration="0:0:0.20"  />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger.Actions>
                                </EventTrigger>
                                <EventTrigger RoutedEvent="MouseLeave">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="Width" Storyboard.TargetName="popup"
                              From="{Binding ElementName=popup,Path=MaxWidth}" To="0"  AutoReverse="False"  Duration="0:0:0.20"  />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger.Actions>
                                </EventTrigger>
                            </Button.Triggers>
                        </Button>
                    </Border>
                    <Border>
                        <Button x:Name="B2" Width="40" Height="40" Margin="10" Style="{DynamicResource Menu.button.Style.CornerRadius}"  Mouse.MouseEnter="Button_MouseEnter" Mouse.MouseLeave="Button_MouseLeave" >
                            <Button.Triggers>
                                <EventTrigger RoutedEvent="MouseEnter">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="Width" Storyboard.TargetName="popup"
                              From="0" To="{Binding ElementName=popup,Path=MaxWidth}"  AutoReverse="False"  Duration="0:0:0.20"  />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger.Actions>
                                </EventTrigger>
                                <EventTrigger RoutedEvent="MouseLeave">
                                    <EventTrigger.Actions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="Width" Storyboard.TargetName="popup"
                              From="{Binding ElementName=popup,Path=MaxWidth}" To="0"  AutoReverse="False"  Duration="0:0:0.20"  />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger.Actions>
                                </EventTrigger>
                            </Button.Triggers>
                        </Button>
                    </Border>

@Элд Хасп · 05.04.2023, 22:41

Сообщение от Lesch

Есть ли способы укоротить?

Вроде коротко, ничего лишнего.
Что конкретно вызывает сомнения?

Добавлено через 5 минут

Сообщение от Lesch

Вынести анимацию в отдельный стиль

Можно, но не всегда.
В стилях вы не можете прослушивать события.
Но это и не всегда нужно.
В данном случае вы можете в стиле прослушивать свойство IsMouseOver.
Но есть ещё и другая проблема: Storyboard.TargetName="popup".
Триггера элемента находятся в конкретном элементе, в конкретной области видимости имён.
Поэтому из триггера кнопки можно "увидеть" элемент по имени popup.
А стили, шаблоны имеют свою область видимости имён. Иначе как бы вы смогли один стиль использовать для разных элементов?
Поэтому из триггера стиля "не видно" элементов Окна (UserControl и др.). И TargetName="popup" выдаст ошибку.

@Lesch · 05.04.2023, 22:43 **[ТС]**

Сообщение от Элд Хасп

Что конкретно вызывает сомнения?

Если все нормально то хорошо, сомнения происходят ввиду неопытности, постоянно кажется что что-то не так и есть варианты правильнее и лучше. Спасибо большое!

@Элд Хасп · 05.04.2023, 22:52

Lesch, обычно такая анимация реализуется или в элементе который анимируется (popup), или в элементе предке для анимируемого элемента и элементов источников событий (например в Окне).

Новые блоги и статьи Все статьи Все блоги /
Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .

@Элд Хасп Модератор 16140 / 11264 / 2888 Регистрация: 21.04.2018 Сообщений: 33,109 Записей в блоге: 2
	05.04.2023, 22:52
	Lesch, обычно такая анимация реализуется или в элементе который анимируется (popup), или в элементе предке для анимируемого элемента и элементов источников событий (например в Окне). 1

Вынести анимацию в отдельный стиль

Решение