Elevate Your App's Look: Curved Image Header in Power Apps

First impressions matter, especially on mobile. A polished header can make your Power Apps solution feel more modern and trustworthy. In this walkthrough we’ll build a team lead dashboard that uses a large background image with a soft curved bottom edge, a personalised greeting, and several grouped task galleries. The curve is created with an inline SVG divider — no external assets needed.

We’ll use our own control names and data structure, so feel free to adapt the same pattern to your own brand and scenario.

The Scenario: Team Lead Dashboard

Imagine a small dashboard for a team lead. After logging in, they see:

• A Priority Task section – the single most important task for today.
• A Daily Duties section – a handful of recurring activities.
• A Follow Ups section – items that need attention from previous days.

The header shows a greeting based on the time of day and the user’s full name, all overlaying a full‑width background image that curves gracefully at the bottom.

Step 1: Laying Out the Screen

Start from a blank mobile canvas app.

1. Insert a Vertical Container and stretch it to fill the whole screen.

   Property	Value
   Height	Parent.Height
   Width	Parent.Width
   X	0
   Y	0
   LayoutOverflowY	LayoutOverflow.Scroll

2. Inside that container place a Container (the directionless kind). Set its Height to a fixed value – we’ll use 385. Turn off Flexible height and make it stretch horizontally.

   Property	Value
   AlignInContainer	AlignInContainer.Stretch
   FlexibleHeight	false
   Height	385

This inner container will hold the header elements stacked on top of each other.

Step 2: Background Image

Add an Image control inside the header container. Expand it to cover the whole container.

Height = Parent.Height
ImagePosition = ImagePosition.Fill
Width = Parent.Width
X = 0
Y = 0

Choose a high‑quality photo (e.g. a city skyline or your own brand image), upload it to the app, and set the Image property of the control to that uploaded file.

Step 3: The Curved Divider (SVG)

The curve is a separate image control that sits on top of the background image and contains an SVG shape.

1. Insert a second Image control into the header container.
2. Place it at the very bottom of the header container.

Height = 100
Width = Parent.Width
X = 0
Y = Parent.Height - Self.Height
ImagePosition = ImagePosition.Stretch

1. Generate the SVG curve using an online tool like ShapeDivider.app. Configure it as follows:

   • Shape: Curve
   • Color: white (#FFFFFF)
   • Flip: No
   • Invert: Yes
   • Top/Bottom: Bottom
   • Height: 100 px
   • Width: 100%

   Download the SVG file and open it in a text editor.

2. Replace every double quote " with a single quote ' so the SVG can be safely embedded in a Power Fx string.

3. Build the final data URI string. The EncodeUrl function makes the SVG safe for the Image property.

"data:image/svg+xml;utf8, " & EncodeUrl(
 "<svg data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z' fill='" & ColorValue("#EDEDED") & "' fill-opacity='1'></path></svg>"
)

Tip: The fill colour (#EDEDED) matches the page background colour below the header. Change it to match your own design.

The divider now masks the bottom of the background image, creating the curved effect.

Step 4: Personalised Greeting

Overlay two labels on top of the background image.

Label 1 – Greeting Text

If(
 Hour(Now()) < 12,
 "Good Morning",
 Hour(Now()) < 17,
 "Good Afternoon",
 "Good Evening"
)

Set the label’s Color to white, Font to your preferred font, and Size to 24.

Label 2 – User Name

User().FullName

Give it Color white, Size 32, and a bold weight. Position both labels comfortably inside the header area, with some padding from the left edge.

Step 5: Task Sections Below the Header

All remaining content sits inside the Vertical Container from Step 1, after the header container.

Priority Task

Add a label with text "⚡ Priority Task". Style it:

• Color = a dark blue (#27437D)
• Fill = light grey (#EDEDED)
• FontWeight = Bold
• Size = 22

Below it place a thin separator label (Height = 1, Fill = ColorValue("#747474")).

Then insert a Blank vertical gallery (flexible height off, stretch horizontally). Set its Height dynamically:

CountRows(Self.AllItems) * Self.TemplateHeight

Use the following Items formula (in production you would replace this with a filtered data source):

Table(
 {TaskTitle: "Client proposal review", Priority: 1},
 {TaskTitle: "Deploy hotfix", Priority: 1}
)

Inside the gallery template:

• A Label with Text = ThisItem.TaskTitle (black, size 18).
• A Separator label that fills the bottom of each row.
• An Icon set to Icon.ChevronRight.

Daily Duties

Repeat the same pattern but with a different section header: "📅 Daily Duties".

Gallery Items:

Table(
 {TaskTitle: "Weekly standup notes"},
 {TaskTitle: "Code review pending"},
 {TaskTitle: "Expense report approval"},
 {TaskTitle: "Team standup call"}
)

Follow Ups

Header text: "📌 Follow Ups".

Gallery Items:

Table(
 {TaskTitle: "Update onboarding docs"},
 {TaskTitle: "Request server logs"},
 {TaskTitle: "Resolve API timeout issue"}
)

Each section uses the same styling as the previous one – you can even reuse a template gallery component to reduce duplication.

Performance & Delegation Notes

• The SVG divider is a tiny inline image. It does not require a separate HTTP request and has negligible performance impact.
• The galleries in this demo use the Table function with static data. When you replace it with a SharePoint list, Dataverse table, or collection, watch for delegation:
  • CountRows(Self.AllItems) works only on the client. If your gallery could contain more than 500 items, consider using a different pagination approach (e.g., a search or load‑more pattern).
  • Filter, Sort, and LookUp are delegable with SharePoint, Dataverse, and SQL Server (depending on the function and column types). Always test with realistic data volumes.

Common Pitfalls & Troubleshooting

Final Thoughts

A curved header is a simple visual trick that makes your app stand out. By combining a high‑quality image with an inline SVG divider, you get a professional look without any custom controls or external assets. The same technique can be used in other screens (detail pages, profile views, etc.) to create visual separation and depth.

Experiment with different SVG shapes (waves, ripples, angles) and colour overlays to match your brand.

References

• Original source article by Matthew Devaney: Power Apps Curved Header UI Design For Mobile Apps
• Microsoft Learn: EncodeUrl function
• Microsoft Learn: User function
• ShapeDivider.app – free SVG divider generator