microsoft / microsoft/AdaptiveCards

[Rendering] Adaptive card with svg background looks great on web; bad in the new winui3 widget board

Open
#9,094 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area-Renderers Bug
Dominant language
C#
Stars
2k
Forks
595
Avg merge
1d 19h
Merged PRs (30d)
1

Description

Target Platforms

Other

SDK Version

Windows Widget Board; no idea

Application Name

MyCollegueas

Problem Description

SVG background looks great in the web renderer while in the winui3 it's nog looking so good. I noticed this difference while building widgets for windows 11. See screenshot and card json below

Screenshots

In the designer; this is also how it looked in the old web based widget board
Image

In the new winui3 widget board

Image

as you see the background is no longer filling the entire card

Card JSON
Card json
`
{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.6",
  "body": [

  ],
  "backgroundImage": {
    "url": "${if(equals($host.hostTheme,'light'), $root.LightBackground, $root.DarkBackground)}"
  }
}
`

Data json
`
{
  "LightBackground": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHZpZXdCb3g9JzAgMCAyIDEnPjxyZWN0IGZpbGw9JyNFQUY0RkYnIHdpZHRoPScyJyBoZWlnaHQ9JzEnLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J2EnIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJyB4MT0nMCcgeDI9JzAnIHkxPScwJyB5Mj0nMSc+PHN0b3Agb2Zmc2V0PScwJyAgc3RvcC1jb2xvcj0nI0VBRjRGRicvPjxzdG9wIG9mZnNldD0nMScgIHN0b3AtY29sb3I9JyNCMEQ4RkYnLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0nYicgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnIHgxPScwJyB5MT0nMCcgeDI9JzAnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnICBzdG9wLWNvbG9yPScjQ0RGM0ZGJyBzdG9wLW9wYWNpdHk9JzAnLz48c3RvcCBvZmZzZXQ9JzEnICBzdG9wLWNvbG9yPScjQ0RGM0ZGJyBzdG9wLW9wYWNpdHk9JzEnLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0nYycgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnIHgxPScwJyB5MT0nMCcgeDI9JzInIHkyPScyJz48c3RvcCAgb2Zmc2V0PScwJyBzdG9wLWNvbG9yPScjQ0RGM0ZGJyBzdG9wLW9wYWNpdHk9JzAnLz48c3RvcCAgb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjQ0RGM0ZGJyBzdG9wLW9wYWNpdHk9JzEnLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PScwJyB5PScwJyBmaWxsPSd1cmwoI2EpJyB3aWR0aD0nMicgaGVpZ2h0PScxJy8+PGcgZmlsbC1vcGFjaXR5PScwLjQyJz48cG9seWdvbiBmaWxsPSd1cmwoI2IpJyBwb2ludHM9JzAgMSAwIDAgMiAwJy8+PHBvbHlnb24gZmlsbD0ndXJsKCNjKScgcG9pbnRzPScyIDEgMiAwIDAgMCcvPjwvZz48L3N2Zz4=",
  "DarkBackground": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHZpZXdCb3g9JzAgMCAyIDEnPjxyZWN0IGZpbGw9JyMwMzA2NkEnIHdpZHRoPScyJyBoZWlnaHQ9JzEnLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J2EnIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJyB4MT0nMCcgeDI9JzAnIHkxPScwJyB5Mj0nMSc+PHN0b3Agb2Zmc2V0PScwJyAgc3RvcC1jb2xvcj0nIzAzMDY2QScvPjxzdG9wIG9mZnNldD0nMScgIHN0b3AtY29sb3I9JyMwNzAxMzMnLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0nYicgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnIHgxPScwJyB5MT0nMCcgeDI9JzAnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnICBzdG9wLWNvbG9yPScjMDAwMjI1JyBzdG9wLW9wYWNpdHk9JzAnLz48c3RvcCBvZmZzZXQ9JzEnICBzdG9wLWNvbG9yPScjMDAwMjI1JyBzdG9wLW9wYWNpdHk9JzEnLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0nYycgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnIHgxPScwJyB5MT0nMCcgeDI9JzInIHkyPScyJz48c3RvcCAgb2Zmc2V0PScwJyBzdG9wLWNvbG9yPScjMDAwMjI1JyBzdG9wLW9wYWNpdHk9JzAnLz48c3RvcCAgb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjMDAwMjI1JyBzdG9wLW9wYWNpdHk9JzEnLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PScwJyB5PScwJyBmaWxsPSd1cmwoI2EpJyB3aWR0aD0nMicgaGVpZ2h0PScxJy8+PGcgZmlsbC1vcGFjaXR5PScwLjUnPjxwb2x5Z29uIGZpbGw9J3VybCgjYiknIHBvaW50cz0nMCAxIDAgMCAyIDAnLz48cG9seWdvbiBmaWxsPSd1cmwoI2MpJyBwb2ludHM9JzIgMSAyIDAgMCAwJy8+PC9nPjwvc3ZnPg==",
}
`
Sample Code Language

No response

Sample Code

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the supplied card JSON in the WinUI3 widget board and compare its SVG background rendering with the web renderer shown in the screenshots. No source file or test is identified in the issue; done means the SVG background fills the card consistently in the WinUI3 renderer without regressing the web behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
desktop
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.