Styling is an important part of creating a Power App that users will enjoy working with. Many of the primary design options are available under the Properties tab, and the available settings change depending on the type of control you select.
Customize a gallery layout
When working with a gallery, the Layout section allows you to change the default template used by the gallery. Before changing the layout, keep in mind that selecting a different option can overwrite previous code. If you have existing code attached to a control, copy it before changing the layout so you can restore it afterward. For this example, the gallery is changed to a title and subtitle layout. This type of layout could be useful for a list of products sourced from a CRM or ERP system.
Change colors and borders
The Properties tab provides quick ways to adjust the visual appearance of a gallery. For the background fill, you can select from Microsoft’s color palette or use the Custom option to enter your own color. This can be useful when you want an app to follow a company-wide color palette. You can also customize the gallery border by changing properties such as:
- Border size
- Border color
- Border style, including solid, dashed, or dotted lines
Configure scrolling, navigation, and display modes
Gallery properties also include options for scrolling and navigation. A scrollbar can be useful when a gallery contains more items than can fit on the screen. For a smaller gallery embedded within another area, removing the scrollbar may help reduce visual clutter. Display modes control how users can interact with the app. Controls can be disabled, placed in view mode, or left in edit mode. In this example, the gallery remains in edit mode because select triggers are needed within it.
Use the Advanced tab for dynamic styling
Many of the styling properties available through the interface can also be accessed through the Advanced tab. These include settings such as RGBA border colors and border styles. Because these options can be controlled through code, styling can also change dynamically based on interactions in the app. The example demonstrates this by replacing a fixed fill value with a variable. A button’s OnSelect trigger is then used to set that variable to an RGBA value. Selecting the button initializes the variable and changes the fill. If you use this approach, remember to initialize the variable ahead of time if you do not want the control to display its default appearance before the user interacts with it.
Add and style images
Selecting an image changes the Properties tab to show options specific to images. Power Apps provides several ways to add media, including:
- Existing media files
- Stock images
- Uploaded images
The stock image library includes search functionality and categories to help you find an appropriate image. Once an image is selected, you can control how it fits within its container. You can also adjust transparency using a value from 0 to 1, where 0 is fully visible and 1 is fully transparent. Other image properties include:
- Size
- Position
- Padding
- Visibility
- Color
- Borders
- Border radius
- Display mode
Show users when controls are interactive
Visual feedback can make it easier for users to understand which elements of an app they can interact with. Controls include options for different states, such as disabled, hover, and pressed. For example, a button can change its fill and border when someone hovers over or selects it. The same concept can be applied to an interactive image. Adding a noticeable border change when a user hovers over the image helps communicate that the image can be selected. Disabled controls can also use different colors to visually indicate that they are not currently available for interaction.
Format text in your app
Text controls provide many familiar formatting options, including:
- Font
- Font size
- Font style
- Text alignment
- Font color
- Wrapping
- Vertical alignment
- Borders
- Positioning
Auto height settings can also help control how longer text behaves when multiple lines are involved. Formatting can additionally provide information about the state of your app. In the example, bold styling changes based on the most recently selected item, providing another visual cue to the user.
Keep experimenting with your design
These styling options provide a starting point for improving the appearance and usability of a Power App. There are many more ways to customize an app, so experiment with different settings and determine which choices work best for your project. The goal is to use Power Apps’ styling tools to create an experience that is visually consistent, easy to understand, and clear about which elements users can interact with.
