Windows 10 toast notification icon referencing

Question

I decided to throw away the "old school" windows baloon notifications and use the new windows 10 native toast notifications.

Right now, I'm struggling with referencing an icon for the toast notification. According to the Microsocft documentation (here and here), I should be able to add a notification icon like this:

// Get a toast XML template
var toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastImageAndText04);

// Create image element
var image = toastXml.CreateElement("image");
image.SetAttribute("src", "https://picsum.photos/48?image=883");
image.SetAttribute("placement", "appLogoOverride");
toastXml.DocumentElement.AppendChild(image);

Instead, a default application icon appears:

The only way that is actually working is to use an absolute path to the image:

"file:///" + Path.GetFullPath("../../Assets/myicon.png");

That however, doesn't satisfy my needs because I either need to reference a resource icon or an icon from the web.

Hence my questions:

How can I properly reference a web image (https://picsum.photos/48?image=883) in my toast notification?
How can I properly reference a resource icon?
What image types are allowed in the toast notifications icons? Am I able to reference, for example the .svg image?

@Sinatr Less than 5KB... web image is taken from the documentation. — RA.
@RA. Check this example: code.msdn.microsoft.com/windowsdesktop/… it does what you want imo. — KennyPowers

Nico Zhu - MSFT Nico Zhu - MSFT · Accepted Answer · 2019-05-27T08:43:54

How can I properly reference a web image (https://picsum.photos/48?image=883) in my toast notification?

We could realize toast notification via UWP Community Toolkit Notifications nuget package easily. if you want to reference a web image for AppLogoOverride, please create AppLogoOverride instance and set Source property like the following.

For example:

var toastContent = new ToastContent()
{
    Visual = new ToastVisual()
    {
        BindingGeneric = new ToastBindingGeneric()
        {
            Children = 
            {
                new AdaptiveText()
                {
                    Text = "Matt sent you a friend request"
                },
                new AdaptiveText()
                {
                    Text = "Hey, wanna dress up as wizards and ride around on our hoverboards together?"
                }
            },
            AppLogoOverride = new ToastGenericAppLogo()
            {
                Source = "https://unsplash.it/64?image=1005",
                HintCrop = ToastGenericAppLogoCrop.Circle
            }
        }
    },
    Actions = new ToastActionsCustom()
    {
        Buttons = 
        {
            new ToastButton("Accept", "action=acceptFriendRequest&userId=49183")
            {
                ActivationType = ToastActivationType.Background
            },
            new ToastButton("Decline", "action=declineFriendRequest&userId=49183")
            {
                ActivationType = ToastActivationType.Background
            }
        }
    },
    Launch = "action=viewFriendRequest&userId=49183"
};

// Create the toast notification
var toastNotif = new ToastNotification(toastContent.GetXml());

// And send the notification
ToastNotificationManager.CreateToastNotifier().Show(toastNotif);

How can I properly reference a resource icon?

If you want to reference a resource icon and the icon resource in the Assets folder, you could refer the following code.

new AdaptiveImage()
{
   Source = "Assets/Apps/Food/RestaurantMap.jpg"
}

What image types are allowed in the toast notifications icons? Am I able to reference, for example the .svg image?

For my testing png, jpg and svg image available for toast notifications.

Windows 10 toast notification icon referencing

1 Answers