public override object CreateDomElement(object parentRef, out object domElementWhereToPlaceChildren)
{
//<img style="width: 100%; height: 100%;" src="C:\Users\Sylvain\Documents\Adventure Maker v4.7\Projects\ASA_game\Icons\settings.ico" alt="settings" />
var div = INTERNAL_HtmlDomManager.CreateDomElementAndAppendIt("div", parentRef, this);
var intermediaryDomStyle = INTERNAL_HtmlDomManager.GetDomElementStyleForModification(div);
intermediaryDomStyle.lineHeight = "0px"; //this one is to fix in Firefox the few pixels gap that appears below the image whith certain displays (table, table-cell and possibly some others)
var img = INTERNAL_HtmlDomManager.CreateDomElementAndAppendIt("img", div, this);
INTERNAL_HtmlDomManager.SetDomElementAttribute(img, "src", TransparentGifOnePixel);
INTERNAL_HtmlDomManager.SetDomElementAttribute(img, "alt", " "); //the text displayed when the image cannot be found. We set it as an empty string since there is nothing in Xaml
var style = INTERNAL_HtmlDomManager.GetDomElementStyleForModification(img);
style.display = "block"; //this is to avoid a random few pixels wide gap below the image.
style.width = "0"; // Defaulting to 0 because if there is no source set, we want the 1x1 transparent placeholder image to be sure to take no space. If the source is set, it will then be set to "inherit"
style.height = "0"; // Same as above.
style.objectPosition = "center top";
CSHTML5.Interop.ExecuteJavaScriptAsync(@"
$0.addEventListener('mousedown', function(e) {
e.preventDefault();
}, false);
$0.addEventListener('error', function(e) {
this.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
this.style.width = 0;
this.style.height = 0;
});
", img);
_imageDiv = img;
domElementWhereToPlaceChildren = null;
return(div);
}
public override object CreateDomElement(object parentRef, out object domElementWhereToPlaceChildren)
{
dynamic passwordField = INTERNAL_HtmlDomManager.CreateDomElementAndAppendIt("input", parentRef, this);
domElementWhereToPlaceChildren = passwordField; // Note: this value is used by the Padding_Changed method to set the padding of the PasswordBox.
INTERNAL_HtmlDomManager.SetDomElementAttribute(passwordField, "type", "password", forceSimulatorExecuteImmediately: true);
//passwordField.type = "password";
//-----------------------
// Prepare to raise the "TextChanged" event and to update the value of the "Text" property when the DOM text changes:
//-----------------------
//todo: why did we put this here instead of in INTERNAL_AttachToDomEvents?
if (IsRunningOnInternetExplorer())
{
//-----------------------
// Fix "input" event not working under IE:
//-----------------------
this.GotFocus += InternetExplorer_GotFocus;
this.LostFocus += InternetExplorer_LostFocus;
INTERNAL_EventsHelper.AttachToDomEvents("textinput", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("paste", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("cut", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("keyup", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("delete", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("mouseup", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
}
else
{
//-----------------------
// Modern browsers
//-----------------------
INTERNAL_EventsHelper.AttachToDomEvents("input", passwordField, (Action <object>)(e =>
{
PasswordAreaValueChanged();
}));
}
//textArea.style.resize = "none"; //to avoid letting the posibility to the user to resize the TextBox
return(passwordField);
}
private void RefreshSource()
{
if (Source != null)
{
Loaded += Image_Loaded;
if (Source is BitmapImage)
{
BitmapImage sourceAsBitmapImage = (BitmapImage)Source;
if (sourceAsBitmapImage.UriSource != null)
{
Uri sourceUri = null;
sourceUri = ((BitmapImage)Source).UriSource;
string html5Path = INTERNAL_UriHelper.ConvertToHtml5Path(sourceUri.OriginalString, this);
INTERNAL_HtmlDomManager.SetDomElementAttribute(_imageDiv, "src", html5Path);
}
else if (sourceAsBitmapImage.INTERNAL_StreamSource != null)
{
string dataUrl = "data:image/png;base64," + sourceAsBitmapImage.INTERNAL_StreamAsBase64String;
INTERNAL_HtmlDomManager.SetDomElementAttribute(_imageDiv, "src", dataUrl);
}
else if (!string.IsNullOrEmpty(sourceAsBitmapImage.INTERNAL_DataURL))
{
string dataUrl = sourceAsBitmapImage.INTERNAL_DataURL;
INTERNAL_HtmlDomManager.SetDomElementAttribute(_imageDiv, "src", dataUrl);
}
}
}
else
{
INTERNAL_HtmlDomManager.SetDomElementAttribute(_imageDiv, "src", "");
}
INTERNAL_HtmlDomManager.SetDomElementAttribute(_imageDiv, "alt", " "); //the text displayed when the image cannot be found. We set it as an empty string since there is nothing in Xaml
}
public override object CreateDomElement(object parentRef, out object domElementWhereToPlaceChildren)
{
//<img style="width: 100%; height: 100%;" src="C:\Users\Sylvain\Documents\Adventure Maker v4.7\Projects\ASA_game\Icons\settings.ico" alt="settings" />
var div = INTERNAL_HtmlDomManager.CreateDomElementAndAppendIt("div", parentRef, this);
var img = INTERNAL_HtmlDomManager.CreateDomElementAndAppendIt("img", div, this);
INTERNAL_HtmlDomManager.SetDomElementAttribute(img, "alt", " "); //the text displayed when the image cannot be found. We set it as an empty string since there is nothing in Xaml
var style = INTERNAL_HtmlDomManager.GetDomElementStyleForModification(img);
style.display = "block"; //this is to avoid a random few pixels wide gap below the image.
style.width = "100%";
style.height = "100%";
style.objectPosition = "center top";
CSHTML5.Interop.ExecuteJavaScriptAsync(@"
$0.addEventListener('mousedown', function(e) {
e.preventDefault();
}, false);", img);
_imageDiv = img;
domElementWhereToPlaceChildren = null;
return(div);
}
protected internal override void INTERNAL_OnAttachedToVisualTree()
{
bool isUsingNativeHtml5RadioButtonRatherThanAControlTemplate = (this.INTERNAL_OptionalSpecifyDomElementConcernedByFocus != null); // Faster than checking if (radioButton.Template != null) because the latter is a DependencyProperty.
if (isUsingNativeHtml5RadioButtonRatherThanAControlTemplate)
{
if (string.IsNullOrWhiteSpace(GroupName))
{
INTERNAL_HtmlDomManager.SetDomElementAttribute(this.INTERNAL_OptionalSpecifyDomElementConcernedByFocus, "name", ((UIElement)INTERNAL_VisualParent).INTERNAL_ChildrenRadioButtonDefaultName, forceSimulatorExecuteImmediately: true);
}
}
}
void ManageDomBoolProperty_Changed(string htmlPropertyName, bool newValue)
{
if (INTERNAL_VisualTreeManager.IsElementInVisualTree(this) && _mediaElement != null)
{
if (newValue)
{
INTERNAL_HtmlDomManager.SetDomElementAttribute(_mediaElement, htmlPropertyName, "true");
}
else
{
INTERNAL_HtmlDomManager.RemoveDomElementAttribute(_mediaElement, htmlPropertyName, forceSimulatorExecuteImmediately: true);
}
}
}
internal static object CreateDomElement(ToggleButton checkBoxOrRadioButton, string domInputType, object parentRef, out object domElementWhereToPlaceChildren)
{
object outerDiv;
var outerDivStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("div", parentRef, checkBoxOrRadioButton, out outerDiv);
object divInBetween;
var divInBetweenStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("div", outerDiv, checkBoxOrRadioButton, out divInBetween);
object innerElement;
var innerElementStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("input", divInBetween, checkBoxOrRadioButton, out innerElement);
INTERNAL_HtmlDomManager.SetDomElementAttribute(innerElement, "type", domInputType, forceSimulatorExecuteImmediately: true);
//we simulate a Horizontal StackPanel (1/2):
divInBetweenStyle.position = "relative";
divInBetweenStyle.display = "table-cell";
divInBetweenStyle.height = "100%";
checkBoxOrRadioButton.INTERNAL_OptionalSpecifyDomElementConcernedByFocus = innerElement;
checkBoxOrRadioButton.INTERNAL_OptionalSpecifyDomElementConcernedByIsEnabled = innerElement;
object divWhereToPlaceChild;
var divWhereToPlaceChildStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("div", outerDiv, checkBoxOrRadioButton, out divWhereToPlaceChild);
//we simulate a Horizontal StackPanel (2/2):
divWhereToPlaceChildStyle.position = "relative";
divWhereToPlaceChildStyle.display = "table-cell";
divWhereToPlaceChildStyle.height = "100%";
if (INTERNAL_HtmlDomManager.IsInternetExplorer() && domInputType == "checkbox")
{
//Note: we add these event handlers because IE does not fire the change event when clicking to go out of the Indeterminate state.
INTERNAL_EventsHelper.AttachToDomEvents("click", innerElement, (Action <object>)(e =>
{
IsCheckedValueChanged(checkBoxOrRadioButton);
}));
INTERNAL_EventsHelper.AttachToDomEvents("click", divWhereToPlaceChild, (Action <object>)(e =>
{
IsCheckedValueChanged(checkBoxOrRadioButton);
}));
}
else
{
SubscribeToBasicEventsForRadioButton(checkBoxOrRadioButton, innerElement, divWhereToPlaceChild);
}
domElementWhereToPlaceChildren = divWhereToPlaceChild;
return(outerDiv);
}
internal protected virtual void ManageIsEnabled(bool isEnabled)
{
if (INTERNAL_VisualTreeManager.IsElementInVisualTree(this))
{
var domElementToEnableOrDisable = (INTERNAL_OptionalSpecifyDomElementConcernedByIsEnabled != null ? INTERNAL_OptionalSpecifyDomElementConcernedByIsEnabled : INTERNAL_OuterDomElement);
if (isEnabled)
{
INTERNAL_HtmlDomManager.RemoveDomElementAttribute(domElementToEnableOrDisable, "disabled", forceSimulatorExecuteImmediately: true);
}
else
{
INTERNAL_HtmlDomManager.SetDomElementAttribute(domElementToEnableOrDisable, "disabled", true, forceSimulatorExecuteImmediately: true);
}
}
}
protected internal override void INTERNAL_OnAttachedToVisualTree()
{
if (INTERNAL_IsTemplated)
{
//there is a template so we need to make specific changes to make it work with the other RadioButtons
this.INTERNAL_OptionalSpecifyDomElementConcernedByFocus = this.INTERNAL_OuterDomElement;
INTERNAL_HtmlDomManager.SetDomElementAttribute(this.INTERNAL_OptionalSpecifyDomElementConcernedByFocus, "checked", IsChecked, forceSimulatorExecuteImmediately: true);
INTERNAL_CheckBoxAndRadioButtonHelpers.SubscribeToBasicEventsForRadioButton(this, this.INTERNAL_OptionalSpecifyDomElementConcernedByFocus, this.INTERNAL_OptionalSpecifyDomElementConcernedByFocus);
}
if (string.IsNullOrWhiteSpace(GroupName))
{
INTERNAL_HtmlDomManager.SetDomElementAttribute(this.INTERNAL_OptionalSpecifyDomElementConcernedByFocus, "name", ((UIElement)INTERNAL_VisualParent).INTERNAL_ChildrenRadioButtonDefaultName, forceSimulatorExecuteImmediately: true);
}
}
private static void GroupName_Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
RadioButton radio = (RadioButton)d;
if (INTERNAL_VisualTreeManager.IsElementInVisualTree(radio))
{
bool isUsingNativeHtml5RadioButtonRatherThanAControlTemplate = (radio.INTERNAL_OptionalSpecifyDomElementConcernedByFocus != null); // Faster than checking if (radioButton.Template != null) because the latter is a DependencyProperty.
if (isUsingNativeHtml5RadioButtonRatherThanAControlTemplate)
{
if (!string.IsNullOrWhiteSpace((string)e.NewValue))
{
INTERNAL_HtmlDomManager.SetDomElementAttribute(radio.INTERNAL_OptionalSpecifyDomElementConcernedByFocus, "name", radio.GroupName, forceSimulatorExecuteImmediately: true);
}
else
{
INTERNAL_HtmlDomManager.SetDomElementAttribute(radio.INTERNAL_OptionalSpecifyDomElementConcernedByFocus, "name", ((UIElement)radio.INTERNAL_VisualParent).INTERNAL_ChildrenRadioButtonDefaultName, forceSimulatorExecuteImmediately: true);
}
}
}
}
private void RefreshSource()
{
if (Source != null)
{
Loaded += Image_Loaded;
if (Source is BitmapImage)
{
BitmapImage sourceAsBitmapImage = (BitmapImage)Source;
if (sourceAsBitmapImage.UriSource != null)
{
Uri sourceUri = null;
sourceUri = ((BitmapImage)Source).UriSource;
string html5Path = INTERNAL_UriHelper.ConvertToHtml5Path(sourceUri.OriginalString, this);
INTERNAL_HtmlDomManager.SetDomElementAttribute(_imageDiv, "src", html5Path);
}
else if (sourceAsBitmapImage.INTERNAL_StreamSource != null)
{
string dataUrl = "data:image/png;base64," + sourceAsBitmapImage.INTERNAL_StreamAsBase64String;
INTERNAL_HtmlDomManager.SetDomElementAttribute(_imageDiv, "src", dataUrl);
}
else if (!string.IsNullOrEmpty(sourceAsBitmapImage.INTERNAL_DataURL))
{
string dataUrl = sourceAsBitmapImage.INTERNAL_DataURL;
INTERNAL_HtmlDomManager.SetDomElementAttribute(_imageDiv, "src", dataUrl);
}
//set the width and height to "inherit" so the image takes up the size defined for it (and applied to _imageDiv's parent):
CSHTML5.Interop.ExecuteJavaScript("$0.style.width = 'inherit'; $0.style.height = 'inherit'", _imageDiv);
}
}
else
{
//If Source == null we show empty image to prevent broken image icon
INTERNAL_HtmlDomManager.SetDomElementAttribute(_imageDiv, "src", TransparentGifOnePixel);
//Set css width and height values to 0 so we don't use space for an image that should not take any. Note: if the size is specifically set in the Xaml, it will still apply on a parent dom element so it won't change the appearance.
CSHTML5.Interop.ExecuteJavaScript("$0.style.width = ''; $0.style.height = ''", _imageDiv);
}
INTERNAL_HtmlDomManager.SetDomElementAttribute(_imageDiv, "alt", " "); //the text displayed when the image cannot be found. We set it as an empty string since there is nothing in Xaml
}
private object AddPasswordInputDomElement(object parentRef, out object domElementWhereToPlaceChildren, bool isTemplated)
{
object passwordField;
var passwordFieldStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("input", parentRef, this, out passwordField);
this.INTERNAL_OptionalSpecifyDomElementConcernedByFocus = passwordField;
_passwordInputField = passwordField;
domElementWhereToPlaceChildren = passwordField; // Note: this value is used by the Padding_Changed method to set the padding of the PasswordBox.
passwordFieldStyle.border = "transparent"; // This removes the border. We do not need it since we are templated
passwordFieldStyle.outline = "solid transparent"; // Note: this is to avoind having the weird border when it has the focus. I could have used outlineWidth = "0px" but or some reason, this causes the caret to not work when there is no text.
passwordFieldStyle.backgroundColor = "transparent";
passwordFieldStyle.fontSize = "inherit"; // Not inherited by default for "input" DOM elements
passwordFieldStyle.width = "100%";
passwordFieldStyle.height = "100%";
INTERNAL_HtmlDomManager.SetDomElementAttribute(passwordField, "type", "password", forceSimulatorExecuteImmediately: true);
//-----------------------
// Prepare to raise the "TextChanged" event and to update the value of the "Text" property when the DOM text changes:
//-----------------------
//todo: why did we put this here instead of in INTERNAL_AttachToDomEvents?
if (IsRunningOnInternetExplorer())
{
//-----------------------
// Fix "input" event not working under IE:
//-----------------------
this.GotFocus += InternetExplorer_GotFocus;
this.LostFocus += InternetExplorer_LostFocus;
INTERNAL_EventsHelper.AttachToDomEvents("textinput", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("paste", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("cut", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("keyup", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("delete", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("mouseup", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
}
else
{
//-----------------------
// Modern browsers
//-----------------------
INTERNAL_EventsHelper.AttachToDomEvents("input", passwordField, (Action <object>)(e =>
{
PasswordAreaValueChanged();
}));
}
return(passwordField);
}
private static void OnNameChanged_MethodToUpdateDom(DependencyObject d, object value)
{
var @this = (FrameworkElement)d;
INTERNAL_HtmlDomManager.SetDomElementAttribute(@this.INTERNAL_OuterDomElement, "dataId", (value ?? string.Empty).ToString());
}
//INTERNAL_HtmlDomManager.SetDomElementAttribute(canvasDomElement, "height", sizeToApply.Height);
/// <summary>
/// Prepares the Shape so that its canvas has the size it should have, depending on its container, content and Stretch mode.
/// </summary>
/// <param name="frameworkElement">The Shape containing the canvas.</param>
/// <param name="canvasDomElement">The canvas in the Shape.</param>
/// <param name="minX">The minimum X-coordinate of the points in the Shape.</param>
/// <param name="maxX">The maximum X-coordinate of the points in the Shape.</param>
/// <param name="minY">The minimum Y-coordinate of the points in the Shape.</param>
/// <param name="maxY">The maximum Y-coordinate of the points in the Shape.</param>
/// <param name="stretch">The Stretch mode to apply on the Shape</param>
/// <param name="shapeActualSize"></param>
internal static void PrepareStretch(FrameworkElement frameworkElement, object canvasDomElement, double minX, double maxX, double minY, double maxY, Stretch stretch, out Size shapeActualSize)
{
var canvasStyle = INTERNAL_HtmlDomManager.GetDomElementStyleForModification(canvasDomElement);
//Two steps:
// 1) We get the size the Shape would take if Stretch = None so that we know its prefered size
// 2) We make the element take the allowed size closest to that prefered size.
//We get the size the Shape would take if its Stretch mode was Stretch.None:
//in Stretch.None mode, the size is from 0 to the rightmost poit and bottommost point:
double sizeX = maxX;
double sizeY = maxY;
//in other Stretched modes, the size is from the leftmost point to the rightmost point and from the topmost to the bottommost point:
if (stretch != Stretch.None)
{
sizeX = maxX - minX;
sizeY = maxY - minY;
}
else //we want to add the size of the shape that goes into negative values:
{
if (minX < 0)
{
sizeX = maxX - minX;
}
if (minY < 0)
{
sizeY = maxY - minY;
}
}
//todo: (?) for the line below, replace the "+ 1" with the StrokeThickness/LineWidth
Size sizeToApply = new Size(Math.Max(sizeX + 1, 0), Math.Max(sizeY + 1, 0)); //example: a vertical line still needs 1 pixel width
//we apply the possible defined size of the outerDomElement of the shape:
var style = INTERNAL_HtmlDomManager.GetFrameworkElementOuterStyleForModification(frameworkElement);
bool frameworkElementWidthWasSpecified = false;
double frameworkElementWidth = frameworkElement.Width;
double frameworkElementHeight = frameworkElement.Height;
if (!double.IsNaN(frameworkElementWidth))
{
frameworkElementWidthWasSpecified = true;
sizeToApply.Width = frameworkElementWidth + 1;
style.width = sizeToApply.Width.ToInvariantString() + "px";
}
bool frameworkElementHeightWasSpecified = false;
if (!double.IsNaN(frameworkElementHeight))
{
frameworkElementHeightWasSpecified = true;
sizeToApply.Height = frameworkElementHeight + 1;
style.height = sizeToApply.Height.ToInvariantString() + "px";
}
if (frameworkElementWidthWasSpecified && frameworkElementHeightWasSpecified)
{
shapeActualSize = new Size(frameworkElementWidth, frameworkElementHeight);
//We apply the size defined earlier (size either by the Width and/or Height of the Shape (when they are set) or by the width and/or height of its content):
INTERNAL_HtmlDomManager.SetDomElementAttribute(canvasDomElement, "width", sizeToApply.Width);
INTERNAL_HtmlDomManager.SetDomElementAttribute(canvasDomElement, "height", sizeToApply.Height);
canvasStyle.width = sizeToApply.Width.ToInvariantString() + "px"; // The "sizeToApply" is the size that the shape would take if it was not constrained by the parent framework element.
canvasStyle.height = sizeToApply.Height.ToInvariantString() + "px";
}
else
{
if (frameworkElement.IsUnderCustomLayout == false)
{
//We apply the size defined earlier (size either by the Width and/or Height of the Shape (when they are set) or by the width and/or height of its content):
INTERNAL_HtmlDomManager.SetDomElementAttribute(canvasDomElement, "width", sizeToApply.Width);
INTERNAL_HtmlDomManager.SetDomElementAttribute(canvasDomElement, "height", sizeToApply.Height);
canvasStyle.width = sizeToApply.Width.ToInvariantString() + "px"; // The "sizeToApply" is the size that the shape would take if it was not constrained by the parent framework element.
canvasStyle.height = sizeToApply.Height.ToInvariantString() + "px";
shapeActualSize = frameworkElement.INTERNAL_GetActualWidthAndHeight(); //Note: in case that the framework element is constrained, it won't take the size of its canvas2d content, so we then resize the canvas2d content so that the shape stretches.
if (!frameworkElementWidthWasSpecified)
{
canvasStyle.width = shapeActualSize.Width.ToInvariantString() + "px";
INTERNAL_HtmlDomManager.SetDomElementAttribute(canvasDomElement, "width", shapeActualSize.Width + 1); //todo: add StrokeThickness instead of +1?
}
if (!frameworkElementHeightWasSpecified)
{
canvasStyle.height = shapeActualSize.Height.ToInvariantString() + "px";
INTERNAL_HtmlDomManager.SetDomElementAttribute(canvasDomElement, "height", shapeActualSize.Height + 1); //todo: add StrokeThickness instead of +1?
}
}
else
{
shapeActualSize = frameworkElement.VisualBounds.Size;
if (!frameworkElementWidthWasSpecified)
{
canvasStyle.width = shapeActualSize.Width.ToInvariantString() + "px";
INTERNAL_HtmlDomManager.SetDomElementAttribute(canvasDomElement, "width", shapeActualSize.Width + 1); //todo: add StrokeThickness instead of +1?
}
else
{
shapeActualSize.Width = frameworkElementWidth;
INTERNAL_HtmlDomManager.SetDomElementAttribute(canvasDomElement, "width", sizeToApply.Width);
canvasStyle.width = sizeToApply.Width.ToInvariantString() + "px";
}
if (!frameworkElementHeightWasSpecified)
{
canvasStyle.height = shapeActualSize.Height.ToInvariantString() + "px";
INTERNAL_HtmlDomManager.SetDomElementAttribute(canvasDomElement, "height", shapeActualSize.Height + 1); //todo: add StrokeThickness instead of +1?
}
else
{
shapeActualSize.Height = frameworkElementHeight;
INTERNAL_HtmlDomManager.SetDomElementAttribute(canvasDomElement, "height", sizeToApply.Height);
canvasStyle.height = sizeToApply.Height.ToInvariantString() + "px";
}
}
}
var context = INTERNAL_HtmlDomManager.Get2dCanvasContext(canvasDomElement);
context.translate(0.5, 0.5); //makes is less blurry for some reason.
}
private object AddPasswordInputDomElement(object parentRef, out object domElementWhereToPlaceChildren, bool isTemplated)
{
dynamic passwordField;
var passwordFieldStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("input", parentRef, this, out passwordField);
//dynamic passwordField = INTERNAL_HtmlDomManager.CreateDomElementAndAppendIt("input", parentRef, this);
this.INTERNAL_OptionalSpecifyDomElementConcernedByFocus = passwordField;
_passwordInputField = passwordField;
domElementWhereToPlaceChildren = passwordField; // Note: this value is used by the Padding_Changed method to set the padding of the PasswordBox.
if (isTemplated) //When templated, we remove the outlining that apears when the element has the focus:
{
//if the child of this.INTERNAL_AdditionalOutsideDivForMargins has the tagname "INPUT", replace it with a div:
var additionalDivForMargins = this.INTERNAL_AdditionalOutsideDivForMargins;
dynamic newOuterDomElement = CSHTML5.Interop.ExecuteJavaScript(@"(function() {
var formerInputElement = $0.firstChild;
var outerDomElement = formerInputElement;
if(formerInputElement.tagName == 'INPUT') {
var replacement = document.createElement('div');
outerDomElement = replacement;
// copy the attributes:
for(var i=0; i<formerInputElement.attributes.length; ++i) {
var at = formerInputElement.attributes[i];
if(at.name != 'type' && at.name != 'tabIndex') //removing the type (which is now irrelevant) and the tabIndex (which would add the div to the tabbing sequence)
{
replacement.setAttribute(at.name, at.value);
}
}
// move the potential children to the replacement node:
while(formerInputElement.firstChild)
{
replacement.appendChild(formerInputElement.firstChild);
}
// replace the element:
formerInputElement.replaceWith(replacement);
}
return outerDomElement;
})()", additionalDivForMargins);
if (!CSHTML5.Interop.IsRunningInTheSimulator)
{
//Note: we replaced the former <input> with a <div> in the DOM tree because it was created before knowing that there was a Template.
// In the Simulator, there is no need to do anything because INTERNAL_OuterDomElement is only linked to the DOM element through its id (which was copied in the replacement <div>).
// In the browser, INTERNAL_OuterDomElement is the Dom element itself so we need to replace it, so we do it here.
INTERNAL_OuterDomElement = newOuterDomElement;
}
passwordFieldStyle.border = "transparent"; // This removes the border. We do not need it since we are templated
passwordFieldStyle.outline = "solid transparent"; // Note: this is to avoind having the weird border when it has the focus. I could have used outlineWidth = "0px" but or some reason, this causes the caret to not work when there is no text.
passwordFieldStyle.backgroundColor = "transparent";
passwordFieldStyle.fontSize = "inherit"; // Not inherited by default for "input" DOM elements
}
passwordFieldStyle.width = "100%";
passwordFieldStyle.height = "100%";
INTERNAL_HtmlDomManager.SetDomElementAttribute(passwordField, "type", "password", forceSimulatorExecuteImmediately: true);
//passwordField.type = "password";
//-----------------------
// Prepare to raise the "TextChanged" event and to update the value of the "Text" property when the DOM text changes:
//-----------------------
//todo: why did we put this here instead of in INTERNAL_AttachToDomEvents?
if (IsRunningOnInternetExplorer())
{
//-----------------------
// Fix "input" event not working under IE:
//-----------------------
this.GotFocus += InternetExplorer_GotFocus;
this.LostFocus += InternetExplorer_LostFocus;
INTERNAL_EventsHelper.AttachToDomEvents("textinput", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("paste", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("cut", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("keyup", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("delete", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("mouseup", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
}
else
{
//-----------------------
// Modern browsers
//-----------------------
INTERNAL_EventsHelper.AttachToDomEvents("input", passwordField, (Action <object>)(e =>
{
PasswordAreaValueChanged();
}));
}
//textArea.style.resize = "none"; //to avoid letting the posibility to the user to resize the TextBox
if (isTemplated)
{
//the following methods were ignored before because _contentEditableDiv was not defined due to the fact that we waited for the template to be made so we would know where to put it.
//as a consequence, we call them here:
OnAfterApplyHorizontalAlignmentAndWidth();
OnAfterApplyVerticalAlignmentAndWidth();
//Note about tabbing: In WPF and SL, the elements in the template other than the input field can have focus but the input field will get any keypress not handled by them
// For example, you can set the focus on a button included in the template by clicking on it and pressing space will cause a button press, but any character will be added to the Text of the PasswordBox (but the button retains the focus)
// WPF and SL are different in that in SL, every focusable control in the template can get focus through tabbing while in WPF, the whole control is considered as a single tab stop (tabbing into the PasswordBox will directly put the focus on the input element)
// BUT in SL, the input will be first in tabOrder (unless maybe if tabIndex is specifically set, I didn't try that) so if the template goes <Stackpanel><Button/><ContentPresenter/></StackPanel>, by tabbing it will go ContentPresenter first then the Button (example simplified without the names, and also WPF and SL do not use a ContentPresenter but a ScrollViewer or Decorator in which to put the input area)
//
// In our case, tabbing will go through the elements accessible through tabbing, without changing the order, and text will only be added when the <input> has focus. On click, the focus will be redirected to the <input>, unless the click was on an element that absorbs pointer events.
CSHTML5.Interop.ExecuteJavaScript(@"$0.addEventListener('click', $1)", this.INTERNAL_OuterDomElement, (Action <object>)PasswordBox_GotFocus);
}
return(passwordField);
}
public override bool TrySetMember(SetMemberBinder binder, object value)
{
INTERNAL_HtmlDomManager.SetDomElementAttribute(_domElementRef, binder.Name, value, forceSimulatorExecuteImmediately: true);
return(true);
}
private object AddPasswordInputDomElement(object parentRef, out object domElementWhereToPlaceChildren, bool isTemplated)
{
dynamic passwordField;
var passwordFieldStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("input", parentRef, this, out passwordField);
//dynamic passwordField = INTERNAL_HtmlDomManager.CreateDomElementAndAppendIt("input", parentRef, this);
_passwordInputField = passwordField;
domElementWhereToPlaceChildren = passwordField; // Note: this value is used by the Padding_Changed method to set the padding of the PasswordBox.
if (isTemplated) //When templated, we remove the outlining that apears when the element has the focus:
{
passwordFieldStyle.border = "transparent"; // This removes the border. We do not need it since we are templated
passwordFieldStyle.outline = "solid transparent"; // Note: this is to avoind having the weird border when it has the focus. I could have used outlineWidth = "0px" but or some reason, this causes the caret to not work when there is no text.
passwordFieldStyle.backgroundColor = "transparent";
passwordFieldStyle.fontSize = "inherit"; // Not inherited by default for "input" DOM elements
}
passwordFieldStyle.width = "100%";
passwordFieldStyle.height = "100%";
INTERNAL_HtmlDomManager.SetDomElementAttribute(passwordField, "type", "password", forceSimulatorExecuteImmediately: true);
//passwordField.type = "password";
//-----------------------
// Prepare to raise the "TextChanged" event and to update the value of the "Text" property when the DOM text changes:
//-----------------------
//todo: why did we put this here instead of in INTERNAL_AttachToDomEvents?
if (IsRunningOnInternetExplorer())
{
//-----------------------
// Fix "input" event not working under IE:
//-----------------------
this.GotFocus += InternetExplorer_GotFocus;
this.LostFocus += InternetExplorer_LostFocus;
INTERNAL_EventsHelper.AttachToDomEvents("textinput", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("paste", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("cut", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("keyup", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("delete", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("mouseup", passwordField, (Action <object>)(e =>
{
InternetExplorer_RaisePasswordChangedIfNecessary();
}));
}
else
{
//-----------------------
// Modern browsers
//-----------------------
INTERNAL_EventsHelper.AttachToDomEvents("input", passwordField, (Action <object>)(e =>
{
PasswordAreaValueChanged();
}));
}
//textArea.style.resize = "none"; //to avoid letting the posibility to the user to resize the TextBox
if (isTemplated)
{
//the following methods were ignored before because _contentEditableDiv was not defined due to the fact that we waited for the template to be made so we would know where to put it.
//as a consequence, we call them here:
OnAfterApplyHorizontalAlignmentAndWidth();
OnAfterApplyVerticalAlignmentAndWidth();
//register to focusin events on the OuterDomElement so that we can "reroute" the focus on the contentEditable element.
CSHTML5.Interop.ExecuteJavaScript(@"$0.tabIndex = 32767; $0.addEventListener('focusin', $1)", this.INTERNAL_OuterDomElement, (Action <object>)PasswordBox_GotFocus);
//Note on the line above: 32767 is the maximum value commonly allowed in browsers (and can be considered the default value)
if (INTERNAL_HtmlDomManager.IsInternetExplorer())
{
//workaround due to IE setting the focus at the end of the click, (or at least after the focusin event), which cancels the work done during focusin.
//if I'm not mistaken, the click event happens even when we click on a child of the element so we're all good. (We had to fix the case where a Button had a TextBox inside of it, which is why I assumed that).
CSHTML5.Interop.ExecuteJavaScript(@"$0.addEventListener('click', $1)", this.INTERNAL_OuterDomElement, (Action <object>)PasswordBox_GotFocus);
}
}
return(passwordField);
}
private static void Source_Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var control = (MediaElement)d;
var newValue = (Uri)e.NewValue;
// Always check that the control is in the Visual Tree before modifying its HTML representation
if (INTERNAL_VisualTreeManager.IsElementInVisualTree(control))
{
string newUri = newValue.ToString();
// If the new Source is an empty string, we avoid the error messages:
if (!string.IsNullOrWhiteSpace(newUri))
{
string tagString = "none";
string valueForHtml5SourceProperty = INTERNAL_UriHelper.ConvertToHtml5Path(newValue.ToString(), control);
string newExtensionLowercase = GetExtension(newUri).ToLower();
if (SupportedVideoTypes.Contains(newExtensionLowercase))
{
if (control.IsAudioOnly || control._mediaElement == null) //note: I chose to use IsAudioOnly here because using e.oldValue would make it recreate the video tag when it was already a video tag.
{
tagString = "video";
control.IsAudioOnly = false;
}
}
else if (SupportedAudioTypes.Contains(newExtensionLowercase))
{
if (!control.IsAudioOnly || control._mediaElement == null) //note: I chose to use IsAudioOnly here because using e.oldValue would make it recreate the audio tag when it was already a audio tag.
{
tagString = "audio";
control.IsAudioOnly = true;
}
}
else
{
throw new NotSupportedException("ERROR: The MediaElement control only supports files of the following types: VIDEO: mp4, ogv, webm, 3gp - AUDIO: mp3, ogg - Note: for best browser compatibility, it is recommended to use only MP3 and MP4 files.");
}
if (tagString != "none") //tagString != "none" means that the new Uri has a different type (audio VS video) than the old one, so we need to (re)create the dom tag.
{
if (control._mediaElement != null)
{
INTERNAL_HtmlDomManager.RemoveFromDom(control._mediaElement); //note: there can be only one child element.
}
#if OPENSILVER
if (!INTERNAL_InteropImplementation.IsRunningInTheSimulator_WorkAround() || tagString == "video")
#else
if (CSharpXamlForHtml5.Environment.IsRunningInJavaScript || tagString == "video")
#endif
{
object element = null;
object outerDiv = control.INTERNAL_OuterDomElement;
var elementStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle(tagString, outerDiv, control, out element);
control._mediaElement_ForAudioOnly_ForSimulatorOnly = null;
control._mediaElement = element;
if (tagString == "video")
{
elementStyle.width = "100%";
elementStyle.height = "100%";
}
control.Refresh(); //we refresh all the values of the element in the visual tree
}
else //when we are in the simulator, we don't want to use the <audio> tag, we will use a wpf one instead (because awesomium doesn't support .mp3 for example)
{
#if !CSHTML5NETSTANDARD
if (control._mediaElement_ForAudioOnly_ForSimulatorOnly == null)
{
control._mediaElement_ForAudioOnly_ForSimulatorOnly = INTERNAL_Simulator.WpfMediaElementFactory.Create((Action)control.SimulatorMediaElement_Loaded, (Action)control.SimulatorMediaElement_MediaEnded);
}
control._mediaElement_ForAudioOnly_ForSimulatorOnly.Source = new Uri(valueForHtml5SourceProperty);
control.Refresh_SimulatorOnly();
#endif
return;
}
}
// Update the "src" property of the <video> or <audio> tag
INTERNAL_HtmlDomManager.SetDomElementAttribute(control._mediaElement, "src", valueForHtml5SourceProperty, forceSimulatorExecuteImmediately: true);
}
else
{
if (control._mediaElement != null)
{
// Remove previous video/audio if any:
INTERNAL_HtmlDomManager.SetDomElementAttribute(control._mediaElement, "src", "", forceSimulatorExecuteImmediately: true);
}
}
}
}
static void AttachVisualChild_Private_MainSteps(UIElement child,
UIElement parent,
bool doesParentRequireToCreateAWrapperForEachChild,
object innerDivOfWrapperForChild,
object domElementWhereToPlaceChildStuff,
object wrapperForChild)
{
#if REWORKLOADED
if (INTERNAL_VisualTreeOperation.Current.Root == null)
{
INTERNAL_VisualTreeOperation.Current.Root = parent;
}
#endif
//#if CSHTML5BLAZOR && DEBUG
// string childIndentity = child + (child != null ? " (" + child.GetHashCode() + ")" : "");
// string parentIndentity = parent + (parent != null ? " (" + parent.GetHashCode() + ")" : "");
// Console.WriteLine("OPEN SILVER DEBUG: VisualTreeManager : AttachVisualChild_Private_FinalStepsOnlyIfControlIsVisible: " + childIndentity + " attached to " + parentIndentity);
//#endif
//--------------------------------------------------------
// CREATE THE DIV FOR THE MARGINS (OPTIONAL):
//--------------------------------------------------------
#if PERFSTAT
var t1 = Performance.now();
#endif
// Determine if an additional DIV for handling margins is needed:
object additionalOutsideDivForMargins = null;
var margin = ((FrameworkElement)child).Margin;
bool containsNegativeMargins = (margin.Left < 0d || margin.Top < 0d || margin.Right < 0d || margin.Bottom < 0d);
#if ONLY_ADD_DIV_FOR_MARGINS_WHEN_MARGINS_NOT_ZERO
bool isADivForMarginsNeeded = !(parent is Canvas) && !(child is Inline) && child is FrameworkElement; // Note: In a Canvas, we don't want to add the additional DIV because there are no margins and we don't want to interfere with the pointer events by creating an additional DIV.
if (isADivForMarginsNeeded)
{
var horizontalAlign = ((FrameworkElement)child).HorizontalAlignment;
var verticalAlign = ((FrameworkElement)child).VerticalAlignment;
isADivForMarginsNeeded = !(margin.Left == 0 && margin.Top == 0 && margin.Right == 0 && margin.Bottom == 0 && horizontalAlign == HorizontalAlignment.Stretch && verticalAlign == VerticalAlignment.Stretch);
}
#else
bool isADivForMarginsNeeded = !(parent is Canvas) && // Note: In a Canvas, we don't want to add the additional DIV because there are no margins and we don't want to interfere with the pointer events by creating an additional DIV.
!(child is Inline); // Note: inside a TextBlock we do not want the HTML DIV because we want to create HTML SPAN elements only (otherwise there would be unwanted line returns).
#endif
if (isADivForMarginsNeeded)
{
// Determine where to place it:
object whereToPlaceDivForMargins =
(doesParentRequireToCreateAWrapperForEachChild
? innerDivOfWrapperForChild
: domElementWhereToPlaceChildStuff);
// Create and append the DIV for handling margins and append:
additionalOutsideDivForMargins = INTERNAL_HtmlDomManager.CreateDomElementAndAppendIt("div", whereToPlaceDivForMargins, parent); //todo: check if the third parameter should be the child or the parent (make something with margins and put a mouseenter in the parent then see if the event is triggered).
// Style the DIV for handling margins:
var style = INTERNAL_HtmlDomManager.GetDomElementStyleForModification(additionalOutsideDivForMargins);
style.boxSizing = "border-box";
if (child is FrameworkElement &&
(((FrameworkElement)child).HorizontalAlignment == HorizontalAlignment.Stretch && double.IsNaN(((FrameworkElement)child).Width)))
{
if (!containsNegativeMargins)
{
style.width = "100%";
}
}
if (child is FrameworkElement &&
(((FrameworkElement)child).VerticalAlignment == VerticalAlignment.Stretch && double.IsNaN(((FrameworkElement)child).Height)))
{
style.height = "100%";
}
}
#if PERFSTAT
Performance.Counter("VisualTreeManager: Create the DIV for the margin", t1);
#endif
//--------------------------------------------------------
// PREPARE THE CHILD:
//--------------------------------------------------------
#if PERFSTAT
var t2 = Performance.now();
#endif
// Determine where to place the child:
object whereToPlaceTheChild = (isADivForMarginsNeeded
? additionalOutsideDivForMargins : (doesParentRequireToCreateAWrapperForEachChild
? innerDivOfWrapperForChild
: domElementWhereToPlaceChildStuff));
// Set the "Parent" property of the Child (IMPORTANT: we need to do that before child.CreateDomElement because the type of the parent is used to display the child correctly):
child.INTERNAL_VisualParent = parent;
// Set the "ParentWindow" property so that the element knows where to display popups:
child.INTERNAL_ParentWindow = parent.INTERNAL_ParentWindow;
// Create and append the DOM structure of the Child:
object domElementWhereToPlaceGrandChildren = null;
object outerDomElement;
bool isChildAControl = child is Control;
if (child.INTERNAL_HtmlRepresentation == null)
{
bool hasTemplate = isChildAControl && ((Control)child).HasTemplate;
if (hasTemplate)
{
outerDomElement = ((Control)child).CreateDomElementForControlTemplate(whereToPlaceTheChild, out domElementWhereToPlaceGrandChildren);
}
else
{
outerDomElement = child.CreateDomElement(whereToPlaceTheChild, out domElementWhereToPlaceGrandChildren);
}
}
else
{
outerDomElement = INTERNAL_HtmlDomManager.CreateDomFromStringAndAppendIt(child.INTERNAL_HtmlRepresentation, whereToPlaceTheChild, child);
}
// Initialize the "Width" and "Height" of the child DOM structure:
if (child is FrameworkElement)
{
FrameworkElement.INTERNAL_InitializeOuterDomElementWidthAndHeight(((FrameworkElement)child), outerDomElement);
}
// Update the DOM structure of the Child (for example, if the child is a Grid, this will render its rows and columns):
child.INTERNAL_UpdateDomStructureIfNecessary();
// For debugging purposes (to better read the output html), add a class to the outer DIV that tells us the corresponding type of the element (Border, StackPanel, etc.):
INTERNAL_HtmlDomManager.SetDomElementAttribute(outerDomElement, "class", child.GetType().ToString());
#if PERFSTAT
Performance.Counter("VisualTreeManager: Prepare the child", t2);
#endif
//--------------------------------------------------------
// REMEMBER ALL INFORMATION FOR FUTURE USE:
//--------------------------------------------------------
#if PERFSTAT
var t3 = Performance.now();
#endif
// Remember the DIVs:
child.INTERNAL_OuterDomElement = outerDomElement;
child.INTERNAL_InnerDomElement = domElementWhereToPlaceGrandChildren;
child.INTERNAL_AdditionalOutsideDivForMargins = additionalOutsideDivForMargins ?? outerDomElement;
child.INTERNAL_InnerDivOfTheChildWrapperOfTheParentIfAny = doesParentRequireToCreateAWrapperForEachChild ? innerDivOfWrapperForChild : null;
// Remember the information about the "VisualChildren":
if (parent.INTERNAL_VisualChildrenInformation == null)
{
parent.INTERNAL_VisualChildrenInformation = new Dictionary <UIElement, INTERNAL_VisualChildInformation>();
}
parent.INTERNAL_VisualChildrenInformation.Add(child,
new INTERNAL_VisualChildInformation()
{
INTERNAL_UIElement = child,
INTERNAL_OptionalChildWrapper_OuterDomElement = wrapperForChild,
INTERNAL_OptionalChildWrapper_ChildWrapperInnerDomElement = innerDivOfWrapperForChild
});
#if PERFSTAT
Performance.Counter("VisualTreeManager: Remember all info for future use", t3);
#endif
//--------------------------------------------------------
// HANDLE SPECIAL CASES:
//--------------------------------------------------------
#if PERFSTAT
var t4 = Performance.now();
#endif
// If we are inside a canvas, we set the position to "absolute":
if (parent is Canvas)
{
INTERNAL_HtmlDomManager.GetDomElementStyleForModification(outerDomElement).position = "absolute"; //todo: test if this works properly
}
UIElement.SynchronizeForceInheritProperties(child, parent);
#if REVAMPPOINTEREVENTS
UIElement.INTERNAL_UpdateCssPointerEvents(child);
#else
// If the current element is inside a Grid, we need to explicitly set its CSS property "PointerEvents=auto" because its parent child wrapper has "PointerEvents=none" in order to prevent its child wrappers from overlapping each other and thus preventing clicks on some children.
if (parent is Grid && child is FrameworkElement) //todo: generalize this code so that we have no hard-reference on the Grid control, and third-party controls can use the same mechanics.
{
var frameworkElement = ((FrameworkElement)child);
FrameworkElement.INTERNAL_UpdateCssPointerEventsPropertyBasedOnIsHitTestVisibleAndIsEnabled(frameworkElement, frameworkElement.IsHitTestVisible, frameworkElement.IsEnabled);
}
#endif
// Reset the flag that tells if we have already applied the RenderTransformOrigin (this is useful to ensure that the default RenderTransformOrigin is (0,0) like in normal XAML, instead of (0.5,0.5) like in CSS):
child.INTERNAL_RenderTransformOriginHasBeenApplied = false;
#if PERFSTAT
Performance.Counter("VisualTreeManager: Handle special cases", t4);
#endif
//--------------------------------------------------------
// HANDLE EVENTS:
//--------------------------------------------------------
#if PERFSTAT
var t5 = Performance.now();
#endif
// Register DOM events if any:
child.INTERNAL_AttachToDomEvents();
#if PERFSTAT
Performance.Counter("VisualTreeManager: Handle events", t5);
#endif
//--------------------------------------------------------
// HANDLE INHERITED PROPERTIES:
//--------------------------------------------------------
#if PERFSTAT
var t6 = Performance.now();
#endif
// Get the Inherited properties and pass them to the direct children:
foreach (DependencyProperty dependencyProperty in
#if BRIDGE
INTERNAL_BridgeWorkarounds.GetDictionaryKeys_SimulatorCompatible(parent.INTERNAL_AllInheritedProperties)
#else
parent.INTERNAL_AllInheritedProperties.Keys
#endif
)
{
bool recursively = false; // We don't want a recursion here because the "Attach" method is already recursive due to the fact that we raise property changed on the Children property, which causes to reattach the subtree.
INTERNAL_PropertyStorage storage = parent.INTERNAL_AllInheritedProperties[dependencyProperty];
child.SetInheritedValue(dependencyProperty, INTERNAL_PropertyStore.GetEffectiveValue(storage), recursively);
}
#if PERFSTAT
Performance.Counter("Handle inherited properties", t6);
#endif
//--------------------------------------------------------
// SET "ISLOADED" PROPERTY AND CALL "ONATTACHED" EVENT:
//--------------------------------------------------------
// Tell the control that it is now present into the visual tree:
child._isLoaded = true;
// Raise the "OnAttached" event:
child.INTERNAL_OnAttachedToVisualTree(); // IMPORTANT: Must be done BEFORE "RaiseChangedEventOnAllDependencyProperties" (for example, the ItemsControl uses this to initialize its visual)
//--------------------------------------------------------
// RENDER THE ELEMENTS BY APPLYING THE CSS PROPERTIES:
//--------------------------------------------------------
// Defer rendering when the control is not visible to when becomes visible (note: when this option is enabled, we do not apply the CSS properties of the UI elements that are not visible. Those property are applied later, when the control becomes visible. This option results in improved performance.)
bool enableDeferredRenderingOfCollapsedControls =
EnableOptimizationWhereCollapsedControlsAreNotRendered ||
EnableOptimizationWhereCollapsedControlsAreLoadedLast ||
EnableOptimizationWhereCollapsedControlsAreNotLoaded;
if (enableDeferredRenderingOfCollapsedControls && !child.IsVisible)
{
child.INTERNAL_DeferredRenderingWhenControlBecomesVisible = () =>
{
RenderElementsAndRaiseChangedEventOnAllDependencyProperties(child);
};
}
else
{
RenderElementsAndRaiseChangedEventOnAllDependencyProperties(child);
}
//--------------------------------------------------------
// HANDLE BINDING:
//--------------------------------------------------------
#if PERFSTAT
var t9 = Performance.now();
#endif
child.INTERNAL_UpdateBindingsSource();
#if PERFSTAT
Performance.Counter("VisualTreeManager: Handle binding", t9);
#endif
//--------------------------------------------------------
// HANDLE TABINDEX:
//--------------------------------------------------------
// For GotFocus and LostFocus to work, the DIV specified by "INTERNAL_OptionalSpecifyDomElementConcernedByFocus"
// (or the OuterDomElement otherwise) needs to have the "tabIndex" attribute set. Therefore we need to always set
// it (unless IsTabStop is False) to its current value (default is Int32.MaxValue). At the time when this code was
// written, there was no way to automatically call the "OnChanged" on a dependency property if no value was set.
#if !REWORKLOADED
// IMPORTANT: This needs to be done AFTER the "OnApplyTemplate" (for example, the TextBox sets the "INTERNAL_OptionalSpecifyDomElementConcernedByFocus" in the "OnApplyTemplate").
if (isChildAControl)
{
if (!(child is ContentPresenter) && !(child is TextBlock)) //ContentPresenter should not count in tabbing, as well as TextBlock (especially since TextBlock is not supposed to be a Control).
{
Control.TabIndexProperty_MethodToUpdateDom(child, ((Control)child).TabIndex);
}
}
#endif
//--------------------------------------------------------
// APPLY THE VISIBILITY:
//--------------------------------------------------------
Visibility childVisibility = child.Visibility;
if (childVisibility == Visibility.Collapsed)
{
UIElement.INTERNAL_ApplyVisibility(child, childVisibility);
}
//--------------------------------------------------------
// RAISE THE "SIZECHANGED" EVENT:
//--------------------------------------------------------
#if !REWORKLOADED
#if PERFSTAT
var t10 = Performance.now();
#endif
// Raise the "SizeChanged" event: (note: in XAML, the "SizeChanged" event is called before the "Loaded" event)
// IMPORTANT: This event needs to be raised AFTER the "OnApplyTemplate" and AFTER the "IsLoaded=true" (for example, it is used in the ScrollBar implementation).
if (child is FrameworkElement)
{
((FrameworkElement)child).INTERNAL_SizeChangedWhenAttachedToVisualTree();
}
#if PERFSTAT
Performance.Counter("VisualTreeManager: Raise size changed event", t10);
#endif
//--------------------------------------------------------
// RAISE THE "LOADED" EVENT:
//--------------------------------------------------------
#if PERFSTAT
var t11 = Performance.now();
#endif
// Raise the "Loaded" event: (note: in XAML, the "loaded" event of the children is called before the "loaded" event of the parent)
if (child is FrameworkElement)
{
((FrameworkElement)child).INTERNAL_RaiseLoadedEvent();
}
child.StartManagingPointerPositionForPointerExitedEventIfNeeded();
#if PERFSTAT
Performance.Counter("VisualTreeManager: Raise Loaded event", t11);
#endif
#else
INTERNAL_VisualTreeOperation.Current.Enqueue(child);
#endif
}
private object AddContentEditableDomElement(object parentRef, out object domElementWhereToPlaceChildren)
{
bool isReadOnly = this.Host.IsReadOnly;
object outerDiv;
var outerDivStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("div", parentRef, this, out outerDiv);
string backgroundColor = "transparent"; //value when it is templated
outerDivStyle.backgroundColor = backgroundColor;
outerDivStyle.height = "100%";
object middleDiv;
var middleDivStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("div", outerDiv, this, out middleDiv);
middleDivStyle.width = "100%";
middleDivStyle.height = "100%";
object contentEditableDiv;
var contentEditableDivStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("div", middleDiv, this, out contentEditableDiv);
_contentEditableDiv = contentEditableDiv;
Host.UpdateFocusContentEditable(_contentEditableDiv);
if (INTERNAL_HtmlDomManager.IsInternetExplorer())
{
//set the class to remove margins on <p> inside the contentEditableDiv
OpenSilver.Interop.ExecuteJavaScript(@"$0.classList.add(""ie_set_p_margins_to_zero"")", contentEditableDiv);
}
contentEditableDivStyle.width = "100%";
contentEditableDivStyle.height = "100%";
// Apply Host.TextWrapping
contentEditableDivStyle.whiteSpace = Host.TextWrapping == TextWrapping.NoWrap ? "nowrap" : "pre-wrap";
// Apply Host.HorizontalScrollBarVisibility
contentEditableDivStyle.overflowX = ScrollBarVisibilityToHtmlString(Host.HorizontalScrollBarVisibility) ?? "hidden";
// Apply Host.VerticalScrollBarVisibility
contentEditableDivStyle.overflowY = ScrollBarVisibilityToHtmlString(Host.VerticalScrollBarVisibility) ?? "hidden";
contentEditableDivStyle.outline = "solid transparent"; // Note: this is to avoind having the weird border when it has the focus. I could have used outlineWidth = "0px" but or some reason, this causes the caret to not work when there is no text.
contentEditableDivStyle.background = "solid transparent";
contentEditableDivStyle.cursor = "text";
// Apply TextAlignment
UpdateTextAlignment(contentEditableDivStyle, Host.TextAlignment);
string isContentEditable = (!isReadOnly).ToString().ToLower();
INTERNAL_HtmlDomManager.SetDomElementAttribute(contentEditableDiv, "contentEditable", isContentEditable);
this.INTERNAL_OptionalSpecifyDomElementConcernedByFocus = contentEditableDiv;
this.INTERNAL_OptionalSpecifyDomElementConcernedByMinMaxHeightAndWidth = contentEditableDiv;
contentEditableDivStyle.minWidth = "14px";
contentEditableDivStyle.minHeight = (Math.Floor(this.Host.FontSize * 1.5 * 1000) / 1000).ToInvariantString() + "px"; // Note: We multiply by 1000 and then divide by 1000 so as to only keep 3 decimals at the most. //Note: setting "minHeight" is for FireFox only, because other browsers don't seem to need it. The "1.5" factor is here to ensure that the resulting Height is the same as that of the PasswordBox.
// Fix for Internet Explorer: when pressing Enter in the ContentEditable div, IE will create a new paragraph, which results in graphical issues to the distance between paragraphs. To fix this issue, we put an empty DIV inside by default. When IE detects that there are DIVs inside, it adds a new DIV instead of creating a new paragraph when the user presses Enter.
if (INTERNAL_HtmlDomManager.IsInternetExplorer())
{
object divToImproveIELineBreaks;
var divToImproveIELineBreaksStyle = INTERNAL_HtmlDomManager.CreateDomElementAppendItAndGetStyle("div", contentEditableDiv, this, out divToImproveIELineBreaks);
}
domElementWhereToPlaceChildren = contentEditableDiv;
// Set the mark saying that the pointer events must be "absorbed" by the TextBox:
INTERNAL_HtmlDomManager.SetDomElementProperty(outerDiv, "data-absorb-events", true);
//-----------------------
// Prepare to raise the "TextChanged" event and to update the value of the "Text" property when the DOM text changes:
//-----------------------
//todo: why did we put this here instead of in INTERNAL_AttachToDomEvents?
if (IsRunningOnInternetExplorer())
{
//-----------------------
// Fix "input" event not working under IE:
//-----------------------
this.GotFocus += InternetExplorer_GotFocus;
this.LostFocus += InternetExplorer_LostFocus;
INTERNAL_EventsHelper.AttachToDomEvents("textinput", contentEditableDiv, (Action <object>)(e =>
{
InternetExplorer_RaiseTextChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("paste", contentEditableDiv, (Action <object>)(e =>
{
InternetExplorer_RaiseTextChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("cut", contentEditableDiv, (Action <object>)(e =>
{
InternetExplorer_RaiseTextChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("keyup", contentEditableDiv, (Action <object>)(e =>
{
InternetExplorer_RaiseTextChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("delete", contentEditableDiv, (Action <object>)(e =>
{
InternetExplorer_RaiseTextChangedIfNecessary();
}));
INTERNAL_EventsHelper.AttachToDomEvents("mouseup", contentEditableDiv, (Action <object>)(e =>
{
InternetExplorer_RaiseTextChangedIfNecessary();
}));
}
else
{
//-----------------------
// Modern browsers
//-----------------------
INTERNAL_EventsHelper.AttachToDomEvents("input", contentEditableDiv, (Action <object>)(e =>
{
TextAreaValueChanged();
}));
}
//-----------------------
// Prevent pressing Enter for line break when "AcceptsReturn" is false and prevent pressing any other key than backspace when "MaxLength" is reached:
// Also prevent the default event when pressing tab and add "\t" when "AcceptsTab" is set to true:
//-----------------------
if (IsRunningInJavaScript())
{
#if OPENSILVER
throw new InvalidOperationException();
#elif BRIDGE
//BRIDGETODO : here the code below works weird
// instance = this
// makes instance working properly, where it shouldn't
//Note: I think the reason why instance = this works is because it is set with the correct context of "this",
// so instance = this TextBox. If it was inside the function defined as callback of addEventListener,
// "this" would be in the context of the event triggered, so it would be the contentEditable div.
Bridge.Script.Write(@"
var instance = $1;
$0.addEventListener('keydown', function(e) {
if (e.keyCode == 13 && instance.AcceptsReturn !== true)
{
e.preventDefault();
return false;
}
var isAddingTabulation = e.keyCode == 9 && instance.AcceptsTab == true;
var isRemovingTabulation = isAddingTabulation && e.shiftKey;
if(isRemovingTabulation)
{
isAddingTabulation = false
}
if((isAddingTabulation || e.keyCode == 13 || e.keyCode == 32 || e.keyCode > 47) && instance.MaxLength != 0)
{
var textLength = instance.GetTextLengthIncludingNewLineCompensation();
if (e.keyCode == 13)
{
textLength += 1; //because adding a new line takes 2 characters instead of 1.
}
if(textLength >= instance.MaxLength)
{
e.preventDefault();
return false;
}
}
if(isAddingTabulation)
{
//we need to add '\t' where the cursor is, prevent the event (which would change the focus) and dispatch the event for the text changed:
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode(document.createTextNode('\t'));
sel.collapseToEnd();
range.collapse(false); //for IE
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.text = '\t';
document.selection.collapseToEnd();
}
if (window.IS_EDGE)
{
sel.removeAllRanges();
sel.addRange(range);
}
instance.TextAreaValueChanged(); //todo: test this.
e.preventDefault();
return false;
}
if (isRemovingTabulation)
{
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
if(range.collapsed)
{
//if the previous character is a '\t', we want to remove it:
var rangeStartContainer = range.startContainer;
var rangeStartOffset = range.startOffset;
//we get the node that contains the text that needs changing and the index of the character to remove:
var textNodeToModify = undefined;
var indexToRemove = -1;
if(rangeStartContainer.nodeType == Node.TEXT_NODE && rangeStartOffset > 0)
{
textNodeToModify = rangeStartContainer;
indexToRemove = rangeStartOffset - 1;
}
else //The potential tab to remove is in the node that is right before the selection(caret) so we look at the last character of the 'previous sibling':
{
var previousSibling = undefined;
// we get the previous node:
if(rangeStartContainer.nodeType == Node.TEXT_NODE) //the caret was right before the first element of a textNode. I am not sure if we can arrive here since this case seems to be considered as 'the caret is between the nodes' instead of 'the caret is in the node but before the first character'
{
previousSibling = rangeStartContainer.previousSibling;
}
else //the caret is considered between nodes so the range container is the element that contains the text nodes.
{
if(rangeStartOffset > 0) //otherwise, we are at the first character inside a new div (or p), which means at the start of a new line so nothing to remove.
{
previousSibling = rangeStartContainer.childNodes[rangeStartOffset -1];
}
}
//We update the node and index to modify:
if(previousSibling != undefined && previousSibling.nodeType == Node.TEXT_NODE)
{
textNodeToModify = previousSibling;
indexToRemove = previousSibling.textContent.length - 1;
} //else, the previous node was not a text node so there has to be a new line between the caret and the previous text so nothing to remove here.
}
if(textNodeToModify != undefined && indexToRemove != -1)
{
//range.startContainer.textContent = range.startContainer.textContent.substring(rangeStartOffset)
var textContent = textNodeToModify.textContent;
if(textContent[indexToRemove] == '\t')
{
var resultingString = textContent.substring(0, indexToRemove); //note: text.substring(0,-1) returns ""
resultingString += textContent.substring(indexToRemove + 1); //note: 'aaa'.substring(25) returns ""
textNodeToModify.textContent = resultingString;
}
}
}
}
}
//todo: else.
instance.TextAreaValueChanged(); //todo: test this.
e.preventDefault();
return false;
}
}, false);", contentEditableDiv, this);//AcceptsReturn, MaxLength
#endif
}
#if OPENSILVER
else
{
// ---- SIMULATOR ----
string uid = ((INTERNAL_HtmlDomElementReference)contentEditableDiv).UniqueIdentifier;
// Set the "data-accepts-return" property (that we have invented) so that the "KeyDown" and "Paste" JavaScript events can retrieve this value:
// also set the "data-maxlength" and the "data-isreadonly"
INTERNAL_HtmlDomManager.ExecuteJavaScript($@"
var element = document.getElementByIdSafe(""{uid}"");
element.setAttribute(""data-acceptsreturn"", ""{this.Host.AcceptsReturn.ToString().ToLower()}"");
element.setAttribute(""data-maxlength"", ""{this.Host.MaxLength}"");
element.setAttribute(""data-isreadonly"",""{isReadOnly.ToString().ToLower()}"");
element.setAttribute(""data-acceptstab"", ""{this.Host.AcceptsTab.ToString().ToLower()}"");");
// Register the "keydown" javascript event:
INTERNAL_HtmlDomManager.ExecuteJavaScript($@"
var element_OutsideEventHandler = document.getElementByIdSafe(""{uid}"");
element_OutsideEventHandler.addEventListener('keydown', function(e) {{
var element_InsideEventHandler = document.getElementByIdSafe(""{uid}""); // For some reason we need to get again the reference to the element.
var acceptsReturn = element_InsideEventHandler.getAttribute(""data-acceptsreturn"");
var maxLength = element_InsideEventHandler.getAttribute(""data-maxlength"");
var acceptsTab = element_InsideEventHandler.getAttribute(""data-acceptstab"");
if (e.keyCode == 13)
{{
if(acceptsReturn != ""true"")
{{
e.preventDefault();
return false;
}}
}}
var isAddingTabulation = e.keyCode == 9 && acceptsTab == ""true"";
if((isAddingTabulation || e.keyCode == 13 || e.keyCode == 32 || e.keyCode > 47) && maxLength != 0)
{{
var text = getTextAreaInnerText(element_InsideEventHandler);
if (!acceptsReturn) {{
text = text.replace(""\n"", """").replace(""\r"", """");
}}
var correctionDueToNewLines = 0;
if (e.keyCode == 13)
{{
++correctionDueToNewLines; //because adding a new line takes 2 characters instead of 1.
}}
if(text.length + correctionDueToNewLines >= maxLength)
{{
if (!window.getSelection().toString()) {{
e.preventDefault();
return false;
}}
}}
}}
if(isAddingTabulation)
{{
//we need to add '\t' where the cursor is, prevent the event (which would change the focus) and dispatch the event for the text changed:
var sel, range;
if (window.getSelection) {{
sel = window.getSelection();
if (sel.rangeCount) {{
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode(document.createTextNode('\t'));
sel.collapseToEnd();
range.collapse(false); //for IE
}}
}} else if (document.selection && document.selection.createRange) {{
range = document.selection.createRange();
range.text = '\t';
document.selection.collapseToEnd();
}}
if (window.IS_EDGE)
{{
sel.removeAllRanges();
sel.addRange(range);
}}
instance.TextAreaValueChanged(); //todo: test this.
e.preventDefault();
return false;
}}
}}, false);");//comma added on purpose because we need to get maxLength somehow (see how we did for acceptsReturn).
}
#endif
//-----------------------
// Enforce only Plain Text + prevent line breaks if "AcceptsReturn" is false. This is required because in a ContentEditable div, the user can paste rich text. Furthermore, on IE, pressing Enter will insert a new paragraph.
//-----------------------
if (IsRunningInJavaScript())
{
#if OPENSILVER
throw new InvalidOperationException();
#elif BRIDGE
var acceptsReturn = this.Host.AcceptsReturn;
//todo: shouldn't we add a check for maxlength in the script below like in the other versions of this addEventListenter (in the simulator version below and in the #if !BRIDGE part above)?
Bridge.Script.Write(@"
{0}.addEventListener('paste', function(e) {
var isReadOnly= {1};
if(!isReadOnly)
{
var isSingleLine = ({2} !== true); // This is the current value at the time when the event is raised.
// Chrome supports setting ContentEditable to PlainText-Only, so we try this first:
{0}.setAttribute('contenteditable', 'PLAINTEXT-ONLY');
if ({0}.contentEditable === 'plaintext-only') // If setting the attribute worked, we can read it back (in lowercase)
{
// --- CHROME: ---
// Nothing else to do about rich text conversion to plain text.
// However we still need to remove line breaks if AcceptsReturn is false:
if (isSingleLine){
e.preventDefault();
var content = (e.originalEvent || e).clipboardData.getData('text/plain');
content = content.replace(/\n/g, '').replace(/\r/g, '');
document.execCommand('insertText', false, content);
}
}
else
{
{0}.setAttribute('contenteditable', 'true');
if (e.clipboardData){
// --- FIREFOX: ---
e.preventDefault();
var content = (e.originalEvent || e).clipboardData.getData('text/plain');
if (isSingleLine){
content = content.replace(/\n/g, '').replace(/\r/g, '');
}
document.execCommand('insertText', false, content);
}
else if (window.clipboardData){
// --- INTERNET EXPLORER: ---
e.preventDefault();
var content = window.clipboardData.getData('Text');
if (window.getSelection)
{
var newDiv = document.createElement('div');
if (isSingleLine){
content = content.replace(/\n/g, '').replace(/\r/g, '');
}
content = content.replace(/\r\n/g, '<br />');
newDiv.innerHTML = content.replace(/\n/g, '<br />');
var range = window.getSelection().getRangeAt(0);
range.deleteContents()
range.insertNode( newDiv );
//window.getSelection().getRangeAt(0).insertNode( document.createTextNode(content) );
}
}
}
}
}, false);", contentEditableDiv, isReadOnly, acceptsReturn);
//BRIDGETODO : check the code up
#endif
}
#if OPENSILVER
else
{
// ---- SIMULATOR ----
string uid = ((INTERNAL_HtmlDomElementReference)contentEditableDiv).UniqueIdentifier;
// The simulator uses Chrome, so we can set "ContentEditable" to plain-text only:
// We still need to prevent prevent line breaks in the pasted text if "AcceptsReturn" is false:
INTERNAL_HtmlDomManager.ExecuteJavaScript($@"
var element_OutsideEventHandler = document.getElementByIdSafe(""{uid}"");
element_OutsideEventHandler.addEventListener('paste', function(e) {{
var element_InsideEventHandler = document.getElementByIdSafe(""{uid}""); // For some reason we need to get again the reference to the element.
var isReadOnly= element_InsideEventHandler.getAttribute(""data-isreadonly"");
if(isReadOnly !=""true"")
{{
var acceptsReturn = element_InsideEventHandler.getAttribute(""data-acceptsreturn"");
var maxLength = element_InsideEventHandler.getAttribute(""data-maxlength"");
element_InsideEventHandler.setAttribute(""contentEditable"", ""PLAINTEXT-ONLY"");
if (acceptsReturn != ""true""){{
e.preventDefault();
var content = (e.originalEvent || e).clipboardData.getData('text/plain');
if(content !== undefined){{
content = content.replace(/\n/g, '').replace(/\r/g, '');
}}
if(maxLength != 0) {{
var text = getTextAreaInnerText(element_InsideEventHandler);
//var text = element_InsideEventHandler.innerText;
if (!acceptsReturn) {{
text = text.replace(""\n"", """").replace(""\r"", """");
}}
var correctionDueToNewLines = 0;
var textBoxTextLength = text.length + correctionDueToNewLines;
var lengthComparison = maxLength - (content.length + textBoxTextLength);
if(lengthComparison < 0) {{
content = content.substr(0, content.length+lengthComparison);
}}
}}
document.execCommand('insertText', false, content);
}}
}}
}}, false);");
}
#endif
return(outerDiv);
}
static void AttachVisualChild_Private_MainSteps(UIElement child,
UIElement parent,
int index,
bool doesParentRequireToCreateAWrapperForEachChild,
object innerDivOfWrapperForChild,
object domElementWhereToPlaceChildStuff,
object wrapperForChild)
{
//--------------------------------------------------------
// CREATE THE DIV FOR THE MARGINS (OPTIONAL):
//--------------------------------------------------------
#if PERFSTAT
var t1 = Performance.now();
#endif
// Determine if an additional DIV for handling margins is needed:
object additionalOutsideDivForMargins = null;
var margin = ((FrameworkElement)child).Margin;
bool containsNegativeMargins = (margin.Left < 0d || margin.Top < 0d || margin.Right < 0d || margin.Bottom < 0d);
bool isADivForMarginsNeeded = !(parent is Canvas) && // Note: In a Canvas, we don't want to add the additional DIV because there are no margins and we don't want to interfere with the pointer events by creating an additional DIV.
!(child is Inline); // Note: inside a TextBlock we do not want the HTML DIV because we want to create HTML SPAN elements only (otherwise there would be unwanted line returns).
if (isADivForMarginsNeeded && (parent.IsCustomLayoutRoot || parent.IsUnderCustomLayout))
{
isADivForMarginsNeeded = false;
}
if (isADivForMarginsNeeded)
{
// Determine where to place it:
object whereToPlaceDivForMargins =
(doesParentRequireToCreateAWrapperForEachChild
? innerDivOfWrapperForChild
: domElementWhereToPlaceChildStuff);
// Create and append the DIV for handling margins and append:
additionalOutsideDivForMargins = INTERNAL_HtmlDomManager.CreateDomElementAndAppendIt("div", whereToPlaceDivForMargins, parent, index); //todo: check if the third parameter should be the child or the parent (make something with margins and put a mouseenter in the parent then see if the event is triggered).
// Style the DIV for handling margins:
var style = INTERNAL_HtmlDomManager.GetDomElementStyleForModification(additionalOutsideDivForMargins);
style.boxSizing = "border-box";
if (child is FrameworkElement &&
(((FrameworkElement)child).HorizontalAlignment == HorizontalAlignment.Stretch && double.IsNaN(((FrameworkElement)child).Width)))
{
if (!containsNegativeMargins)
{
style.width = "100%";
}
}
if (child is FrameworkElement &&
(((FrameworkElement)child).VerticalAlignment == VerticalAlignment.Stretch && double.IsNaN(((FrameworkElement)child).Height)))
{
style.height = "100%";
}
}
#if PERFSTAT
Performance.Counter("VisualTreeManager: Create the DIV for the margin", t1);
#endif
//--------------------------------------------------------
// PREPARE THE CHILD:
//--------------------------------------------------------
#if PERFSTAT
var t2 = Performance.now();
#endif
// Determine where to place the child:
object whereToPlaceTheChild = (isADivForMarginsNeeded
? additionalOutsideDivForMargins : (doesParentRequireToCreateAWrapperForEachChild
? innerDivOfWrapperForChild
: domElementWhereToPlaceChildStuff));
child.IsConnectedToLiveTree = true;
// Set the "ParentWindow" property so that the element knows where to display popups:
child.INTERNAL_ParentWindow = parent.INTERNAL_ParentWindow;
// Create and append the DOM structure of the Child:
object domElementWhereToPlaceGrandChildren = null;
object outerDomElement;
bool isChildAControl = child is Control;
if (child.INTERNAL_HtmlRepresentation == null)
{
bool hasTemplate = isChildAControl && ((Control)child).HasTemplate;
if (hasTemplate)
{
outerDomElement = ((Control)child).CreateDomElementForControlTemplate(whereToPlaceTheChild, out domElementWhereToPlaceGrandChildren);
}
else
{
outerDomElement = child.CreateDomElement(whereToPlaceTheChild, out domElementWhereToPlaceGrandChildren);
}
}
else
{
outerDomElement = INTERNAL_HtmlDomManager.CreateDomFromStringAndAppendIt(child.INTERNAL_HtmlRepresentation, whereToPlaceTheChild, child);
}
// Initialize the "Width" and "Height" of the child DOM structure:
if (child is FrameworkElement)
{
FrameworkElement.INTERNAL_InitializeOuterDomElementWidthAndHeight(((FrameworkElement)child), outerDomElement);
}
// Update the DOM structure of the Child (for example, if the child is a Grid, this will render its rows and columns):
child.INTERNAL_UpdateDomStructureIfNecessary();
// For debugging purposes (to better read the output html), add a class to the outer DIV that tells us the corresponding type of the element (Border, StackPanel, etc.):
INTERNAL_HtmlDomManager.SetDomElementAttribute(outerDomElement, "class", child.GetType().ToString());
// Set Visibility hidden when rendering with CustomLayout
if (child.IsCustomLayoutRoot && child.Visibility == Visibility.Visible)
{
INTERNAL_HtmlDomManager.GetDomElementStyleForModification(outerDomElement).visibility = "hidden";
child.isFirstRendering = true;
}
#if PERFSTAT
Performance.Counter("VisualTreeManager: Prepare the child", t2);
#endif
//--------------------------------------------------------
// REMEMBER ALL INFORMATION FOR FUTURE USE:
//--------------------------------------------------------
#if PERFSTAT
var t3 = Performance.now();
#endif
// Remember the DIVs:
child.INTERNAL_OuterDomElement = outerDomElement;
child.INTERNAL_InnerDomElement = domElementWhereToPlaceGrandChildren;
child.INTERNAL_AdditionalOutsideDivForMargins = additionalOutsideDivForMargins ?? outerDomElement;
child.INTERNAL_InnerDivOfTheChildWrapperOfTheParentIfAny = doesParentRequireToCreateAWrapperForEachChild ? innerDivOfWrapperForChild : null;
// Remember the information about the "VisualChildren":
if (parent.INTERNAL_VisualChildrenInformation == null)
{
parent.INTERNAL_VisualChildrenInformation = new Dictionary <UIElement, INTERNAL_VisualChildInformation>();
}
parent.INTERNAL_VisualChildrenInformation.Add(child,
new INTERNAL_VisualChildInformation()
{
INTERNAL_UIElement = child,
INTERNAL_OptionalChildWrapper_OuterDomElement = wrapperForChild,
INTERNAL_OptionalChildWrapper_ChildWrapperInnerDomElement = innerDivOfWrapperForChild
});
#if PERFSTAT
Performance.Counter("VisualTreeManager: Remember all info for future use", t3);
#endif
//--------------------------------------------------------
// HANDLE SPECIAL CASES:
//--------------------------------------------------------
#if PERFSTAT
var t4 = Performance.now();
#endif
// If we are inside a canvas, we set the position to "absolute":
if (parent is Canvas)
{
INTERNAL_HtmlDomManager.GetDomElementStyleForModification(outerDomElement).position = "absolute"; //todo: test if this works properly
}
UIElement.SetPointerEvents(child);
// Reset the flag that tells if we have already applied the RenderTransformOrigin (this is useful to ensure that the default RenderTransformOrigin is (0,0) like in normal XAML, instead of (0.5,0.5) like in CSS):
child.INTERNAL_RenderTransformOriginHasBeenApplied = false;
#if PERFSTAT
Performance.Counter("VisualTreeManager: Handle special cases", t4);
#endif
//--------------------------------------------------------
// HANDLE EVENTS:
//--------------------------------------------------------
#if PERFSTAT
var t5 = Performance.now();
#endif
// Register DOM events if any:
child.INTERNAL_AttachToDomEvents();
#if PERFSTAT
Performance.Counter("VisualTreeManager: Handle events", t5);
#endif
//--------------------------------------------------------
// SET "ISLOADED" PROPERTY AND CALL "ONATTACHED" EVENT:
//--------------------------------------------------------
// Tell the control that it is now present into the visual tree:
child._isLoaded = true;
// Raise the "OnAttached" event:
child.INTERNAL_OnAttachedToVisualTree(); // IMPORTANT: Must be done BEFORE "RaiseChangedEventOnAllDependencyProperties" (for example, the ItemsControl uses this to initialize its visual)
//--------------------------------------------------------
// RENDER THE ELEMENTS BY APPLYING THE CSS PROPERTIES:
//--------------------------------------------------------
// Defer rendering when the control is not visible to when becomes visible (note: when this option is enabled, we do not apply the CSS properties of the UI elements that are not visible. Those property are applied later, when the control becomes visible. This option results in improved performance.)
bool enableDeferredRenderingOfCollapsedControls =
EnableOptimizationWhereCollapsedControlsAreNotRendered ||
EnableOptimizationWhereCollapsedControlsAreLoadedLast ||
EnableOptimizationWhereCollapsedControlsAreNotLoaded;
if (enableDeferredRenderingOfCollapsedControls && !child.IsVisible)
{
child.INTERNAL_DeferredRenderingWhenControlBecomesVisible = () =>
{
RenderElementsAndRaiseChangedEventOnAllDependencyProperties(child);
child.ClearMeasureAndArrangeValidation();
};
}
else
{
RenderElementsAndRaiseChangedEventOnAllDependencyProperties(child);
}
//--------------------------------------------------------
// HANDLE BINDING:
//--------------------------------------------------------
#if PERFSTAT
var t9 = Performance.now();
#endif
child.INTERNAL_UpdateBindingsSource();
#if PERFSTAT
Performance.Counter("VisualTreeManager: Handle binding", t9);
#endif
//--------------------------------------------------------
// HANDLE TABINDEX:
//--------------------------------------------------------
// For GotFocus and LostFocus to work, the DIV specified by "INTERNAL_OptionalSpecifyDomElementConcernedByFocus"
// (or the OuterDomElement otherwise) needs to have the "tabIndex" attribute set. Therefore we need to always set
// it (unless IsTabStop is False) to its current value (default is Int32.MaxValue). At the time when this code was
// written, there was no way to automatically call the "OnChanged" on a dependency property if no value was set.
// IMPORTANT: This needs to be done AFTER the "OnApplyTemplate" (for example, the TextBox sets the "INTERNAL_OptionalSpecifyDomElementConcernedByFocus" in the "OnApplyTemplate").
if (isChildAControl)
{
if (!(child is TextBlock)) // TextBlock should not count in tabbing (TextBlock is not supposed to be a Control).
{
Control.TabIndexProperty_MethodToUpdateDom(child, ((Control)child).TabIndex);
}
}
//--------------------------------------------------------
// APPLY THE VISIBILITY:
//--------------------------------------------------------
Visibility childVisibility = child.Visibility;
if (childVisibility == Visibility.Collapsed)
{
UIElement.INTERNAL_ApplyVisibility(child, childVisibility);
}
//--------------------------------------------------------
// RAISE THE "SIZECHANGED" EVENT:
//--------------------------------------------------------
#if PERFSTAT
var t10 = Performance.now();
#endif
// Raise the "SizeChanged" event: (note: in XAML, the "SizeChanged" event is called before the "Loaded" event)
// IMPORTANT: This event needs to be raised AFTER the "OnApplyTemplate" and AFTER the "IsLoaded=true" (for example, it is used in the ScrollBar implementation).
if (child is FrameworkElement)
{
((FrameworkElement)child).INTERNAL_SizeChangedWhenAttachedToVisualTree();
}
#if PERFSTAT
Performance.Counter("VisualTreeManager: Raise size changed event", t10);
#endif
//--------------------------------------------------------
// RAISE THE "LOADED" EVENT:
//--------------------------------------------------------
#if PERFSTAT
var t11 = Performance.now();
#endif
// Raise the "Loaded" event: (note: in XAML, the "loaded" event of the children is called before the "loaded" event of the parent)
if (child is FrameworkElement)
{
((FrameworkElement)child).INTERNAL_RaiseLoadedEvent();
}
child.StartManagingPointerPositionForPointerExitedEventIfNeeded();
#if PERFSTAT
Performance.Counter("VisualTreeManager: Raise Loaded event", t11);
#endif
}
