Форум программистов, компьютерный форум, киберфорум
C#: WPF, UWP и Silverlight
Форум программистов и сисадминов Киберфорум > Форум программистов > .NET > C# .NET > C#: WPF, UWP и Silverlight
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/18: Рейтинг темы: голосов - 18, средняя оценка - 4.50
10 / 10 / 1
Регистрация: 27.02.2009
Сообщений: 94
1
.NET 3.x

Анимированные кнопки

01.09.2010, 12:36. Показов 3474. Ответов 4
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Необходимо "оживить" кнопочки в среде VB.NET, добавив небольшую анимацию плавной смены изображений этой кнопки по событиям мыши. Всего три события MouseMove, MouseDown (возможно еще и MouseUp) и MouseLeave, и три изображения, которые должны плавно появляться на месте кнопки соответственно событиям мыши. Кнопочки сделаны в качестве Image. И не понятно, где хранить исходные изображения, ImageList нет в WPF как в WindowsForm? Вот пример кнопки без анимации:
VB.NET
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Private Sub Image4_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles Image4.MouseDown
        Image4.Source = Image2.Source
    End Sub
 
    Private Sub Image4_MouseLeave(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles Image4.MouseLeave
        Image4.Source = Image1.Source
    End Sub
 
    Private Sub Image4_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles Image4.MouseMove
        Image4.Source = Image3.Source
    End Sub
 
    Private Sub Image4_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles Image4.MouseUp
        Image4.Source = Image3.Source
    End Sub
 
    Private Sub Window1_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        Image4.Source = Image1.Source
    End Sub
Image1 - Image3 невидимые, используются как хранилище изображений (не знаю, что можно использовать для этого еще) и Image4 - это наша кнопка, в которой являются новые изображения.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 01.09.2010, 12:36
Ответы с готовыми решениями:

Пропал стандартный стиль объёмной кнопки WPF (кнопки теперь плоские)
Пропал стиль стандартных WPF кнопок. Кнопки теперь только плоские. Что сделать, чтобы вернуть...

Стиль кнопки, основанный на стандартном/умолчальном стиле для кнопки?
Нужно изменить ControlTemplate кнопки, но умолчальный стиль заменяется (даже если поставить...

Определить name кнопки при клике по ней (кнопки создаются в коде и хранятся в массиве)
Вечер добрый! В программе я генерирую массив кнопок, которые рисуются в такой штуке: <Grid...

Привязать выполнение действия кнопки на нажатие кнопки Enter
У меня кнопка - Button, выполняет такое то действие, не подскажите, как привязать выполнение...

4
10 / 10 / 1
Регистрация: 27.02.2009
Сообщений: 94
02.09.2010, 22:20  [ТС] 2
Как анимировать свойство Opacity элемента Image? Как использовать свойство DoubleAnimation в структуре Image?
0
10 / 10 / 1
Регистрация: 27.02.2009
Сообщений: 94
08.09.2010, 14:19  [ТС] 3
Задачу решил, анимируются и изображения и эффект Shadow -тень от кнопки, вот пример кода:
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<Canvas x:Name="Button1" Height="29" Margin="36,38,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="70">
                <Canvas.Triggers>
                    <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Image3">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:00.1" Storyboard.TargetName="Shadow1" Storyboard.TargetProperty="ShadowDepth" To="4" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="UIElement.MouseLeftButtonUp" SourceName="Image3">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:00.1" Storyboard.TargetName="Shadow1" Storyboard.TargetProperty="ShadowDepth" To="5" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="UIElement.MouseEnter" SourceName="Image3">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:00.3" Storyboard.TargetName="Shadow1" Storyboard.TargetProperty="Opacity" To="0.7" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="UIElement.MouseLeave" SourceName="Image3">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:00.3" Storyboard.TargetName="Shadow1" Storyboard.TargetProperty="Opacity" To="0.5" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Image3">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:00.1" Storyboard.TargetName="Image3" Storyboard.TargetProperty="Opacity" To="1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="UIElement.MouseLeftButtonUp" SourceName="Image3">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:00.1" Storyboard.TargetName="Image3" Storyboard.TargetProperty="Opacity" To="0" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="UIElement.MouseEnter" SourceName="Image3">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="00:00:00.3000000" Storyboard.TargetName="Image2" Storyboard.TargetProperty="Opacity" To="1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="UIElement.MouseLeave" SourceName="Image3">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="00:00:00.3000000" Storyboard.TargetName="Image2" Storyboard.TargetProperty="Opacity" To="0" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Canvas.Triggers>
                <Image x:Name="Image1" Height="29" Stretch="Fill" Width="70" Source="Resources\Button\1\577.png" d:LayoutOverrides="Width, HorizontalMargin">
                    <Image.Effect>
                        <DropShadowEffect x:Name="Shadow1" Opacity="0.5"/>
                    </Image.Effect>
                </Image>
                <Image x:Name="Image2" Height="29" Stretch="Fill" Width="70" Source="Resources\Button\1\578.png" d:LayoutOverrides="Width, HorizontalMargin" Opacity="0"/>
                <Image x:Name="Image3" Height="29" Stretch="Fill" Width="70" Source="Resources\Button\1\581.png" d:LayoutOverrides="Width, HorizontalMargin" Opacity="0"/>
            </Canvas>
Теперь другая проблема, необходимо решить проблему имен при умножении количества этих кнопок, т. е. при копировании панели Canvas, на которой размещены изображения друг над другом, и размещении копии рядом получается конфликт имен. Необходимо что-то придумать, что-бы не переписывать все количество этих имен, это имена Image и DropShadowEffect.

Добавлено через 34 минуты
Может быть существует возможность изолировать пространства имен внутри панелей Canvas, и кнопочки отличались бы только именем панелей Canvas?
0
1150 / 858 / 263
Регистрация: 30.04.2009
Сообщений: 3,598
13.09.2010, 23:25 4
Создать UserControl на базе этого кода, тогда такой проблемы не будет, да и код не нужно будет дублировать.
1
10 / 10 / 1
Регистрация: 27.02.2009
Сообщений: 94
15.09.2010, 09:22  [ТС] 5
С помощью Expression Blend оказалось все довольно просто, теперь, чтоб создать такую кнопку трачу примерно минут пять . Пользовался хорошим примером Пошаговое руководство. Создание кнопки с помощью Microsoft Expression Blend

Возник вопрос: как средствами Expression Blend снабдить создаваемую кнопку таким свойством, как у стандартной, чтобы кнопка по клику мыши получала фокус и переливалась (Vista, 7). Я добавил анимацию к моей кнопке по событию GotFocus, но кнопка начинает переливаться только когда получает фокус с клавиатуры клавишами "вверх", "вниз", "влево", "вправо", и прекращает переливаться когда на нее навести мышь, т.е. получается что обработка события MouseLeave отменяет обработку события GotFocus. Необходимо, чтобы после события MouseLeave продолжало обрабатываться событие GotFocus. Существует ли стандартное решение в Expression Blend или придется изобретать? В общем понимаю так: необходимо, чтобы событие GotFocus обрабатывалось независимо от других событий.
0
15.09.2010, 09:22
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 15.09.2010, 09:22
Помогаю со студенческими работами здесь

Анимированные Кнопки
Ребят подскажте можно ли в Бейсике сделать нормальные кнопки при наведении курсора что они...

Анимированные кнопки(увеличение)
Как можно сделать такие кнопки через тег &lt;a&gt; и что бы при наведении они увеличивались не...

Анимированные круглые кнопки
Кто-нибудь делал круглые анимированные кнопки? Поделитесь пожалуйста примерами, ссылками. ...

Как сделать анимированные кнопки
Пробовал сделать кнопки из PictureBox но задержка прит смене картинки большая.Что посоветуете?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru