internal object CreateDomElement_CSSVersion(object parentRef, out object domElementWhereToPlaceChildren)
{
#if !BRIDGE
object outerDiv = base.CreateDomElement(parentRef, out _innerDiv);
#else
object outerDiv = CreateDomElement_WorkaroundBridgeInheritanceBug(parentRef, out _innerDiv);
#endif
domElementWhereToPlaceChildren = _innerDiv;
// Set the element on which the "MaxWidth" and "MaxHeight" properties should be applied (cf. zendesk ticket #1178 where scrollbars inside the ChildWindow did not function properly):
this.INTERNAL_OptionalSpecifyDomElementConcernedByMinMaxHeightAndWidth = _innerDiv;
// Set the "display" CSS property:
dynamic style = INTERNAL_HtmlDomManager.GetDomElementStyleForModification(_innerDiv);
style.display = !Grid_InternalHelpers.isMSGrid() ? style.display = "grid" : Grid_InternalHelpers.INTERNAL_CSSGRID_MS_PREFIX + "grid";
// Normalize the sizes of the rows and columns:
List <ColumnDefinition> normalizedColumnDefinitions = null;
List <RowDefinition> normalizedRowDefinitions = null;
Grid_InternalHelpers.NormalizeWidthAndHeightPercentages(this, _columnDefinitionsOrNull, _rowDefinitionsOrNull, out normalizedColumnDefinitions, out normalizedRowDefinitions);
// Refresh the rows heights and columns widths:
Grid_InternalHelpers.RefreshAllRowsHeight_CSSVersion(this, normalizedColumnDefinitions, normalizedRowDefinitions);
Grid_InternalHelpers.RefreshAllColumnsWidth_CSSVersion(this, normalizedColumnDefinitions, normalizedRowDefinitions);
return(outerDiv);
}
//private double GetRowActualWidth_CSSVersion(RowDefinition rowDefinition)
//{
// //the row's width is basically the width of the whole grid, right?
// if (CSharpXamlForHtml5.Environment.IsRunningInJavaScript)
// {
// return _innerDiv.offsetWidth;
// }
// else
// {
// INTERNAL_SimulatorExecuteJavaScript.ForceExecutionOfAllPendingCode(); // Explanation: we usually optimize performance in the Simulator by postponing the JS code that sets the CSS properties. This reduces the number of interop calls between C# and the browser. However, in the current case here we need to have all the properties already applied in order to be able to calculate the size of the DOM element. Therefore we need to call the "ForceExecution" method.
// return (double)INTERNAL_HtmlDomManager.CastToJsValue_SimulatorOnly(INTERNAL_HtmlDomManager.GetDomElementAttribute(_innerDiv, "offsetWidth"));
// }
//}
private object AddTemporaryDivForRowOrColumnDimensions(int columnIndex, int rowIndex)
{
dynamic div1;
dynamic div1style = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("div", (object)_innerDiv, this, out div1);
div1style.width = "100%";
div1style.height = "100%";
div1style.opacity = "0";
div1style.position = "relative";
bool isMsGrid = Grid_InternalHelpers.isMSGrid();
if (!isMsGrid)
{
div1style.gridColumnStart = (columnIndex + 1).ToString(); //Note: +1 because columns start from 1 instead of 0 in js.
div1style.gridRowStart = (rowIndex + 1).ToString(); //Note: +1 because columns start from 1 instead of 0 in js.
}
else
{
div1style.msGridColumn = (columnIndex + 1).ToString(); //Note: +1 because columns start from 1 instead of 0 in js.
//div1style.msGridColumnSpan = (columnSpan).ToString(); //Note: +1 because columns start from 1 instead of 0 in js and another + 1 because the gridColumnEnd seems to be the column BEFORE WHITCH the span ends.
div1style.msGridRow = (rowIndex + 1).ToString(); //Note: +1 because columns start from 1 instead of 0 in js.
}
return(div1);
}
static void ApplyRowPosition(UIElement element)
{
int maxRow = 0;
if (element.INTERNAL_VisualParent != null && element.INTERNAL_VisualParent is Grid) //Note: this also checks if INTERNAL_VisualTreeManager.IsElementInVisualTree(element) is true because there is no point in setting it on Windows and Popups.
{
Grid parent = (Grid)element.INTERNAL_VisualParent;
if (parent._rowDefinitionsOrNull != null && parent._rowDefinitionsOrNull.Count > 0)
{
maxRow = parent._rowDefinitionsOrNull.Count - 1;
}
int elementRow = GetRow(element);
MakeGridPositionCorrect(ref elementRow, maxRow);
int rowSpan = GetRowSpan(element);
if (rowSpan <= 1)
{
rowSpan = 1;
}
dynamic style = INTERNAL_HtmlDomManager.GetFrameworkElementBoxSizingStyleForModification(element);
bool isMsGrid = Grid_InternalHelpers.isMSGrid();
if (!isMsGrid)
{
int lastRow = elementRow + rowSpan - 1; //note: there was a -1 here before but it seems to not give he result expected.
MakeGridPositionCorrect(ref lastRow, maxRow);
style.gridRowStart = (elementRow + 1).ToString(); //Note: +1 because rows start from 1 instead of 0 in js.
style.gridRowEnd = (lastRow + 2).ToString(); //Note: +1 because rows start from 1 instead of 0 in js and another + 1 because the gridRowEnd seems to be the row BEFORE WHITCH the span ends.
}
else
{
//probably doesn't work, it probably requires to use msGridRow
style.msGridRow = (elementRow + 1).ToString(); //Note: +1 because rows start from 1 instead of 0 in js.
style.msGridRowSpan = (rowSpan).ToString();
}
}
}
private static void ApplyColumnPosition(UIElement element)
{
if (element.IsUnderCustomLayout)
{
return;
}
int maxColumn = 0;
if (element.INTERNAL_VisualParent != null && element.INTERNAL_VisualParent is Grid) //Note: this also checks if INTERNAL_VisualTreeManager.IsElementInVisualTree(element) is true because there is no point in setting it on Windows and Popups.
{
Grid parent = (Grid)element.INTERNAL_VisualParent;
if (parent._columnDefinitionsOrNull != null && parent._columnDefinitionsOrNull.Count > 0)
{
maxColumn = parent._columnDefinitionsOrNull.Count - 1;
int elementColumn = GetColumn(element);
MakeGridPositionCorrect(ref elementColumn, maxColumn);
var style = INTERNAL_HtmlDomManager.GetFrameworkElementBoxSizingStyleForModification(element);
int columnSpan = GetColumnSpan(element);
if (columnSpan <= 1)
{
columnSpan = 1;
}
int lastColumn = elementColumn + columnSpan - 1; //note: there was a -1 here before but it seems to not give he result expected.
MakeGridPositionCorrect(ref lastColumn, maxColumn);
bool isMsGrid = Grid_InternalHelpers.isMSGrid();
if (!isMsGrid)
{
style.gridColumnStart = (elementColumn + 1).ToString(); //Note: +1 because columns start from 1 instead of 0 in js.
style.gridColumnEnd = (lastColumn + 2).ToString(); //Note: +1 because columns start from 1 instead of 0 in js and another + 1 because the gridColumnEnd seems to be the column BEFORE WHITCH the span ends.
}
else
{
style.msGridColumn = (elementColumn + 1).ToString(); //Note: +1 because columns start from 1 instead of 0 in js.
style.msGridColumnSpan = (columnSpan).ToString(); //Note: +1 because columns start from 1 instead of 0 in js and another + 1 because the gridColumnEnd seems to be the column BEFORE WHITCH the span ends.
}
}
}
}
internal void LocallyManageChildrenChanged_CSSVersion()
{
int maxRow = 0;
int maxColumn = 0;
if (RowDefinitions != null && RowDefinitions.Count > 0)
{
maxRow = RowDefinitions.Count - 1;
}
if (ColumnDefinitions != null && ColumnDefinitions.Count > 0)
{
maxColumn = ColumnDefinitions.Count - 1;
}
//UIElement[,] lastElements = new UIElement[maxRow + 1, maxColumn + 1];
foreach (UIElement uiElement in Children)
{
if (INTERNAL_VisualTreeManager.IsElementInVisualTree(uiElement))
{
// Note: the code between here and the "until here" comment can be read as:
// ApplyRowPosition(uiElement);
// ApplyColumnPosition(uiElement);
// It has not been implemented that way because this is slightly more efficient and we need elementRow and elementColumn afterwards.
int elementRow = GetRow(uiElement);
int elementColumn = GetColumn(uiElement);
MakeGridPositionCorrect(ref elementRow, maxRow);
MakeGridPositionCorrect(ref elementColumn, maxColumn);
int rowSpan = GetRowSpan(uiElement);
if (rowSpan < 1)
{
rowSpan = 1;
}
int columnSpan = GetColumnSpan(uiElement);
if (columnSpan < 1)
{
columnSpan = 1;
}
int elementLastRow = rowSpan + elementRow - 1;
int elementLastColumn = columnSpan + elementColumn - 1;
MakeGridPositionCorrect(ref elementLastRow, maxRow);
MakeGridPositionCorrect(ref elementLastColumn, maxColumn);
dynamic style = INTERNAL_HtmlDomManager.GetFrameworkElementBoxSizingStyleForModification(uiElement);
style.zIndex = Canvas.GetZIndex(uiElement).ToString(); // we need this because for some reason, shapes overlap everything in their cell unless everyone has their zIndex set, in which case it depends of the order of the grid's children (which i the normal behaviour).
style.position = "relative";
bool isMsGrid = Grid_InternalHelpers.isMSGrid();
if (!isMsGrid)
{
style.gridRowStart = (elementRow + 1).ToString(); //Note: +1 because rows start from 1 instead of 0 in js.
style.gridColumnStart = (elementColumn + 1).ToString(); //Note: +1 because rows start from 1 instead of 0 in js.
style.gridRowEnd = (elementLastRow + 2).ToString(); //Note: +1 because rows start from 1 instead of 0 in js and another + 1 because the gridRowEnd seems to be the row BEFORE WHITCH the span ends.
style.gridColumnEnd = (elementLastColumn + 2).ToString(); //Note: +1 because columns start from 1 instead of 0 in js and another + 1 because the gridColumnEnd seems to be the column BEFORE WHITCH the span ends.
}
else
{
//probably doesn't work, it probably requires to use msGridRow and msGridColumn and msGridRowSpan and msGridColumnSpan
style.msGridRow = (elementRow + 1).ToString(); //Note: +1 because rows start from 1 instead of 0 in js.
style.msGridColumn = (elementColumn + 1).ToString(); //Note: +1 because rows start from 1 instead of 0 in js.
style.msGridRowSpan = (rowSpan).ToString(); //Note: +1 because rows start from 1 instead of 0 in js and another + 1 because the gridRowEnd seems to be the row BEFORE WHITCH the span ends.
style.msGridColumnSpan = (columnSpan).ToString(); //Note: +1 because columns start from 1 instead of 0 in js and another + 1 because the gridColumnEnd seems to be the column BEFORE WHITCH the span ends.
}
//-------------------------until here-------------------------
style.pointerEvents = "none";
//style.position = "absolute";
//lastElements[elementRow, elementColumn] = uiElement;
//---------------------------------------------------------------
// Handle the column visibility (mainly changed by the DataGrid)
//---------------------------------------------------------------
if (Grid_InternalHelpers.IsAllCollapsedColumns(this, elementColumn, elementLastColumn))
{
CSHTML5.Interop.ExecuteJavaScriptAsync(@"$0.style.overflow = 'hidden'", uiElement.INTERNAL_OuterDomElement);
CSHTML5.Interop.ExecuteJavaScriptAsync(@"$0.setAttribute('data-isCollapsedDueToHiddenColumn', true)", uiElement.INTERNAL_OuterDomElement);
}
else
{
// Note: we set to Visible only if it was previously Hidden due to the fact that a Grid column is hidden, to avoid conflicts such as replacing the "overflow" property set by the ScrollViewer or by the "ClipToBounds" property.
CSHTML5.Interop.ExecuteJavaScriptAsync(@"
if ($0.getAttribute('data-isCollapsedDueToHiddenColumn' == true)){
$0.style.overflow = 'visible';
$0.setAttribute('data-isCollapsedDueToHiddenColumn', false);
}", uiElement.INTERNAL_OuterDomElement);
}
}
}
//for (int i = 0; i <= maxRow; ++i)
//{
// for (int j = 0; j <= maxColumn; ++j)
// {
// UIElement uiElement = lastElements[i, j];
// if (uiElement != null)
// {
// dynamic style = INTERNAL_HtmlDomManager.GetFrameworkElementBoxSizingStyleForModification(uiElement);
// style.position = "relative";
// }
// }
//}
}
public override object CreateDomElement(object parentRef, out object domElementWhereToPlaceChildren)
{
//INTERNAL_HtmlDomManager.GetDomElementStyleForModification(div).position = "absolute";
//div.style.position = "absolute";
//note: size must be set in the div part only (the rest will follow).
_renderedOrientation = this.Orientation;
if (_renderedOrientation == Orientation.Horizontal)
{
//------v1------//
//wrapper for the whole stackpanel:
//<div>
// <table style="height:inherit; border-collapse:collapse">
// <tr>
// ...
// </tr>
// </table>
//</div>
//var table = INTERNAL_HtmlDomManager.CreateDomElement("table");
//table.style.height = "inherit";
//table.style.borderCollapse = "collapse";
//var tr = INTERNAL_HtmlDomManager.CreateDomElement("tr");
//tr.style.padding = "0px";
//INTERNAL_HtmlDomManager.AppendChild(table, tr);
//INTERNAL_HtmlDomManager.AppendChild(div, table);
//domElementWhereToPlaceChildren = tr;
//------v2------//
//wrapper for the whole StackPanel - v2:
// <div style="display:table-row">
// <div style="margin-left: 0px; margin-right: auto; height: 100%">
// ...
// </div>
// </div>
object outerDiv;
dynamic outerDivStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("div", parentRef, this, out outerDiv);
if (INTERNAL_HtmlDomManager.IsInternetExplorer() && !INTERNAL_HtmlDomManager.IsEdge()) //When in Internet Explorer, we need to use display:grid instead of table so that VerticalAlignment.Stretch works (cf StratX.Star in the products page) but we definitely do not want this to be used in Edge as it crashes and causes the whole app to restart (cf ShowcaseApp with CSHTML5 from v1.0 beta 13.2 to RC1 included)
{
outerDivStyle.display = !Grid_InternalHelpers.isMSGrid() ? outerDivStyle.display = "grid" : Grid_InternalHelpers.INTERNAL_CSSGRID_MS_PREFIX + "grid";
}
else
{
outerDivStyle.display = "table";
}
object innerDiv;
dynamic innerDivStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("div", outerDiv, this, out innerDiv);
innerDivStyle.marginLeft = "0px";
innerDivStyle.marginRight = "auto";
innerDivStyle.height = "100%";
innerDivStyle.display = "table";
domElementWhereToPlaceChildren = innerDiv;
return(outerDiv);
}
else
{
#if !BRIDGE
return(base.CreateDomElement(parentRef, out domElementWhereToPlaceChildren));
#else
return(CreateDomElement_WorkaroundBridgeInheritanceBug(parentRef, out domElementWhereToPlaceChildren));
#endif
}
}
