Daily Progress: Building Enterprise Apps with Unity — Making the Case Overview panel Scrollable

So we set up the Overview panel but I discovered something akin to when you spend hours on a photoshop image only to discover you were on the wrong layer! When I resized the unity screen to take an animated capture, I noticed all my formatting went crazy! I realized I’ve forgotten to set the canvas scaler to scale with Screen size! I set the match size to .5 so everything would scale evenly but now I have to readjust a few things, but technically after this, everything should stay relatively the same.

First let’s rearrange the UI placements. All I had to do was manually move the logo up, and place all 4 bottom elements in the center and scale them up a bit, and now we see they scale correctly at any size!

After a few adjustments to the rest of the panels, we’re ready to continue!

While in play mode, select canvas and create a new ScrollView

In the Scroll Rect options, there’s a slot for content, we’ll drop our Overview panel into it.

Once done, you’ll be able to scroll the content

We won’t need the horizontal scrolling so we can delete it from the heirarchy.

Also select the scroll view and untick horizontal

if the overview panel is still a bit off, you can just move it back.

We want the scroll to start at the top, not at the middle where it’s currently at. to fix this, start by selecting the scroll view and changing the anchor point to center stretch and 0 it out. This will obviously make the scrollbar disappear since the scrollview is now taking up the whole screen, but we’ll fix that in a moment.

Since we’ll have a confirmation button at the bottom of the screen, we’ll use the rect tool to move the scroll view bottom up a bit higher, you’ll see the scrollbar comes back.

Next we’ll drag the background down to fit the length of the scroll.

For whatever reason, the scrollbar can’t be edited inside of the scroll view, so we’ll have to take it outside of the scrollview element and placed in front so it remains on top of everything. then using the rect tool, we can resize it. We want it about the size of the picture and placed near the top as originally designed.

We now need to mask the content so nothing is seen below the scrollbar.

The viewport has a content panel that controls what is seen. Delete it and replace it with the overview panel. A few things get messed up but we’ll fix things soon.

First thing to do is bring the border panel to the top. then select the WhiteBorder image and turn of the raycast target option as it will interfere with selecting the scrollbar.

While the ScrollViews Right padding is 0, the Viewport is 17, we need to change it to 0 as well.

We now have our UI how we want it, but we’re in play mode. If we stop the game, we’ll lose all of our hard work! Not necessarily, here’s the cool trick, make a prefab of the canvas and then stop the game, delete the original canvas, and put in the prefab which has all of our changes in it!

We don’t need our prefab anymore, so first we’ll unpack our canvas completely, and then delete the prefab.

Duplicate the Title_Photo and call it Title_Photo_Notes, place some fake text in and place it below the photo.

It’s a little difficult to place the text below the photo right now, fortunately we don’t have to go into play mode again, just select the Scrollbar vertical element, and change the value from 1 to 0.

I brought the notes down and noticed the text was compressed, while I could have changed the overflow, i made the rect a little bigger and kept vertical as overflow. That worked pretty well.

Next thing was to optimize a few things, first was to bring the background outside of the panel and behind the scroll view then zeroing out the rect transform so it would take up the entire screen.

Next, I noticed the scroll view had an image that was tinting the background so I turned it off.

Since we need to turn on multiple objects, we’ll create a container for all of them to make things easy.

Create an empty called Overview_Container

Add a rect transform component and then center stretch, 0 it out.

Put the Background, ScrollView and Scrollbar vertical into it and then place the container behind the Border panel.

I then duplicated the accept button from the last panel and moved it into the Overview container and named it Back_Button as well as changed its text.

Changing the vertical scrollbars value back to 1 scrolled the panel back to the top and our photo is cut off beautifully where the button is located!

And this completes the panel for finding a case! Next is create a case. I’ll be documenting that tomorrow.