Simple Trick to Use Power Apps Containers to Create Texture in Your App

In this insightful video, Brian Knight demonstrates practical ways to enhance the visual appeal of Power Apps canvas applications using the latest container features. Canvas apps often receive feedback for looking “cartoony” or flat, but Brian walks through easy techniques to make your apps appear more polished and professional.

Why Container Features Matter

Brian begins by explaining the importance of the new container properties in Power Apps, such as:

• Drop Shadow: Adds depth to cards and panels, making them appear more three-dimensional.
• Radius: Rounds corners to create smoother, more modern interfaces.

These properties allow developers to move beyond simple rectangles and create elements with a more sophisticated look.

Traditional vs. Modern Approach

He first compares the traditional method of designing info cards:

• Dragging objects into a rectangle.
• Setting a background color.
• Manually arranging each element.

While functional, this method lacks texture and depth. With containers, all elements can be grouped, allowing for easier movement and the addition of drop shadows and corner radii for a more refined appearance.

Creating an Info Card with Containers

Brian demonstrates creating a simple info card using a free-floating container:

1. Insert a container and cut/paste objects inside.
2. Resize the container to fit the intended info card layout.
3. Set a background for the container.
4. Apply the new drop shadow property; Brian suggests experimenting with different depths to find the preferred style.
5. Adjust border radius to round corners, enhancing the card's visual appeal.

He emphasizes that personal preference plays a role in choosing shadow depth and corner radius. Some developers prefer bold shadows for a “popping out” effect, while others opt for subtle textures.

Building a Side Panel

Beyond info cards, Brian also shows how to design side panels using containers:

• Insert a new container for the panel.
• Resize and align the container to the desired side (left or right).
• Set the container background to offset from the main screen.
• Use drop shadow and radius properties to enhance depth and style.
• Link the panel's width and height to the parent container using Parent.Width and Parent.Height for responsive scaling.

This method ensures forms within the panel automatically adjust as the container resizes, creating a seamless user experience.

Adding Interactivity

Brian then adds interactivity to the side panel using variables and the visibility property:

1. Create a context variable (e.g., varShowSidePanel) initialized as false.
2. Assign the variable to the Visible property of the container.
3. Use an icon or button (like an info button or hamburger menu) to toggle the variable using UpdateContext().
4. Optionally, add slide-in/out animations using timers or incremental X property changes for smoother transitions.

These enhancements provide a more dynamic interface, allowing certain fields or actions to appear and disappear based on user interaction.

Advanced Styling Options

Brian briefly touches on advanced radius properties, which allow developers to adjust corners individually (top-left, bottom-left, etc.), giving extra flexibility in design. While not always necessary, these options enable developers to customize their UI with precision.

Conclusion

Brian Knight’s tutorial demonstrates how Power Apps containers, combined with drop shadow and radius properties, can transform canvas apps from flat and “cartoony” to sleek, modern interfaces. By grouping objects in containers, resizing, applying shadows, rounding corners, and adding interactive side panels, developers can create apps with improved depth, style, and functionality.

Don't forget to check out the Pragmatic Works' on-demand learning platform for more insightful content and training sessions on Power Apps and other Microsoft applications. Be sure to subscribe to the Pragmatic Works YouTube channel to stay up-to-date on the latest tips and tricks.