Skip to content

Commit

Permalink
[.NET][WPF][HTML] Fix bleed bugs (microsoft#2682)
Browse files Browse the repository at this point in the history 
* Fix WPF rendering

* Fix HTML renderer

* Remove debugging lines

* Fixes test card
  • Loading branch information
@almedina-ms
almedina-ms committed Apr 19, 2019
1 parent ed3774e commit 41d34cb
Show file tree
Hide file tree
Showing 5 changed files with 186 additions and 94 deletions.
129 changes: 84 additions & 45 deletions source/dotnet/Library/AdaptiveCards.Rendering.Html/AdaptiveCardRenderer.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -513,10 +513,11 @@ protected static HtmlTag ColumnRender(AdaptiveColumn column, AdaptiveRenderConte
var uiColumn = new DivTag()
.AddClass($"ac-{column.Type.Replace(".", "").ToLower()}")
.Style("display", "flex")
.Style("flex-direction", "column");
.Style("flex-direction", "column")
.Style("min-width", "0px");

var parentRenderArgs = context.RenderArgs;
var elementRenderArgs = new AdaptiveRenderArgs(parentRenderArgs);
var childRenderArgs = new AdaptiveRenderArgs(parentRenderArgs);

if (column.PixelMinHeight > 0)
{
Expand All @@ -543,7 +544,7 @@ protected static HtmlTag ColumnRender(AdaptiveColumn column, AdaptiveRenderConte
ContainerStyleConfig containerStyle = context.Config.ContainerStyles.GetContainerStyleConfig(column.Style);
uiColumn.Style("background-color", context.GetRGBColor(containerStyle.BackgroundColor));

elementRenderArgs.ForegroundColors = containerStyle.ForegroundColors;
childRenderArgs.ForegroundColors = containerStyle.ForegroundColors;
}

switch (column.VerticalContentAlignment)
Expand All @@ -561,9 +562,17 @@ protected static HtmlTag ColumnRender(AdaptiveColumn column, AdaptiveRenderConte
}

// Modify context outer parent style so padding necessity can be determined
elementRenderArgs.ParentStyle = (inheritsStyleFromParent) ? parentRenderArgs.ParentStyle : column.Style.Value;
elementRenderArgs.HasParentWithPadding = hasPadding;
context.RenderArgs = elementRenderArgs;
childRenderArgs.ParentStyle = (inheritsStyleFromParent) ? parentRenderArgs.ParentStyle : column.Style.Value;

// If the column has no padding or has padding and doesn't bleed, then the children can bleed
// to the side the column would have bled
if (hasPadding)
{
childRenderArgs.BleedDirection = BleedDirection.Both;
}

childRenderArgs.HasParentWithPadding = hasPadding;
context.RenderArgs = childRenderArgs;

AddContainerElements(uiColumn, column.Items, context);

Expand All @@ -578,7 +587,6 @@ protected static HtmlTag ColumnSetRender(AdaptiveColumnSet columnSet, AdaptiveRe
{
var uiColumnSet = new DivTag()
.AddClass($"ac-{columnSet.Type.Replace(".", "").ToLower()}")
.Style("overflow", "hidden")
.Style("display", "flex");

if (!columnSet.IsVisible)
Expand All @@ -589,7 +597,7 @@ protected static HtmlTag ColumnSetRender(AdaptiveColumnSet columnSet, AdaptiveRe
AddSelectAction(uiColumnSet, columnSet.SelectAction, context);

var parentRenderArgs = context.RenderArgs;
var elementRenderArgs = new AdaptiveRenderArgs(parentRenderArgs);
var childrenRenderArgs = new AdaptiveRenderArgs(parentRenderArgs);

bool inheritsStyleFromParent = !columnSet.Style.HasValue;
bool hasPadding = false;
Expand All @@ -599,11 +607,11 @@ protected static HtmlTag ColumnSetRender(AdaptiveColumnSet columnSet, AdaptiveRe
// Apply background color
var columnSetStyle = context.Config.ContainerStyles.GetContainerStyleConfig(columnSet.Style);
uiColumnSet.Style("background-color", context.GetRGBColor(columnSetStyle.BackgroundColor));
childrenRenderArgs.ForegroundColors = columnSetStyle.ForegroundColors;
}

// Modify context outer parent style so padding necessity can be determined
elementRenderArgs.ParentStyle = (inheritsStyleFromParent) ? parentRenderArgs.ParentStyle : columnSet.Style.Value;
elementRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childrenRenderArgs.ParentStyle = (inheritsStyleFromParent) ? parentRenderArgs.ParentStyle : columnSet.Style.Value;

var max = Math.Max(1.0, columnSet.Columns.Select(col =>
{
Expand All @@ -620,27 +628,61 @@ protected static HtmlTag ColumnSetRender(AdaptiveColumnSet columnSet, AdaptiveRe
{
var column = columnSet.Columns[i];

var columnRenderArgs = new AdaptiveRenderArgs(elementRenderArgs);
if (columnSet.Columns.Count == 1)
var childRenderArgs = new AdaptiveRenderArgs(childrenRenderArgs);

if (hasPadding)
{
columnRenderArgs.ColumnRelativePosition = ColumnPositionEnum.Only;
if (columnSet.Columns.Count == 1)
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Both;
}
else
{
if (i == 0)
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Left;
}
else if (i == (columnSet.Columns.Count - 1))
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Right;
}
else
{
childRenderArgs.BleedDirection = BleedDirection.None;
}
}
}
else
{
if (i == 0)
{
columnRenderArgs.ColumnRelativePosition = ColumnPositionEnum.Begin;
}
else if (i == (columnSet.Columns.Count - 1))
if (columnSet.Columns.Count == 1)
{
columnRenderArgs.ColumnRelativePosition = ColumnPositionEnum.End;
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = parentRenderArgs.BleedDirection;
}
else
{
columnRenderArgs.ColumnRelativePosition = ColumnPositionEnum.Intermediate;
if (i == 0 &&
(childRenderArgs.BleedDirection == BleedDirection.Left || childRenderArgs.BleedDirection == BleedDirection.Both))
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Left;
}
else if (i == (columnSet.Columns.Count - 1) &&
(childRenderArgs.BleedDirection == BleedDirection.Right || childRenderArgs.BleedDirection == BleedDirection.Both))
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Right;
}
else
{
childRenderArgs.BleedDirection = BleedDirection.None;
}
}
}
context.RenderArgs = columnRenderArgs;
context.RenderArgs = childRenderArgs;

var uiColumn = context.Render(column);

Expand Down Expand Up @@ -728,7 +770,7 @@ protected static HtmlTag ContainerRender(AdaptiveContainer container, AdaptiveRe

// Keep track of ContainerStyle.ForegroundColors before Container is rendered
var parentRenderArgs = context.RenderArgs;
var elementRenderArgs = new AdaptiveRenderArgs(parentRenderArgs);
var childRenderArgs = new AdaptiveRenderArgs(parentRenderArgs);

bool inheritsStyleFromParent = !container.Style.HasValue;
bool hasPadding = false;
Expand All @@ -739,9 +781,15 @@ protected static HtmlTag ContainerRender(AdaptiveContainer container, AdaptiveRe
ContainerStyleConfig containerStyle = context.Config.ContainerStyles.GetContainerStyleConfig(container.Style);
uiContainer.Style("background-color", context.GetRGBColor(containerStyle.BackgroundColor));

elementRenderArgs.ForegroundColors = containerStyle.ForegroundColors;
childRenderArgs.ForegroundColors = containerStyle.ForegroundColors;
}

if (hasPadding)
{
childRenderArgs.BleedDirection = BleedDirection.Both;
}
elementRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);

childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);

switch (container.VerticalContentAlignment)
{
Expand All @@ -758,8 +806,8 @@ protected static HtmlTag ContainerRender(AdaptiveContainer container, AdaptiveRe
}

// Modify context outer parent style so padding necessity can be determined
elementRenderArgs.ParentStyle = (inheritsStyleFromParent) ? parentRenderArgs.ParentStyle : container.Style.Value;
context.RenderArgs = elementRenderArgs;
childRenderArgs.ParentStyle = (inheritsStyleFromParent) ? parentRenderArgs.ParentStyle : container.Style.Value;
context.RenderArgs = childRenderArgs;

AddContainerElements(uiContainer, container.Items, context);

Expand Down Expand Up @@ -1882,30 +1930,21 @@ private static bool ApplyPadding(HtmlTag uiElement, AdaptiveCollectionElement el
.Style("padding-top", padding + "px")
.Style("padding-bottom", padding + "px");

if (element.Bleed && context.RenderArgs.HasParentWithPadding)
if (element.Bleed)
{
// Columns have a special rendering behaviour, only the leftmost and rightmost columns must bleed
if (element is AdaptiveColumn column)
int leftMargin = 0, rightMargin = 0;
if (parentRenderArgs.BleedDirection == BleedDirection.Left || parentRenderArgs.BleedDirection == BleedDirection.Both)
{
if (parentRenderArgs.ColumnRelativePosition == ColumnPositionEnum.Begin)
{
uiElement.Style("margin-left", -padding + "px");
}
else if (parentRenderArgs.ColumnRelativePosition == ColumnPositionEnum.End)
{
uiElement.Style("margin-right", -padding + "px");
}
else if (parentRenderArgs.ColumnRelativePosition == ColumnPositionEnum.Only)
{
uiElement.Style("margin-right", -padding + "px")
.Style("margin-left", -padding + "px");
}
leftMargin = -padding;
}
else

if (parentRenderArgs.BleedDirection == BleedDirection.Right || parentRenderArgs.BleedDirection == BleedDirection.Both)
{
uiElement.Style("margin-right", -padding + "px")
.Style("margin-left", -padding + "px");
rightMargin = -padding;
}

uiElement.Style("margin-right", rightMargin + "px")
.Style("margin-left", leftMargin + "px");
}
}

Expand Down
20 changes: 12 additions & 8 deletions source/dotnet/Library/AdaptiveCards.Rendering.Wpf/AdaptiveColumnRenderer.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ public static FrameworkElement Render(AdaptiveColumn column, AdaptiveRenderConte

// Keep track of ContainerStyle.ForegroundColors before Container is rendered
var parentRenderArgs = context.RenderArgs;
var elementRenderArgs = new AdaptiveRenderArgs(parentRenderArgs);
// This is the renderArgs that will be passed down to the children
var childRenderArgs = new AdaptiveRenderArgs(parentRenderArgs);

Border border = new Border();
border.Child = uiContainer;
Expand All @@ -31,18 +32,21 @@ public static FrameworkElement Render(AdaptiveColumn column, AdaptiveRenderConte
ContainerStyleConfig containerStyle = context.Config.ContainerStyles.GetContainerStyleConfig(column.Style);
border.Background = context.GetColorBrush(containerStyle.BackgroundColor);

elementRenderArgs.ForegroundColors = containerStyle.ForegroundColors;
childRenderArgs.ForegroundColors = containerStyle.ForegroundColors;
}

elementRenderArgs.ParentStyle = (inheritsStyleFromParent) ? parentRenderArgs.ParentStyle : column.Style.Value;
if ((parentRenderArgs.ColumnRelativePosition == ColumnPositionEnum.Begin) ||
(parentRenderArgs.ColumnRelativePosition == ColumnPositionEnum.End))
childRenderArgs.ParentStyle = (inheritsStyleFromParent) ? parentRenderArgs.ParentStyle : column.Style.Value;

// If the column has no padding or has padding and doesn't bleed, then the children can bleed
// to the side the column would have bled
if (columnHasPadding)
{
elementRenderArgs.ColumnRelativePosition = ColumnPositionEnum.Intermediate;
childRenderArgs.BleedDirection = BleedDirection.Both;
}

elementRenderArgs.HasParentWithPadding = columnHasPadding;
context.RenderArgs = elementRenderArgs;
// If either this column or an ancestor had padding, then the children will have an ancestor with padding
childRenderArgs.HasParentWithPadding = (columnHasPadding || parentRenderArgs.HasParentWithPadding);
context.RenderArgs = childRenderArgs;

AdaptiveContainerRenderer.AddContainerElements(uiContainer, column.Items, context);

Expand Down
65 changes: 50 additions & 15 deletions source/dotnet/Library/AdaptiveCards.Rendering.Wpf/AdaptiveColumnSetRenderer.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ public static FrameworkElement Render(AdaptiveColumnSet columnSet, AdaptiveRende

// Keep track of ContainerStyle.ForegroundColors before Container is rendered
var parentRenderArgs = context.RenderArgs;
var elementRenderArgs = new AdaptiveRenderArgs(parentRenderArgs);
// This is the renderArgs that will be the base for all the columns renderArgs
var childrenRenderArgs = new AdaptiveRenderArgs(parentRenderArgs);

Border border = new Border();
border.Child = uiColumnSet;
Expand All @@ -28,37 +29,71 @@ public static FrameworkElement Render(AdaptiveColumnSet columnSet, AdaptiveRende
var columnSetStyle = context.Config.ContainerStyles.GetContainerStyleConfig(columnSet.Style);

border.Background = context.GetColorBrush(columnSetStyle.BackgroundColor);
elementRenderArgs.ForegroundColors = columnSetStyle.ForegroundColors;
childrenRenderArgs.ForegroundColors = columnSetStyle.ForegroundColors;
}

elementRenderArgs.ParentStyle = (inheritsStyleFromParent) ? parentRenderArgs.ParentStyle : columnSet.Style.Value;
elementRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childrenRenderArgs.ParentStyle = (inheritsStyleFromParent) ? parentRenderArgs.ParentStyle : columnSet.Style.Value;

for (int i = 0; i < columnSet.Columns.Count; ++i)
{
AdaptiveColumn column = columnSet.Columns[i];

var columnRenderArgs = new AdaptiveRenderArgs(elementRenderArgs);
if (columnSet.Columns.Count == 1)
var childRenderArgs = new AdaptiveRenderArgs(childrenRenderArgs);

if (hasPadding)
{
columnRenderArgs.ColumnRelativePosition = ColumnPositionEnum.Only;
if (columnSet.Columns.Count == 1)
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Both;
}
else
{
if (i == 0)
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Left;
}
else if (i == (columnSet.Columns.Count - 1))
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Right;
}
else
{
childRenderArgs.BleedDirection = BleedDirection.None;
}
}
}
else
{
if (i == 0)
{
columnRenderArgs.ColumnRelativePosition = ColumnPositionEnum.Begin;
}
else if (i == (columnSet.Columns.Count - 1))
if (columnSet.Columns.Count == 1)
{
columnRenderArgs.ColumnRelativePosition = ColumnPositionEnum.End;
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = parentRenderArgs.BleedDirection;
}
else
{
columnRenderArgs.ColumnRelativePosition = ColumnPositionEnum.Intermediate;
if (i == 0 &&
(childRenderArgs.BleedDirection == BleedDirection.Left || childRenderArgs.BleedDirection == BleedDirection.Both))
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Left;
}
else if (i == (columnSet.Columns.Count - 1) &&
(childRenderArgs.BleedDirection == BleedDirection.Right || childRenderArgs.BleedDirection == BleedDirection.Both))
{
childRenderArgs.HasParentWithPadding = (hasPadding || parentRenderArgs.HasParentWithPadding);
childRenderArgs.BleedDirection = BleedDirection.Right;
}
else
{
childRenderArgs.BleedDirection = BleedDirection.None;
}
}
}
context.RenderArgs = columnRenderArgs;

context.RenderArgs = childRenderArgs;

FrameworkElement uiContainer = context.Render(column);

Expand Down
Loading

0 comments on commit 41d34cb

Please sign in to comment.