Advertisements:

Thread Rating:
  • 2 Vote(s) - 3.5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Professional Visual Studio XAML Storyboard Animations Tutorial
#1
Hello! My name is EnderAPOX. Some of you may know me, some don't. For those who know me, you know that I am a very experienced programmer(not so experienced in troubleshooting as Coder_M knows xD)

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

What you are going to need:
-Visual Studio 2013 or higher: Download Here
-Blend for Visual Studio(easier to use for beginners): Comes with Visual Studio

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

CREATING THE PROJECT AND GETTING FAMILIAR WITH THE VS AND BLEND GUI
1. Open Visual Studio
2.Select File-New-Project or Press CTRL-SHIFT-N
3.Select C# WPF Application:
[Image: 8ff62a570f94bf7bc922c966a0e8c751.png]


Here's the GUI:


[Image: 69db3478b63449f0c12ab79a2b0a2f09.jpg]

Highlighted in Red - You have the two classes: MainWindow.xaml(XAML code) and MainWindow.xaml.cs(C# code). When the program is executed, these two classes will bind together. I suggest you keep MainWindow.xaml.cs because we are going to use Blend for XAML.
Highlighted in Blue - That is the XAML code editor. If you wish to use this code editor feel free to use it, but Blend is a much better IDE for XAML.
Highlighted in Yellow - The Solution Explorer. This is not really useful since we are coding a WPF application, but it will be useful if you will ever code a Windows Form Application.

Now let's get to the good stuff: Go ahead and open up Blend. You will be using Visual Studio for programming in C# and Blend for XAML.
Click File-Open Project/Solution- And select the Visual Studio project.
NOTE: MAKING CHANGES IN ONE OF THE PROGRAMS WILL ALSO MAKE CHANGES IN THE OTHER ONE.


Now let's get familiar with Blend's GUI too:


[Image: 004d92b8d80e54477a391efb1f996838.jpg]


Highlighted in Red - Those are Assets or Objects that you can simply drag and place on your application. You can find anything you need there like buttons, labels, textboxes.
Highlighted in Blue - That is the objects manager. Once you have introduced some objects in your project, you can manage them from that tab. Later, when we get to the actual animations, that will be the storyboard editor.
Highlighted in Yellow - When you will have an object selected, a button for example, all of the button's settings will be displayed there. I am not going to teach you how to give your buttons a nice design, I'll only teach you how to animate them.


--------------------------------------------------------------------------------------------------------------------------------------------------------------------

STORYBOARD ANIMATIONS

Here's when we get to the good stuff. I will be teaching you how to do these two animations:

[Image: e1dedb55e541bd493974354d02c6e799.gif]



[Image: 1ae9e693229185d8e2fc445360c66973.gif]


FIRST ANIMATION

Allright, I will be teaching you how to make the button bigger and change color when mouse hovers over it.
First, select your button from the Object Manager.
Now head over to the Assets tab and click on Triggers. With your button selected, click the +Event button two times: The first one for for when the mouse enters the button, and the second one for when it leaves.
Select the first event and change the settings to: When button.MouseEnter is raised and click the +.
Do the same for the other event but with button.MouseLeave is raised.

[Image: af779275000104e9532b8a79eca89be5.png]

Now you won't have onMuseEnter2.Begin. That's the storyboard, so you are going to click New Storyboard from that dropdown menu. Enter any name you like.
You can now notice that the Object Manager has now turned into the Storyboard Editor. If you ever worked with keyframes in After Effects, this is going to be super-easy for you. It looks just like a timeline, so you wanna move 0.3-0.4 seconds in your timeline. It should say that the storyboard is recording, so now that you're 0.3 seconds away from the begining of the storyboard, edit the button in the way you want it to be when the mouse is over it. Right click that little keyframe and click "copy".

[Image: ec9576f464f8e2a7f0346d5bf36b7d18.png]

Ok, now you made it look good when you're hovering over it, but if you move the cursor away from the button, it will stay that way. Now select the other event you created and click the +. Select New Storyboard again and give it any name you like. At the second 0, select Edit - Paste. You will see that the button has changed the form to the one when the mouse is over it. You now want to move 0.3 seconds and model the button the way it was before. Remember recording mode has to be ON.

[Image: ca094fa716eaf3e5c16889d24b42d853.png]

SECOND ANIMATION

Now that you are familiar with the storyboard editor and keyframes, i can just tell you what keyframes I had to add in order to create that effect. What I did was:
-I added a ellipse object in the middle on the button and set it's opacity to 0%.
-I created an MouseClick event that activates my storyboard.
-I just arranged the keyframes in this order: buttonMouseHoverState ->  ButtonCLickAnimation -> Set the elilipse's opacity to 100% -> Made the ellipse huge Smile
- Then, in order to actually quit the animation, I added an async task so the storyboard would play and then it would quit the application:

[Image: fc56bb48dcd8e3308a4cb397ae4651ee.png]


--------------------------------------------------------------------------------------------------------------------------------------------------------------------

THIS IS IT GUYS! IF YOU HAVE ANY QUESTIONS OR YOU DON'T UNDERSTAND SOMETHING REPLY TO THIS THREAD!
Ban reason: Unbanned without reason by Nain ~ (Permanent)
Reply
#2
Realy helpfull tutorial
Reply
#3
(08-29-2015, 01:23 PM)darwinjmiller Wrote:  Realy helpfull tutorial

I'm glad Smile
Ban reason: Unbanned without reason by Nain ~ (Permanent)
Reply
#4
This feature only in professional? I am learning C# at the moment using Community and might try to make some believe able social engineering programs, I was thinking some simple crap that doesn't censor the stream key so I take a screenshot or something like it sends a basic email to a fake email generator email address that I can give a link to for every ones use.
Reply
#5
(09-21-2015, 08:07 AM)Rednigerian1632 Wrote:  This feature only in professional?  I am learning C# at the moment using Community and might try to make some believe able social engineering programs,  I was thinking some simple crap that doesn't censor the stream key so I take a screenshot or something like it sends a basic email to a fake email generator email address that I can give a link to for every ones use.

No lol it works in community too. It's just how the professional client-developers do it Wink
Ban reason: Unbanned without reason by Nain ~ (Permanent)
Reply
#6
(09-21-2015, 04:29 PM)EnderAPOX Wrote:  
(09-21-2015, 08:07 AM)Rednigerian1632 Wrote:  This feature only in professional?  I am learning C# at the moment using Community and might try to make some believe able social engineering programs,  I was thinking some simple crap that doesn't censor the stream key so I take a screenshot or something like it sends a basic email to a fake email generator email address that I can give a link to for every ones use.

No lol it works in community too. It's just how the professional client-developers do it Wink

Thanks for reply, will try out when I get around to making some seing crap man
Reply
#7
A lot of efforts have been made here,a very detailed explanation,great tutorial!!!
Reply
#8
Will try this.Thanks for the tutorial man.
Reply
#9
Pretty cool, looks like something useful to learn
Reply
 


Possibly Related Threads...
Thread Author Replies Views Last Post
  Skype Plugin Tutorial(Skype API) - C# EnderAPOX 12 1,725 07-12-2017, 01:50 PM
Last Post: wryn
  PHP Tutorial 4 Newfags Radix 21 1,939 06-06-2017, 07:13 AM
Last Post: xssinj
  How to SPREAD your viruses successfully [TUTORIAL] itsmmv 2 311 04-22-2017, 04:55 AM
Last Post: Barbarian
  Python Tutorial dad_remove 6 1,078 04-19-2017, 01:06 AM
Last Post: oppaje



Users browsing this thread: 1 Guest(s)