Creating scroll viewer for stack panel

Questions
1

Hello, everyone I’m trying to create a stack panel that has multiple stack panels inside it. So I want to add a scroll bar/ scroll viewer.
Play ground
Where I created that multi stack panel’s example. So please help me to create a scroll bar inside the main panel.

2

Hi,
Here’s a crude example to illustrate how it’s done in the logic (Sorry I didn’t take the time to reproduce your layout/design, but if you are stuck I can do it later for you).

Basically, it goes like this:

  1. create a ‘root’ container (stackpanel or rectangle that will host your layout)
  2. inside this root container create a scrollviewer
  3. inside the scrollviewer, create a MAIN CONTAINER that will hold all of your layout (containers and control) you want to scroll. IMPORTANT IS TO GIVE NO HEIGHT TO THIS MAIN CONTAINER. By doing this, it will automagically resize depending on the children hosted in it. Depending on the total height of all children, it will also remove the scrollbar if all children fit in the height of the root container
  4. add all of your children containers to this main container.
  5. add your controls to your children containers, in order. If you want to first add a BG, add this control first. On top of it (next in script) add the text, buttons, etc. It’s important to understand that there’s a hierarchy that not only parents controls to a container but also rules the z-offset (the order of layers and how the controls are displayed on top of each other). So, a BG should come first, everything on top should come after.

Hope this helps,

3 Likes
3

Thanks I’ll look into this. If I need any help I’ll tell you.