Added Border and corners

samples/bot-formatting-cards/csharp/BotFormattingCards/Cards/AllCards.cs

@@ -211,5 +211,33 @@ public static Attachment sendResponsiveLayoutCard()
             return LayoutCardAdaptiveCardAttachment;
         }
 
+        public static Attachment SendBorderCard()
+        {
+            var paths = new[] { ".", "Resources", "adaptiveCardBorders.json" };
+            var adaptiveCardBorderJson = File.ReadAllText(Path.Combine(paths));
+
+            var BorderAdaptiveCardAttachment = new Attachment()
+            {
+                ContentType = contentType,
+                Content = JsonConvert.DeserializeObject(adaptiveCardBorderJson),
+            };
+
+            return BorderAdaptiveCardAttachment;
+        }
+
+        public static Attachment SendRoundedCornerCard()
+        {
+            var paths = new[] { ".", "Resources", "adaptiveCardRoundedCorners.json" };
+            var adaptiveCardRoundedCornersJson = File.ReadAllText(Path.Combine(paths));
+
+            var RoundedCornersCardAttachment = new Attachment()
+            {
+                ContentType = contentType,
+                Content = JsonConvert.DeserializeObject(adaptiveCardRoundedCornersJson),
+            };
+
+            return RoundedCornersCardAttachment;
+        }
+
     }
 }

samples/bot-formatting-cards/csharp/BotFormattingCards/Dialogs/MainDialog.cs

@@ -117,6 +117,12 @@ private async Task<DialogTurnResult> SelectCardAsync(WaterfallStepContext stepCo
                     // Adaptive Card responsive layout
                     reply.Attachments.Add(AllCards.sendResponsiveLayoutCard());
                     break;
+                case "Border":
+                    reply.Attachments.Add(AllCards.SendBorderCard());
+                    break;
+                case "RoundedCorners":
+                    reply.Attachments.Add(AllCards.SendRoundedCornerCard());
+                    break;
                 default:
                     reply.Attachments.Add(AllCards.sendInfoMasking());
                     reply.Attachments.Add(AllCards.sendFullWidthCardAdaptiveCard());
@@ -127,6 +133,8 @@ private async Task<DialogTurnResult> SelectCardAsync(WaterfallStepContext stepCo
                     reply.Attachments.Add(AllCards.sendPersonaCardIcons());
                     reply.Attachments.Add(AllCards.sendPersonaCardSetIcons());
                     reply.Attachments.Add(AllCards.sendResponsiveLayoutCard());
+                    reply.Attachments.Add(AllCards.SendBorderCard());
+                    reply.Attachments.Add(AllCards.SendRoundedCornerCard());
                     break;
             }
 
@@ -161,6 +169,8 @@ private IList<Choice> loadAllCards()
                     new Choice() { Value = "Persona", Synonyms = new List<string>() { "Persona" } },
                     new Choice() { Value = "PersonaSet", Synonyms = new List<string>() { "PersonaSet" } },
                     new Choice() { Value = "Layout", Synonyms = new List<string>() { "Layout" } },
+                    new Choice() { Value = "Border", Synonyms = new List<string>() { "Border" } },
+                    new Choice() { Value = "RoundedCorners", Synonyms = new List<string>() { "RoundedCorners" } },
                 };
 
                 return returncardOptions;

samples/bot-formatting-cards/csharp/BotFormattingCards/Resources/adaptiveCardBorders.json

@@ -0,0 +1,94 @@
+{
+  "type": "AdaptiveCard",
+  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
+  "version": "1.5",
+  "body": [
+    {
+      "type": "TextBlock",
+      "text": "Below is a **ColumnSet** with borders:",
+      "wrap": true
+    },
+    {
+      "type": "ColumnSet",
+      "showBorder": true,
+      "style": "emphasis",
+      "columns": [
+        {
+          "type": "Column",
+          "width": "stretch",
+          "showBorder": true,
+          "style": "accent",
+          "items": [
+            {
+              "type": "TextBlock",
+              "text": "This is a **Column** with borders",
+              "wrap": true
+            }
+          ]
+        },
+        {
+          "type": "Column",
+          "width": "stretch",
+          "style": "good",
+          "items": [
+            {
+              "type": "TextBlock",
+              "text": "This is a **Column** without borders",
+              "wrap": true
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "Container",
+      "style": "attention",
+      "showBorder": true,
+      "items": [
+        {
+          "type": "TextBlock",
+          "text": "This is a **Container** with borders",
+          "wrap": true
+        }
+      ]
+    },
+    {
+      "type": "Table",
+      "columns": [
+        {
+          "width": 1
+        },
+        {
+          "width": 1
+        }
+      ],
+      "rows": [
+        {
+          "type": "TableRow",
+          "cells": [
+            {
+              "type": "TableCell",
+              "items": [
+                {
+                  "type": "TextBlock",
+                  "text": "This **Table**...",
+                  "wrap": true
+                }
+              ]
+            },
+            {
+              "type": "TableCell",
+              "items": [
+                {
+                  "type": "TextBlock",
+                  "text": "...has borders",
+                  "wrap": true
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

samples/bot-formatting-cards/csharp/BotFormattingCards/Resources/adaptiveCardRoundedCorners.json

@@ -0,0 +1,111 @@
+{
+  "type": "AdaptiveCard",
+  "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
+  "version": "1.5",
+  "body": [
+    {
+      "type": "TextBlock",
+      "text": "Below is a **ColumnSet** with rounded corners:",
+      "wrap": true
+    },
+    {
+      "type": "ColumnSet",
+      "roundedCorners": true,
+      "style": "emphasis",
+      "columns": [
+        {
+          "type": "Column",
+          "width": "stretch",
+          "roundedCorners": true,
+          "showBorder":  true,
+          "style": "accent",
+          "items": [
+            {
+              "type": "TextBlock",
+              "text": "This is a **Column** with rounded corners",
+              "wrap": true
+            }
+          ]
+        },
+        {
+          "type": "Column",
+          "width": "stretch",
+          "showBorder": true,
+          "style": "good",
+          "items": [
+            {
+              "type": "TextBlock",
+              "text": "This is another **Column** without rounded corners",
+              "wrap": true
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "Container",
+      "style": "attention",
+      "roundedCorners": true,
+      "showBorder": true,
+      "items": [
+        {
+          "type": "TextBlock",
+          "text": "This is a **Container** with rounded corners",
+          "wrap": true
+        }
+      ]
+    },
+    {
+      "type": "Table",
+      "style": "accent",
+      "showGridLines": true,
+      "roundedCorners": true,
+      "columns": [
+        {
+          "width": 1
+        },
+        {
+          "width": 1
+        }
+      ],
+      "rows": [
+        {
+          "type": "TableRow",
+          "cells": [
+            {
+              "type": "TableCell",
+              "items": [
+                {
+                  "type": "TextBlock",
+                  "text": "This **Table**...",
+                  "wrap": true
+                }
+              ]
+            },
+            {
+              "type": "TableCell",
+              "items": [
+                {
+                  "type": "TextBlock",
+                  "text": "...has rounded corners",
+                  "wrap": true
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "TextBlock",
+      "text": "The below **Image** has rounded corners:",
+      "wrap": true
+    },
+    {
+      "type": "Image",
+      "url": "https://image.shutterstock.com/image-photo/many-birds-flying-on-dramatic-250nw-2479534023.jpg",
+      "width": "100px",
+      "style": "RoundedCorners"
+    }
+  ]
+}

samples/bot-formatting-cards/csharp/README.md

@@ -23,7 +23,7 @@ This sample feature shows how to use different formatting on cards using bot.
 
 ## Interaction with app
 
-![Types Of Cards](BotFormattingCards/Images/Bot_Formatting_Cards_nodejs_gif.gif)
+![Types Of Cards](BotFormattingCards/Images/bot_formatting_cards.gif)
 
 ## Try it yourself - experience the App in your Microsoft Teams client
 Please find below demo manifest which is deployed on Microsoft Azure and you can try it yourself by uploading the app manifest (.zip file link below) to your teams and/or as a personal app. (Sideloading must be enabled for your tenant, [see steps here](https://docs.microsoft.com/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant#enable-custom-teams-apps-and-turn-on-custom-app-uploading)).
@@ -254,6 +254,14 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
 
 ![Layout](BotFormattingCards/Images/13.Layout.png)
 
+**Border Adaptive Card:**
+
+![Border](BotFormattingCards/Images/14.Border.png)
+
+**Rounded Corners Adaptive Card:**
+
+![Rounded Corners](BotFormattingCards/Images/15.RoundedCorners.png)
+
 **Mobile:**
 
 ![LayoutMobile](BotFormattingCards/Images/14.LayoutMobile.png)

samples/bot-formatting-cards/nodejs/Readme.md

@@ -239,11 +239,17 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
 
 **Adaptive Card updated to be responsive using targetWidth:**
 
-![Layout](Images/13.Layout.png)
+![Layout](Images/14.Layout.png)
+
+**Border Adaptive Card**
+![Border](Images/16.Border.png)
+
+**Rounded Corners Adaptive Card**
+![Border](Images/17.RoundedCorners.png)
 
 **Mobile:**
 
-![LayoutMobile](Images/14.LayoutMobile.png)
+![LayoutMobile](Images/18.LayoutMobile.png)
 
 ## Deploy the bot to Azure
 

samples/bot-formatting-cards/nodejs/bots/botFormattingCards.js

@@ -14,6 +14,8 @@ const PeoplePersonaCardIcon = require('../resources/adaptivePeoplePersonaCardIco
 const PeoplePersonaCardSetIcon = require('../resources/adaptivePeoplePersonaCardSetIcon.json');
 const CodeBlocksCard = require('../resources/codeBlocksCard.json');
 const AdaptiveCardResponsiveLayout = require('../resources/AdaptiveCardResponsiveLayout.json');
+const AdaptiveCardBorders = require('../resources/adaptiveCardBorders.json');
+const AdaptiveCardRoundedCorners = require('../resources/adaptiveCardRoundedCorners.json');
 
 class BotFormattingCards extends ActivityHandler {
     constructor() {
@@ -31,7 +33,7 @@ class BotFormattingCards extends ActivityHandler {
             const text = context.activity.text;
 
             // Create an array with the valid card options.
-            const adaptiveFormatCards = ['CodeBlock', 'MentionSupport', 'InfoMasking', 'FullWidthCard', 'StageViewImages', 'OverflowMenu', 'HTMLConnector', 'CardWithEmoji','Persona','PersonaSet','Layout'];
+            const adaptiveFormatCards = ['CodeBlock', 'MentionSupport', 'InfoMasking', 'FullWidthCard', 'StageViewImages', 'OverflowMenu', 'HTMLConnector', 'CardWithEmoji','Persona','PersonaSet','Layout', 'Borders', 'RoundedCorners'];
 
             // If the `text` is in the Array, a valid card was selected and sends.
             if (adaptiveFormatCards.includes(text)) {
@@ -79,7 +81,15 @@ class BotFormattingCards extends ActivityHandler {
 
                     case "Layout":
                         await context.sendActivity({ attachments: [this.sendLayoutCard()] });
-                        break;                            
+                        break;
+
+                    case "Borders":
+                        await context.sendActivity({ attachments: [this.sendBordersCard()] });
+                        break;
+
+                    case "RoundedCorners":
+                        await context.sendActivity({ attachments: [this.sendRoundedCornersCard()] });
+                        break;
                 }
 
                 await context.sendActivity(`You have Selected <b>${text}</b>`);
@@ -189,6 +199,20 @@ class BotFormattingCards extends ActivityHandler {
         return CardFactory.adaptiveCard(PeoplePersonaCardSetIcon);
     }
 
+     /**
+    * Sends Card showing the use of Borders on columns, columnsets, containers, etc.,
+    */
+    sendBordersCard() {
+        return CardFactory.adaptiveCard(AdaptiveCardBorders);
+    }
+
+     /**
+    Sends Card showing the use of Rounded Corners on columns, columnsets, containers, tables, etc.,
+    */
+    sendRoundedCornersCard() {
+        return CardFactory.adaptiveCard(AdaptiveCardRoundedCorners);
+    }
+
     /**
    * Send AdaptiveCard Fromats to the user.
    * @param {TurnContext} turnContext A TurnContext instance containing all the data needed for processing this conversation turn.
@@ -250,6 +274,16 @@ class BotFormattingCards extends ActivityHandler {
                 title: 'Layout',
                 value: 'Layout'
             },
+            {
+                type: ActionTypes.ImBack,
+                title: 'Borders',
+                value: 'Borders'
+            },
+            {
+                type: ActionTypes.ImBack,
+                title: 'RoundedCorners',
+                value: 'RoundedCorners'
+            },
             {
                 type: ActionTypes.ImBack,
                 title: '',