3

I would like to add an eyecatching animated Hamburger Icon to my SplitView in c# UWP XAML project.

I know there are tons of CSS animated icons (like here or here the one in [2,2]) out there to find, but rarely ones for XAML. And there is a guy, who did port some CSS to XAML animations here.

I fancy a really nice animation like this developer did in Windows Phone App: Link to Store.

How did he do it? And how can I do that? Is it "just" an excessive use of the Storyboard? Or are there other tricks involved? As it is an Win8 oriented App (not Win10), I do not think, that it is done by an animated GIF.

user3079834
  • 2,009
  • 2
  • 31
  • 63

3 Answers3

1

Lets say you have a Button at the top that open and Closes your SplitView. Now change that button to ToggleButton. Create the needed Event Handlers on ToggleButton and SplitView so the toggle will have the correct values all times. "Checked" when the Pane is open and "UnChecked" when pane is closed.

Now

  1. Open your page in Blend
  2. Right Click on ToggleButton Edit Tamplate -> Edit a Copy
  3. Change to States(Before Going to next step is better to change all states to you liking and then create transitions )
  4. Find Normal and Click ->+ Add Transition and select Normal -> Checked
  5. At Objects And Timeline Select the ContentPresenter
  6. Move The Yellow Line to 0.500
  7. In properties go to Transform then select Rotate and set angle to 270(make sure ContentPresenter is selected)
  8. Back to Objects And Timeline Click play to check the animation. Now you can play and create your own animation as you like (the rotation part is just an example)
  9. Build Project and try it live!

I believe you got this from now on, create from Checked -> Normal and you have what you wanted.

Stamos
  • 3,938
  • 1
  • 22
  • 48
  • I had a look into it. This sounds promising. However `` does never trigger, but e.g. PointerOver does. Where did I go wrong? – user3079834 Feb 16 '16 at 17:17
  • I know what you mean I have the same problem. I wanna do exactly the same as you. I tried using only the * trans and it worked but it triggers on PointerOver too. As I was searching for a solution someone said something about doing two VisualStateGroups. One for CommonStates and one for Checkstates. I would have tried it and edited my answer but something came up and I m out of town. – Stamos Feb 16 '16 at 17:44
  • Thank you, I will try to check with `VisualStateGroups` and post and answer, when (if) I find one. – user3079834 Feb 16 '16 at 19:36
0

OK, after considering @Stamos comments on his answer, I found this link, that implements a CurrentStateChanged event. And someone here shows a way to implement Checked and Unchecked state.

But the ultimate answer, I found in a telerik forum, where some real hero had a lot of free time. Exactly what I was looking for.

user3079834
  • 2,009
  • 2
  • 31
  • 63
0

I have successfully achieved this type of animation using bunch of twicks made in XAML as well as in Blend also. You can check it out here.

Michele La Ferla
  • 6,775
  • 11
  • 53
  • 79