Russ Suter
asked on
Creating a XAML layout - HELP!?
I've been a very long time Windows Forms developer and have done a fair share of web application development as well but until now I haven't bothered to learn WPF. I'm having a little trouble getting started.
I'm trying to create a layout that looks something like this sketch:
The top bar will contain some kind of title text and a dropdown menu button on the right. The left panel should be able to slide out of the way making more room for the main panel. I'd like the sliding effect to be animated with a few specific parameters.
1. I'd like the effect to be triggered by a mouse click on the arrow
2. I'd like the slide effect to decelerate
3. I'd like to have the background color fade to a different color during the slide
4. I'd like to be able to rotate the arrow so it faces the other direction
5. When the side panel is minimized, I want the click on the arrow to reverse the whole thing
6. I want to be able to apply all of this from a ResourceDictionary rather than use inline styles
I'm a bit lost so far. I'm beginning to understand the concepts but the syntax is eluding me. I'm pretty much 100% certain that I'll be doing some kind of storyboard animation but I haven't figured out how to apply such an animation from within a ResourceDictionary. Also, I'm not entirely sure what the different regions should be made of. I'll need to put things inside each of the regions. In fact, the left region will probably contain a UserControl that I create myself. If anyone can get me going in the right direction I would much appreciate it.
I'm trying to create a layout that looks something like this sketch:
The top bar will contain some kind of title text and a dropdown menu button on the right. The left panel should be able to slide out of the way making more room for the main panel. I'd like the sliding effect to be animated with a few specific parameters.
1. I'd like the effect to be triggered by a mouse click on the arrow
2. I'd like the slide effect to decelerate
3. I'd like to have the background color fade to a different color during the slide
4. I'd like to be able to rotate the arrow so it faces the other direction
5. When the side panel is minimized, I want the click on the arrow to reverse the whole thing
6. I want to be able to apply all of this from a ResourceDictionary rather than use inline styles
I'm a bit lost so far. I'm beginning to understand the concepts but the syntax is eluding me. I'm pretty much 100% certain that I'll be doing some kind of storyboard animation but I haven't figured out how to apply such an animation from within a ResourceDictionary. Also, I'm not entirely sure what the different regions should be made of. I'll need to put things inside each of the regions. In fact, the left region will probably contain a UserControl that I create myself. If anyone can get me going in the right direction I would much appreciate it.
ASKER
Just my two cents - the question feels more like a "do this work for me" with the requirements listed, rather than a call for help with specific problems.I totally understand. I'm sorry about that. This whole thing is entirely new to me and I'm a bit overwhelmed. I've been playing around with things and I now have items 3, 4, and 6 working. I'm not sure a grid will be enough. From what I've read it's problematic at best to animate the width of a grid column.
I'm not sure I follow that. I've done a project in the past that animated a grid column width without any trouble...
I believe I just named the ColumnDefintion and handled the animation in the button click code. I used the column ActualWidth as the starting point and 0 as the end point. Worked pretty much like any other animation...
I believe I just named the ColumnDefintion and handled the animation in the button click code. I used the column ActualWidth as the starting point and 0 as the end point. Worked pretty much like any other animation...
ASKER
OK, cool. That's good to know. I thought I had read somewhere that it wasn't possible with grid columns but I can give it a try, if only I can figure out how to trigger an animation like that with a mouse click. So far all my animations have been using the VisualStateManager or ControlTemplate triggers.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
From what I can see, you have about 7 different questions packed in here. So given the broad nature of the question, I can provide some broad guidance.
I'll start by saying you are probably looking for a Grid to achieve the general layout in it's fixed form (possibly a nested grid so you don't have to deal with the column span from the top row when it comes time to animate).
The arrow would likely be a button with a content template so it looks like a plain arrow (easily achievable with a simple wingdings font character).
You're correct in that you would use an animation, and you'd likely be animating the width property of the left grid column to reduce it to 0. Within the same storyboard, you'd be animating the arrow button (rotate it or whatever).
Finally, the resource dictionary can be the last step after you get it all working.