[.NET][WPF][HTML] Fix toggle visibility spacing

samples/Tests/Container.HideAndShowElement.json

@@ -0,0 +1,123 @@
+{
+ "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
+ "type": "AdaptiveCard",
+ "height": "stretch",
+ "version": "1.0",
+ "body": [
+ {
+ "type": "TextBlock",
+ "text": "This test checks if showing an element inside a container that is hiding, will behave correctly by not showing the container",
+ "wrap": true
+ },
+ {
+ "type": "TextBlock",
+ "text": "Container (id1)",
+ "wrap": true
+ },
+ {
+ "type": "Container",
+ "id": "id1",
+ "style": "emphasis",
+ "items": [
+ {
+ "type": "TextBlock",
+ "id": "id2",
+ "text": "TextBlock (id2) inside a container",
+ "wrap": true
+ }
+ ]
+ },
+ {
+ "type": "TextBlock",
+ "text": "Column (id3)",
+ "wrap": true
+ },
+ {
+ "type": "ColumnSet",
+ "columns": [
+ {
+ "type": "Column",
+ "spacing": "large",
+ "id": "id3",
+ "style": "emphasis",
+ "items": [
+ {
+ "type": "TextBlock",
+ "id": "id4",
+ "text": "TextBlock (id4) inside a columnSet",
+ "wrap": true
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "actions": [
+ {
+ "type": "Action.ToggleVisibility",
+ "title": "Hide containers, show element",
+ "targetElements": [ 
+ {
+ "elementId": "id1",
+ "isVisible": false
+ },
+ {
+ "elementId": "id2",
+ "isVisible": true
+ },
+ {
+ "elementId": "id3",
+ "isVisible": false
+ },
+ {
+ "elementId": "id4",
+ "isVisible": true
+ }
+ ]
+ },
+ {
+ "type": "Action.ToggleVisibility",
+ "title": "Show element, hide containers",
+ "targetElements": [ 
+ {
+ "elementId": "id2",
+ "isVisible": true
+ },
+ {
+ "elementId": "id1",
+ "isVisible": false
+ },
+ {
+ "elementId": "id4",
+ "isVisible": true
+ },
+ {
+ "elementId": "id3",
+ "isVisible": false
+ }
+ ]
+ },
+ {
+ "type": "Action.ToggleVisibility",
+ "title": "Show everything",
+ "targetElements": [ 
+ {
+ "elementId": "id1",
+ "isVisible": true
+ },
+ {
+ "elementId": "id2",
+ "isVisible": true
+ },
+ {
+ "elementId": "id3",
+ "isVisible": true
+ },
+ {
+ "elementId": "id4",
+ "isVisible": true
+ }
+ ]
+ }
+ ]
+}

samples/Tests/HideFirstVisibleElementSeparator.json

@@ -0,0 +1,77 @@
+{
+ "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
+ "type": "AdaptiveCard",
+ "version": "1.0",
+ "body": [
+ {
+ "type": "Image",
+ "url": "https://adaptivecards.io/content/cats/1.png",
+ "id": "id1",
+ "isVisible": false,
+ "selectAction": {
+ "type": "Action.ToggleVisibility",
+ "targetElements": [
+ "id2"
+ ]
+ }
+ },
+ {
+ "type": "Container",
+ "id": "id2",
+ "spacing": "large",
+ "selectAction": {
+ "type": "Action.ToggleVisibility",
+ "targetElements": [
+ "id3"
+ ]
+ },
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "There's an image above this but the visibility is set to false. There shouldn't be a spacing above",
+ "wrap": true
+ },
+ {
+ "type": "Image",
+ "url": "https://adaptivecards.io/content/cats/1.png"
+ }
+ ]
+ },
+ {
+ "type": "ColumnSet",
+ "height": "stretch",
+ "spacing": "default",
+ "id": "id3",
+ "selectAction": {
+ "type": "Action.ToggleVisibility",
+ "targetElements": [
+ "id1"
+ ]
+ },
+ "columns": [
+ {
+ "type": "Column",
+ "isVisible": false,
+ "items": [
+ {
+ "type": "TextBlock",
+ "text": "Column 1"
+ }
+ ]
+ },
+ {
+ "type": "Column",
+ "spacing": "large",
+ "items": [
+ {
+ "type": "TextBlock",
+ "wrap": true,
+ "text": "This is the second column. There shouldn't be spacing before this"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "actions": []
+}

source/dotnet/Library/AdaptiveCards.Rendering.Html/AdaptiveCardRenderer.cs

@@ -459,6 +459,8 @@ protected static void AddContainerElements(HtmlTag uiContainer, IList<AdaptiveEl
  {
  if (elements != null)
  {
+ bool isFirstElement = true;
+
  foreach (var cardElement in elements)
  {
  // each element has a row
@@ -489,8 +491,21 @@ protected static void AddContainerElements(HtmlTag uiContainer, IList<AdaptiveEl
  uiSeparator.Style("display", "none");
  }
  }
+ else
+ {
+ // if it's visible and it's the first element, hide the separator
+ if (isFirstElement)
+ {
+ if (uiSeparator != null)
+ {
+ uiSeparator.Style("display", "none");
+ }
+
+ isFirstElement = false;
+ }
+ }
 
- if (!String.IsNullOrEmpty(cardElement.Id))
+ if (!String.IsNullOrWhiteSpace(cardElement.Id))
  {
  uiElement.Attr("name", cardElement.Id);
  }
@@ -648,6 +663,7 @@ protected static HtmlTag ColumnSetRender(AdaptiveColumnSet columnSet, AdaptiveRe
  return 0;
  }).Sum());
 
+ bool isFirstVisibleColumn = true;
  for (int i = 0; i < columnSet.Columns.Count; ++i)
  {
  var column = columnSet.Columns[i];
@@ -719,19 +735,30 @@ protected static HtmlTag ColumnSetRender(AdaptiveColumnSet columnSet, AdaptiveRe
  int spacing = context.Config.GetSpacing(column.Spacing) / 2;
  int lineThickness = column.Separator ? sep.LineThickness : 0;
 
+ separator = new DivTag()
+ .AddClass($"ac-columnseparator")
+ .Style("flex", "0 0 auto")
+ .Style("padding-left", $"{spacing}px")
+ .Style("margin-left", $"{spacing}px")
+ .Style("border-left-style", $"solid");
+
+ // This are the only two properties for separator
  if (sep != null)
  {
- separator = new DivTag()
- .AddClass($"ac-columnseparator")
- .Style("flex", "0 0 auto")
- .Style("padding-left", $"{spacing}px")
- .Style("margin-left", $"{spacing}px")
- .Style("border-left-color", $"{context.GetRGBColor(sep.LineColor)}")
- .Style("border-left-width", $"{lineThickness}px")
- .Style("border-left-style", $"solid");
-
- uiColumnSet.Children.Add(separator);
+ separator.Style("border-left-color", $"{context.GetRGBColor(sep.LineColor)}")
+ .Style("border-left-width", $"{lineThickness}px");
+ }
+
+ uiColumnSet.Children.Add(separator);
+ }
+
+ if (column.IsVisible && isFirstVisibleColumn)
+ {
+ if (separator != null)
+ {
+ separator.Style("display", "none");
  }
+ isFirstVisibleColumn = false;
  }
 
  // do some sizing magic
@@ -1096,7 +1123,7 @@ protected static HtmlTag ImageRender(AdaptiveImage image, AdaptiveRenderContext
  .Style("flex", "1 1 100%");
  }
 
- // if explicit image size is not used, use Adpative Image size
+ // if explicit image size is not used, use Adaptive Image size
  if (image.PixelWidth == 0 && image.PixelHeight == 0)
  {
  switch (image.Size)

source/dotnet/Library/AdaptiveCards.Rendering.Wpf/AdaptiveColumnSetRenderer.cs

@@ -99,7 +99,7 @@ public static FrameworkElement Render(AdaptiveColumnSet columnSet, AdaptiveRende
 
  FrameworkElement uiContainer = context.Render(column);
 
- TagContent tag = new TagContent(AdaptiveSpacing.None, uiColumnSet);
+ TagContent tag = null;
 
  // Add vertical Separator
  if (uiColumnSet.ColumnDefinitions.Count > 0)
@@ -126,7 +126,14 @@ public static FrameworkElement Render(AdaptiveColumnSet columnSet, AdaptiveRende
  Grid.SetColumn(uiSep, uiColumnSet.ColumnDefinitions.Count - 1);
  uiColumnSet.Children.Add(uiSep);
  }
-
+ else
+ {
+ tag = new TagContent(null, uiColumnSet);
+ }
+ }
+ else
+ {
+ tag = new TagContent(null, uiColumnSet);
  }
 
  // do some sizing magic using the magic GridUnitType.Star
@@ -135,42 +142,47 @@ public static FrameworkElement Render(AdaptiveColumnSet columnSet, AdaptiveRende
 #pragma warning disable CS0618 // Type or member is obsolete
  width = column.Size?.ToLower();
 #pragma warning restore CS0618 // Type or member is obsolete
+
+ ColumnDefinition columnDefinition = null;
+
  if (width == null || width == AdaptiveColumnWidth.Stretch.ToLower())
  {
- ColumnDefinition columnDefinition = new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) };
- tag.NotAutoWidthColumnDefinition = columnDefinition;
- tag.ViewIndex = uiColumnSet.ColumnDefinitions.Count;
- uiColumnSet.ColumnDefinitions.Add(columnDefinition);
+ columnDefinition = new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) };
  }
  else if (width == AdaptiveColumnWidth.Auto.ToLower())
- uiColumnSet.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
+ {
+ columnDefinition = new ColumnDefinition() { Width = GridLength.Auto };
+ }
  else
  {
  if (double.TryParse(width, out double val) && val >= 0)
  {
  // Weighted proportion (number only)
- ColumnDefinition columnDefinition = new ColumnDefinition() { Width = new GridLength(val, GridUnitType.Star) };
- tag.NotAutoWidthColumnDefinition = columnDefinition;
- tag.ViewIndex = uiColumnSet.ColumnDefinitions.Count;
- uiColumnSet.ColumnDefinitions.Add(columnDefinition);
+ columnDefinition = new ColumnDefinition() { Width = new GridLength(val, GridUnitType.Star) };
  }
  else if (width.EndsWith("px") && double.TryParse(width.Substring(0, width.Length - 2), out double pxVal) && pxVal >= 0)
  {
  // Exact pixel (number followed by "px")
- ColumnDefinition columnDefinition = new ColumnDefinition() { Width = new GridLength((int)pxVal, GridUnitType.Pixel) };
- tag.NotAutoWidthColumnDefinition = columnDefinition;
- tag.ViewIndex = uiColumnSet.ColumnDefinitions.Count;
- uiColumnSet.ColumnDefinitions.Add(columnDefinition);
+ columnDefinition = new ColumnDefinition() { Width = new GridLength((int)pxVal, GridUnitType.Pixel) };
  }
  else
- uiColumnSet.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto });
+ {
+ columnDefinition = new ColumnDefinition() { Width = GridLength.Auto };
+ }
  }
 
- uiContainer.Tag = tag;
- context.SetVisibility(uiContainer, column.IsVisible, tag);
+ // Store the column definition in the tag so we can toggle the visibility later
+ tag.ColumnDefinition = columnDefinition;
+ tag.ViewIndex = uiColumnSet.ColumnDefinitions.Count;
+
+ uiColumnSet.ColumnDefinitions.Add(columnDefinition);
 
+ uiContainer.Tag = tag;
+
  Grid.SetColumn(uiContainer, uiColumnSet.ColumnDefinitions.Count - 1);
  uiColumnSet.Children.Add(uiContainer);
+
+ context.SetVisibility(uiContainer, column.IsVisible, tag);
  }
 
  context.ResetSeparatorVisibilityInsideContainer(uiColumnSet);