Win11 widget C# help + missing features?

[EdwinVD]

Hi there,

I was playing around with the widget 11 SDK. (https://learn.microsoft.com/en-us/windows/apps/develop/widgets/widget-providers)
But I got a few questions. I hope you can help me with those if not let me know who can help me.

1. How do you create the menu "Customize widget" see attachment screenshot? What parameters do I need to add inside the package.appxmanifest. (My project is C#)
2. Do you have an example C# code to update the widget data for example the weather widget every 15-30 mins?
3. How do you detect dark or light mode inside the widget adaptivecards? I notice you can check widget.size. What is the parameter for check this window theme? I did use C# to detect the theme but they need to re-add it again the widget again for the correct theme

Thanks!
Edwin

[beervoley]

hi @EdwinVD : )

Thanks for trying the Widgets SDK!!! To answer your questions:

1. "Customize widget" menu is not yet supported by the 3rd party widgets. It was added to the roadmap and will be implemented in one of the future releases.
2. We don't have a C# sample with the exact scenario that you've mentioned but a similar to the existing C++ sample C# sample is available but it is still in PR review. You can find it here.
3. You're correct that you can use host.widgetSize to check for the selected size of the widget display on the Dashboard. Similarly, you can check for the current theme using host.hostTheme variable. host.hostTheme variable can be either dark or light and it's case sensitive. It can be used like this:

{
     "text":"Rendering Only if Theme is Light",
     "type":"TextBlock",
     "$when":"${$host.hostTheme==\"light\"}"
},
{
     "text":"Rendering Only if Theme is Dark",
     "type":"TextBlock",
     "$when":"${$host.hostTheme==\"dark\"}"
},

You can find more information about the available host variables here.

[EdwinVD]

@beervoley
Thanks for the reply!!

1. Good let me know when it is ready so I can start testing that function for my widgets.
2. Still not sure about the timer stuff. I check the example but I have that code already before. I notice you just merge it to 'main' brancg now.

I want that the widget update they data.. I use:

private static System.Timers.Timer aTimer;

    private static void SetTimer()
    {
        // Create a timer with a two second interval.
        aTimer = new System.Timers.Timer(6000); // 60seconds
        // Hook up the Elapsed event for the timer. 
        aTimer.Elapsed += OnTimedEvent;
        aTimer.AutoReset = true;
        aTimer.Enabled = true;
    }
    private static void OnTimedEvent(Object source, ElapsedEventArgs e)
    {
       // Get new data - bug?
       var updateOptions = new WidgetUpdateRequestOptions(Id);
       updateOptions.Data = GetDataForWidget();
       updateOptions.CustomState = State;
       WidgetManager.GetDefault().UpdateWidget(updateOptions);
       Console.WriteLine("The Elapsed event was raised at {0:HH:mm:ss.fff}", e.SignalTime);
    }

But that doesn't really update the widget only my console.write log update every 1 min for example.

3. Yeah got it working for my widget. Nice!

Still got some more questions lol
Question 4:
What about if I want to load to 2 images on top of each other on adaptive card. Do you support z-index for and do you have a way to show 2 images on top inside 1 container.

Thanks! Edwin

[beervoley]

hi @EdwinVD : )

To update the Widget on every timer tick you'll need to send updated data every time.
I've made this Timer Widget as an example to get you started. I've omitted some boiler plate details: setting up appxmanifest, making resources, etc. This widget is modification of an existing widget in the C# Sample that you've already seen.
Let's begin:

1. The template for the widget:

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "TextBlock",
      "text": "Timer",
      "size": "Large",
      "weight": "Bolder",
      "wrap": true,
      "style": "heading",
      "horizontalAlignment": "center"
    },
    {
      "type": "TextBlock",
      "text": "Set timer for:",
      "wrap": true,
      "$when": "${!timer_started}"
    },
    {
      "type": "TextBlock",
      "text": "Time left: ${formatTicks(timer_time_left, 'HH:mm:ss')}",
      "wrap": true,
      "$when": "${timer_started}"
    },
    {
      "type": "Input.ChoiceSet",
      "id": "selected_timer_data",
      "value": "${timer_values[0].value} ${timer_values[0].unit_of_time}",
      "choices": [
        {
          "$data": "${timer_values}",
          "title": "${value} ${unit_of_time}",
          "value": "${value} ${unit_of_time}"
        }
      ],
      "$when": "${!timer_started}"
    }
  ],
  "actions": [
    {
      "type": "Action.Execute",
      "title": "Start",
      "verb": "start",
      "$when": "${!timer_started}"
    },
    {
      "type": "Action.Execute",
      "title": "Stop",
      "verb": "stop",
      "$when": "${timer_started}"
    }
  ]
}

2. Since our Widget can be Started and Stopped - we have 2 actions available: start and stop. To properly communicate with the widget when the user clicks Start or Stop button, we'll need to override OnActionInvoked method of our widget:

public override void OnActionInvoked(WidgetActionInvokedArgs actionInvokedArgs)
        {
            if (actionInvokedArgs.Verb == "start")
            {
                start_time = DateTime.UtcNow.Ticks; // Private Member Variable of type long that stores the start time of the timer in ticks

                var dataJSON = JsonObject.Parse(actionInvokedArgs.Data);
                // selected_timer_data JSON field will be in the format "# seconds/minutes/hours" - i.e. "4 seconds", "5 hours", etc.
                // We split the string based on the "space" delimiter and extract the required data.
                var selectedTimerData = dataJSON["selected_timer_data"].ToString().Split(" ");
                var timerValue = Int32.Parse(selectedTimerData[0]); // Number of seconds/minutes/hours

                Enum.TryParse(selectedTimerData[1], true, out unit_of_time); // Unit of time that's been chosen: seconds, minutes or hours.
                
                // Based on the unit of time chosen, we construct the appropriate duration of our timer.
                TimeSpan duration;
                if (unit_of_time == UnitOfTime.Seconds)
                {
                    duration = new TimeSpan(0, 0, timerValue);
                } 
                else if (unit_of_time == UnitOfTime.Minutes)
                {
                    duration = new TimeSpan(0, timerValue, 0);
                }
                else
                {
                    duration = new TimeSpan(timerValue, 0, 0);
                }
                // We save our duration in ticks in member variable timer_duration of type long.
                timer_duration = duration.Ticks;

                var updateOptions = new WidgetUpdateRequestOptions(Id);
                updateOptions.Data = GetDataForWidget(timer_duration, true);
                updateOptions.CustomState = State;
                WidgetManager.GetDefault().UpdateWidget(updateOptions);
                SetTimer(1000);
            }
            else if (actionInvokedArgs.Verb == "stop")
            {
                StopTimer();
                SendStopTimerUpdate();
            }
        }

3. We need some helper functions implemented to make the OnActionInvoked function properly. You can find them their implementations below:

public string GetDataForWidget(long timeLeft, bool ifStarted)
        {
            // Available for selection timer values.
            var timerValuesArray = new JsonArray {
                new JsonObject {
                    ["unit_of_time"] = "seconds",
                    ["value"] = 5
                },
                new JsonObject {
                    ["unit_of_time"] = "minutes",
                    ["value"] = 15
                },
                new JsonObject {
                    ["unit_of_time"] = "minutes",
                    ["value"] = 30
                },
                new JsonObject {
                    ["unit_of_time"] = "hours",
                    ["value"] = 1
                }
            };
            var stateNode = new JsonObject {
                ["timer_time_left"] = timeLeft,
                ["timer_started"] = ifStarted,
                ["timer_values"] = timerValuesArray
            };
            return stateNode.ToJsonString();
        }
private void SetTimer(long interval)
        {
            timer = new Timer(interval);
            timer.Elapsed += OnTimedEvent;
            timer.AutoReset = true;
            timer.Enabled = true;
        }
private void OnTimedEvent(Object source, ElapsedEventArgs e)
        {
            var currentTime = DateTime.UtcNow.Ticks;
            var elapsed = currentTime - start_time;
            var time_left = timer_duration - elapsed;
            if (time_left < 0)
            {
                StopTimer();
                SendStopTimerUpdate();
                return;
            }

            var updateOptions = new WidgetUpdateRequestOptions(Id);
            updateOptions.Data = GetDataForWidget(time_left, true);
            WidgetManager.GetDefault().UpdateWidget(updateOptions);
            Console.WriteLine("The Elapsed event was raised at {0:HH:mm:ss.fff}", e.SignalTime);
        }
private void StopTimer()
        {
            timer.Enabled = false;
            timer.Dispose();
        }
private void SendStopTimerUpdate()
        {
            var updateOptions = new WidgetUpdateRequestOptions(Id);
            updateOptions.Data = GetDataForWidget(0, false);
            updateOptions.CustomState = State;
            WidgetManager.GetDefault().UpdateWidget(updateOptions);
            Console.WriteLine("time was stopped");
        }

4. After all of this done, we can see the working widget:
   

Regarding your last question(4), you could use https://adaptivecards.io/explorer/Container.html. If you simply add two images one after another into Container, they should be displayed one after another vertically :)

To read schema documentation please visit https://adaptivecards.io/explorer/
To see available Adaptive Cards samples please visit https://adaptivecards.io/samples/

[EdwinVD]

@beervoley Thanks I got it working now :-) yeahhh...