Merge pull request #6600 from MicrosoftDocs/niels9001/widgets

Move a few parts of Widgets to Develop

Author: GrantMeStrength

.openpublishing.redirection.json

@@ -1,5 +1,10 @@
 {
   "redirections": [
+    {
+      "source_path": "hub/apps/design/widgets/widgets-create-a-template.md",
+      "redirect_url": "/windows/apps/develop/widgets/widgets-create-a-template",
+      "redirect_document_id": true
+    },
     {
       "source_path": "hub/apps/design/style/sound.md",
       "redirect_url": "/windows/apps/develop/ui/sound",

hub/apps/design/toc.yml

@@ -104,8 +104,6 @@ items:
           href: widgets/widgets-states-and-ui.md
         - name: Interaction design guidance
           href: widgets/widgets-interaction-design.md
-        - name: Create a template with the Adaptive Card Designer
-          href: widgets/widgets-create-a-template.md
         - name: Integrate with the widget picker
           href: widgets/widgets-picker-integration.md
     - name: Writing

hub/apps/design/widgets/index.md

@@ -77,4 +77,8 @@ Content should dynamically refresh based on available context. It is up to date
 
 [Widget interaction design](widgets-interaction-design.md)
 
-[Create a widget template with the Adaptive Card Designer](widgets-create-a-template.md)
+[Create a widget template with the Adaptive Cards Designer](../../develop/widgets/widgets-create-a-template.md)
+
+## See also
+
+- [Develop Windows Widgets](../../develop/widgets/index.md)

hub/apps/design/widgets/widgets-design-fundamentals.md

@@ -82,7 +82,7 @@ For accessibility, the following table presents the text of the table shown in t
 | Subtitle | 20/28 epx | Large, Bolder |
 | Title | 28/36 epx | Extra Large, Bolder | 
 
-Segoe UI is the typeface used in Widgets and across Windows. The above type ramp includes the formulations of how to properly set the right styles in the Adaptive Cards Designer. Typeface styling should not deviate from the specified formulas above. For more information on using the Adaptive Cards Designer to create widget templates, see [Create a widget template with the Adaptive Card Designer](widgets-create-a-template.md).
+Segoe UI is the typeface used in Widgets and across Windows. The above type ramp includes the formulations of how to properly set the right styles in the Adaptive Cards Designer. Typeface styling should not deviate from the specified formulas above. For more information on using the Adaptive Cards Designer to create widget templates, see [Create a widget template with the Adaptive Cards Designer](../../develop/widgets/widgets-create-a-template.md).
 
 ![Two example widgets with the phrase "The quick brown fox jumped over the lazy dog" and the text "Hyperlink". The left image has dark text on a light background. The right image has light text on a dark background. The hyperlink text is blue in both images.](./images/widgets-designer-default-font-colors.png)
 

hub/apps/develop/toc.yml

@@ -595,6 +595,7 @@ items:
               - name: Test your app's signature with Smart App Control
                 href: smart-app-control/test-your-app-with-smart-app-control.md
           - name: Widgets
+            href: widgets/index.md
             items:
               - name: Feed providers
                 items:
@@ -622,6 +623,8 @@ items:
                     href: widgets/widget-provider-manifest.md
                   - name: ActivateApplication protocol
                     href: widgets/widget-provider-activateapplication-protocol.md
+                  - name: Adaptive Cards Designer
+                    href: widgets/widgets-create-a-template.md
           - name: Windows Search
             href: search/index.md
             items:

hub/apps/develop/widgets/implement-widget-provider-cs.md

@@ -78,7 +78,7 @@ public static Dictionary<string, CompactWidgetInfo> RunningWidgets = new Diction
 
 ## Declare widget template JSON strings
 
-This example will declare some static strings to define the JSON templates for each widget. For convenience, these templates are stored in the member variables of the **WidgetProvider** class. If you need a general storage for the templates - they can be included as part of the application package: [Accessing Package Files](/windows/uwp/app-resources/uri-schemes#ms-appx-and-ms-appx-web). For information on creating the widget template JSON document, see [Create a widget template with the Adaptive Card Designer](../../design/widgets/widgets-create-a-template.md).
+This example will declare some static strings to define the JSON templates for each widget. For convenience, these templates are stored in the member variables of the **WidgetProvider** class. If you need a general storage for the templates - they can be included as part of the application package: [Accessing Package Files](/windows/uwp/app-resources/uri-schemes#ms-appx-and-ms-appx-web). For information on creating the widget template JSON document, see [Create a widget template with the Adaptive Cards Designer](widgets-create-a-template.md).
 
 In the latest release, apps that implement Windows widgets can customize the header that is displayed for their widget in the Widgets Board, overriding the default presentation. For more information, see [Customize the widget header area](widget-header-customization.md).
 

hub/apps/develop/widgets/implement-widget-provider-win32.md

@@ -158,7 +158,7 @@ struct WidgetProvider : winrt::implements<WidgetProvider, winrt::Microsoft::Wind
 
 ## Declare widget template JSON strings
 
-This example will declare some static strings to define the JSON templates for each widget. For convenience, these templates are stored in the local variables declared outside of the **WidgetProvider** class definition. If you need a general storage for the templates - they can be included as part of the application package: [Accessing Package Files](/windows/uwp/app-resources/uri-schemes#ms-appx-and-ms-appx-web). For information on creating the widget template JSON document, see [Create a widget template with the Adaptive Card Designer](../../design/widgets/widgets-create-a-template.md).
+This example will declare some static strings to define the JSON templates for each widget. For convenience, these templates are stored in the local variables declared outside of the **WidgetProvider** class definition. If you need a general storage for the templates - they can be included as part of the application package: [Accessing Package Files](/windows/uwp/app-resources/uri-schemes#ms-appx-and-ms-appx-web). For information on creating the widget template JSON document, see [Create a widget template with the Adaptive Cards Designer](widgets-create-a-template.md).
 
 In the latest release, apps that implement Windows widgets can customize the header that is displayed for their widget in the Widgets Board, overriding the default presentation. For more information, see [Customize the widget header area](widget-header-customization.md).
 

hub/apps/develop/widgets/index.md

@@ -0,0 +1,23 @@
+---
+description: This section of the documentation provides developer guidance for implementing Windows Widgets.
+title: Develop Windows Widgets
+ms.topic: article
+ms.date: 04/08/2026
+ms.localizationpriority: medium
+---
+
+# Develop Windows Widgets
+
+Windows Widgets are small UI containers that display text and graphics, associated with an app installed on the device. Widgets are displayed in a grid on the Widgets Board, a flyout surface that overlays the Windows desktop. They help users stay on top of what's important by surfacing personalized content and quick actions from installed apps. Widget content is defined using the [Adaptive Cards](https://adaptivecards.io/) format, which enables dynamic binding of data to the widget UI.
+
+:::image type="content" source="../../design/widgets/images/widgets-hero-image.png" alt-text="Screenshot of the Widgets Board. The board is a rounded rectangle with the time displayed at the top, followed by a search bar. The rest of the board is a grid of rounded rectangles each representing a widget. The individual widgets show top news stories, current weather, current traffic, etc.":::
+
+For design guidance, see [Windows Widgets design overview](../../design/widgets/index.md).
+
+## In this section
+
+| Topic | Description |
+|--|--|
+| [Feed providers](../feeds/feed-providers.md) | Learn how to register your app's content feeds to appear directly in the Windows Widgets Board. |
+| [Widget providers](widget-providers.md) | Learn how to implement a widget provider that supplies content, layout, and interactive elements for your widgets. |
+| [Adaptive Cards Designer](widgets-create-a-template.md) | Walk through creating a widget template using the Adaptive Cards Designer. |

…ign/widgets/widgets-create-a-template.md …lop/widgets/widgets-create-a-template.mdhub/apps/design/widgets/widgets-create-a-template.md renamed to hub/apps/develop/widgets/widgets-create-a-template.md hub/apps/design/widgets/widgets-create-a-template.md renamed to hub/apps/develop/widgets/widgets-create-a-template.md

@@ -20,7 +20,7 @@ The UI and interaction for Windows Widgets are implemented using [Adaptive Cards
 
 The example in this article is a simple counting widget that displays an integer value and allows the user to increment the value by clicking on a button in the widget's UI. This example template uses data binding to automatically update the UI based on the data context.
 
-Apps need to implement a widget provider to generate and update the widget template and/or data and pass them to the widget host. The article [Implement a widget provider in a win32 app](../../develop/widgets/implement-widget-provider-win32.md) provides step-by-step guidance for implementing the widget provider for the counting widget that we will generate in the steps below.
+Apps need to implement a widget provider to generate and update the widget template and/or data and pass them to the widget host. The article [Implement a widget provider in a win32 app](implement-widget-provider-win32.md) provides step-by-step guidance for implementing the widget provider for the counting widget that we will generate in the steps below.
 
 ## The Adaptive Cards Designer
 
@@ -57,7 +57,7 @@ The counting widget that we will create is very simple, only consisting of 4 [Te
 
 Add four **TextBlock** elements by dragging them from the **Card elements** pane on the left of the page onto the blank adaptive card in the preview pane. At this point, the widget preview should look like the following image. The content again overflows outside of the widget borders, but this will be fixed in the following steps.
 
-:::image type="content" source="images/widgets-designer-walkthrough-1.png" alt-text="An adaptive card in progress. It shows a widget with four lines containing the text New TextBlock. The four lines of text overflow the bottom border of the widget.":::
+:::image type="content" source="../../design/widgets/images/widgets-designer-walkthrough-1.png" alt-text="An adaptive card in progress. It shows a widget with four lines containing the text New TextBlock. The four lines of text overflow the bottom border of the widget.":::
 
 ## Implementing conditional layout
 
@@ -91,11 +91,11 @@ In the Adaptive Cards Template Language, the `$when` property specifies that the
 
 Now the preview should look like the following image:
 
-:::image type="content" source="images/widgets-designer-walkthrough-2.png" alt-text="An adaptive card in progress. It shows a widget with four lines containing the text specified in the JSON payload shown in the previous step. Instead of conditionally hiding elements, all of the elements are visible and overflow the bottom border of the image.":::
+:::image type="content" source="../../design/widgets/images/widgets-designer-walkthrough-2.png" alt-text="An adaptive card in progress. It shows a widget with four lines containing the text specified in the JSON payload shown in the previous step. Instead of conditionally hiding elements, all of the elements are visible and overflow the bottom border of the image.":::
 
 Note that the conditional statements aren't being reflected in the preview. This is because the designer isn't simulating the behavior of the widget host. Click the **Preview mode** button at the top of the page to start the simulation. The widget preview now looks like the following image:
 
-:::image type="content" source="images/widgets-designer-walkthrough-3.png" alt-text="An adaptive card in progress. It shows a widget with two lines containing the text specified in the JSON payload. Only the TextBlock for the small size is rendered.":::
+:::image type="content" source="../../design/widgets/images/widgets-designer-walkthrough-3.png" alt-text="An adaptive card in progress. It shows a widget with two lines containing the text specified in the JSON payload. Only the TextBlock for the small size is rendered.":::
 
 From the **Container size** dropdown, select "Medium" and note that the preview switches to only show the **TextBlock** for the medium size. The container in the preview also changes size, demonstrating how you can use the preview to make sure that your UI fits within the widget container for each supported size.
 
@@ -109,7 +109,7 @@ Our example widget will use a custom state property named "count". You can see i
 
 Note that the preview now inserts the value specified for the *count* property into the text for the first **TextBlock**.
 
-:::image type="content" source="images/widgets-designer-walkthrough-4.png" alt-text="An adaptive card in progress. The first line of text now includes the value 2 from the data payload.":::
+:::image type="content" source="../../design/widgets/images/widgets-designer-walkthrough-4.png" alt-text="An adaptive card in progress. The first line of text now includes the value 2 from the data payload.":::
 
 ## Add a button
 
@@ -129,7 +129,7 @@ With Adaptive Cards, interactive elements are defined with **action** elements.
 ```
 In this JSON string, *type* property specifies the type of action that is being represented. Widgets only support the "Action.Execute" action type. The *title* contains the text that is displayed on the button for the action. The *verb* property is an app-defined string that the widget host will send to the widget provider to communicate the intent associated with the action. A widget can have multiple actions, and the widget provider code will check the value of the verb in the request to determine what action to take.
 
-:::image type="content" source="images/widgets-designer-walkthrough-5.png" alt-text="The final adaptive card. A blue button with the text Increment is displayed after the two text lines.":::
+:::image type="content" source="../../design/widgets/images/widgets-designer-walkthrough-5.png" alt-text="The final adaptive card. A blue button with the text Increment is displayed after the two text lines.":::
 
 ## The complete widget template