Stop fighting Power Apps' blank canvas and start building layouts that actually hold together. This lesson teaches you the screen-container-control hierarchy from first principles, so you can create structured, adaptable app interfaces with confidence. We'll build a real employee directory shell together, step by step.
Imagine you've been handed a blank whiteboard and told to design a simple employee directory app. You know what data you need to show — names, departments, contact info — but the moment you open Power Apps and see that empty canvas, your mind goes blank. Where do things go? How do you keep controls lined up? Why does everything jump around when you preview the app on a different screen size? This is the experience of almost every first-time Power Apps builder, and it's the problem this lesson exists to solve.
Power Apps gives you something called a canvas app — and the word "canvas" is intentional. It's a blank surface where you can place controls anywhere you want. That freedom is powerful, but without a clear mental model of how screens, containers, and layout controls work together, you'll spend more time fighting the tool than building the app. The builders who get productive fast are the ones who understand the structural hierarchy of a canvas app before they start dragging things around.
By the end of this lesson, you'll be able to open Power Apps, create a properly structured multi-screen app interface, understand why containers exist and how they control layout behavior, and use horizontal and vertical layout containers to build interfaces that hold together visually and functionally. We'll build a simple but realistic employee directory app as our running example throughout.
What you'll learn:
You should have a Microsoft account with access to Power Apps (available at make.powerapps.com). No prior Power Apps experience is required, but you should be comfortable clicking around a web-based interface. No coding background is needed.
When you create a canvas app in Power Apps, you're building a user interface by placing visual elements — buttons, text labels, galleries, input fields — directly onto a screen. Think of it like building a slide in PowerPoint, except the elements can react to data and user interactions.
Here's where beginners get tripped up: Power Apps lets you put any control anywhere on the screen and set its exact pixel position using X and Y coordinates. This feels convenient at first. You drag a label to the top, a button to the bottom, and it looks fine. But the moment someone views your app on a tablet instead of a phone, or you need to add a new element to the middle of your layout, everything breaks. Controls don't automatically shift to accommodate changes — they sit exactly where you put them.
Containers solve this problem. A container is a special type of control that acts as a parent to other controls. Instead of your button knowing its own absolute position on the screen, it knows its position within the container. The container handles where it sits on the screen. This creates a natural hierarchy that makes your layout maintainable and adaptable.
The structural hierarchy of a canvas app looks like this:
App
└── Screen
└── Container (or Layout Container)
└── Controls (labels, buttons, images, etc.)
└── More Containers (nested)
You'll build everything inside this hierarchy today.
Open Power Apps at make.powerapps.com and click Create in the left navigation. Select Blank app, then choose Blank canvas app. Give it a name — let's call it "Employee Directory" — and choose Tablet format. Click Create.
Power Apps will open the studio. What you see is the first screen of your app, labeled "Screen1" in the left panel called the Tree View (if the Tree View isn't visible, click the icon that looks like a layered stack on the far left sidebar). The Tree View is your best friend for understanding structure — it shows every element in your app in a collapsible hierarchy.
Before you do anything else, rename Screen1. In the Tree View, right-click on "Screen1" and select Rename. Call it HomeScreen. Good naming hygiene matters more than it sounds — once you have five or six screens and you're writing formulas that navigate between them, names like "Screen1" and "Screen3" will make you miserable.
For our employee directory, we'll eventually want a home screen and a detail screen. To add a second screen, look at the top of the Tree View panel — there's a small + button next to "Screens." Click it and select Blank. Rename this new screen DetailScreen.
You now have two screens: HomeScreen and DetailScreen. Click each one in the Tree View to switch between them. Notice that the canvas (the main editing area) changes to show the selected screen. This is exactly how your users will experience your app — they see one screen at a time, and navigation formulas tell Power Apps which screen to show next.
Tip: Screens are not like tabs in a spreadsheet. Only one screen is visible to the user at a time. Think of them as separate pages in a document.
A container in Power Apps is an invisible box that holds other controls. It has no built-in visual appearance (no color, no border, unless you add those properties yourself), but it gives you something invaluable: the ability to manage a group of controls as a single unit.
There are two types of containers you need to know about:
1. Plain Container — This is a basic grouping mechanism. Controls inside a plain container sit at their own X/Y positions relative to the container. If you move the container, everything inside moves with it. But the contents don't automatically rearrange themselves.
2. Layout Container — This is the one you'll use most. A layout container has a direction — either Horizontal or Vertical — and it automatically stacks its child controls along that direction. You don't manually set X/Y positions for things inside a layout container. You control spacing, padding, alignment, and sizing, and the container does the arranging.
Think of a plain container like a cardboard box — you put things in and move the box as a unit, but you still have to arrange the items inside yourself. A layout container is more like a magazine's column layout — the content flows into the column automatically, and you just control how much space each item gets.
Without containers, every single control knows its own position on the screen. When you add a new element or change the size of something, nothing else adjusts. With layout containers, you're describing relationships between controls. "These three things should stack vertically, evenly spaced." That description stays true no matter what changes around them.
Let's put this into practice by building the structural shell of our Employee Directory home screen. We'll create a classic three-zone layout: a header bar across the top, a main content area in the middle, and a navigation footer at the bottom.
Click on HomeScreen in the Tree View to make sure you're working on the right screen.
On the left toolbar, click Insert (the + icon). In the search bar that appears, type "Vertical gallery" — actually, let's back up. We want a layout container. Search for "Vertical layout" and you'll see Vertical layout as an option under Layout. Click it.
A vertical layout container will appear on your canvas. In the Properties panel on the right side, set:
By setting Width and Height to Parent.Width and Parent.Height, this container will always stretch to exactly fill the screen, regardless of device dimensions. The parent of a container placed directly on a screen is the screen itself. This formula-based sizing is how you build adaptable layouts.
Rename this container in the Tree View to MainLayout. This is the outer shell that everything else lives inside.
Warning: If you don't set the container to fill the screen, it defaults to a small box in the corner. Always set your root container's size explicitly before adding children.
With MainLayout selected, go to Insert and add another Horizontal layout container. Notice something important: because you inserted it while MainLayout was selected, it became a child of MainLayout. You'll see it nested underneath MainLayout in the Tree View. This is the behavior you want.
Rename this container HeaderBar. In its Properties, set:
RGBA(0, 120, 212, 1) for a professional blueThe Header is horizontal because we might want to put a logo on the left and a title on the right — elements that sit side by side.
Inside HeaderBar, insert a Text label (go to Insert → Text label). The label will automatically become a child of HeaderBar. Set its text property to "Employee Directory" and style it: font size 20, font color white, bold.
Click on MainLayout in the Tree View (not HeaderBar — we want the next container to be a sibling of the header, not nested inside it). Insert a Vertical layout container. Rename it ContentArea. Set:
RGBA(245, 245, 245, 1) (light gray background)The formula Parent.Height - 70 - 60 says "take the total available height and subtract the header (70px) and footer (60px), giving the rest to the content area." This keeps everything adding up to exactly the screen height with no gaps or overlaps.
Click on MainLayout again, and insert one more Horizontal layout container. Rename it FooterNav. Set:
RGBA(240, 240, 240, 1) (a slightly different gray)Inside FooterNav, add a Button control. Set its text to "Home" and its width to Parent.Width / 2 (it takes up half the footer). Add a second button with text "Search" and the same width formula. Because FooterNav is a horizontal layout container, these two buttons will sit side by side automatically.
Your Tree View should now look like this:
HomeScreen
└── MainLayout (Vertical Layout)
├── HeaderBar (Horizontal Layout)
│ └── Label: "Employee Directory"
├── ContentArea (Vertical Layout)
└── FooterNav (Horizontal Layout)
├── Button: "Home"
└── Button: "Search"
This is a real, professional app structure. Every element has a logical home.
The structural shell is in place. Now let's wire up navigation so the app actually does something.
Select the "Search" button in FooterNav. In the formula bar at the top of the studio, you'll see the property dropdown on the left — it probably says "Text." Click that dropdown and select OnSelect. This is the formula that runs when a user taps the button.
Type this formula:
Navigate(DetailScreen, ScreenTransition.Fade)
The Navigate function is how you move between screens. It takes two arguments: the name of the screen you want to go to, and the transition animation style. ScreenTransition.Fade creates a smooth fade between screens. Other options include ScreenTransition.Cover (slides in from the right) and ScreenTransition.None (instant jump).
Tip: Power Apps uses the exact name of the screen as you named it in the Tree View. If your screen is named
DetailScreen, that's what goes in the Navigate formula — no quotes needed, because screen names are references, not strings.
Now switch to DetailScreen in the Tree View. Build a simple shell there: add a full-screen vertical layout container, and inside it add a horizontal layout container as a header. In that header, add a Button with the text "← Back" and set its OnSelect formula to:
Navigate(HomeScreen, ScreenTransition.Fade)
Press the Play button (the triangle in the top-right corner) to preview your app. Click "Search" — you'll fade into the Detail screen. Click "← Back" — you'll return to home. Your app is navigating.
Now that you've built your first structure, let's go deeper on the container properties that control how children are laid out. These are in the Properties panel on the right side when a layout container is selected.
Direction: For layout containers, this shows whether children stack horizontally or vertically. You set this by choosing Horizontal or Vertical when you insert the container — but you can also change it afterward here.
Wrap: When enabled, children that don't fit on one line wrap to the next line, like text in a paragraph. This is useful for tag lists or card grids.
Gap: The amount of space between child controls. Instead of manually setting margins on each child, you set one gap value on the container and it applies between all children uniformly.
Padding: Space between the container's edge and its children. Set Padding Top, Bottom, Left, and Right independently.
Align (Horizontal) and Align (Vertical): These control how children are positioned along each axis. For a vertical layout container, "Align Horizontal" controls whether children are left-aligned, centered, or right-aligned. Setting Align Horizontal to "Center" is how you get a centered column layout without touching individual control positions.
LayoutMode: Some containers have a LayoutMode property that lets you switch between Auto (layout container behavior) and Manual (plain container behavior). This gives you flexibility without adding new containers.
Build the following structure for a simple "Daily Task Tracker" app from scratch:
Screen 1 (TaskListScreen):
RootLayoutAppHeader) with a title label reading "My Tasks" and a button labeled "+ Add Task"TaskList) with three text labels representing task names: "Send Q3 report," "Review design mockup," "Schedule team standup"Screen 2 (AddTaskScreen):
TaskListScreenNavigation:
AddTaskScreenTaskListScreenAs you build, pay attention to which container is selected before you insert new controls. That's the most common source of structure problems.
Controls end up outside the container they were meant for. This happens when you insert a control without the right parent selected in the Tree View. The fix: in the Tree View, drag the misplaced control and drop it onto the correct parent container. Power Apps lets you rearrange the hierarchy by dragging in the Tree View.
The layout container isn't arranging children automatically. Check that the container type is actually a layout container (Horizontal or Vertical), not a plain container. Plain containers don't auto-arrange. Right-click the container in the Tree View and check its properties — if you see a "Direction" property, it's a layout container.
Everything looks fine in the editor, but gaps appear when previewing.
Your height formulas probably don't add up to the parent height. If your header is 70px, content is Parent.Height - 70, and you have no footer, that should be fine. But if you have three zones and their heights don't sum to Parent.Height, you'll see gaps. Always verify that your height formulas account for every pixel.
Navigate formula says "invalid identifier" for the screen name.
Screen names in Navigate formulas must match the Tree View name exactly, including capitalization. DetailScreen and Detailscreen are different things to Power Apps. Also ensure there are no spaces in your screen names — use camelCase or underscores.
A layout container's children aren't visible. Check that the container's Height is not set to 0 or a formula that evaluates to 0. A container with no height renders nothing. Also check that the container isn't hidden behind another control.
Here's what you've built and learned today. You now understand that a canvas app is organized as a hierarchy: App → Screens → Containers → Controls. Screens are the pages of your app, and only one is visible at a time. Containers are grouping mechanisms that let you manage controls collectively. Layout containers (Horizontal and Vertical) go further — they automatically arrange their children, freeing you from pixel-perfect manual positioning.
You built a three-zone shell with a header, content area, and footer using nested layout containers. You wired up screen navigation with the Navigate function and understood the key container properties — Gap, Padding, Wrap, and Align — that give you fine control over spacing and positioning without touching individual controls.
This structural foundation is the single most important thing to understand before you start adding real data and logic to your apps. Every Power Apps feature you learn next — galleries, forms, data connections — gets easier when your app has a solid, intentional structure.
Your next steps in the Canvas Apps 101 path:
ContentArea container to display a scrollable list of recordsIf() function with Navigate to send users to different screens based on their role or a selection they've madeThe blank canvas is no longer intimidating. You know how to structure it.