Page 1 of 1

Tutorial: Setting the DOM "id" via XAML

Posted: Tue Jul 16, 2019 3:06 am
by JS-Support @Userware
Hi,

It is sometimes useful to set html id tags to the html component, for example in order to create an automated test suit that automatically clicks on elements on the html page based on their ID.

This tutorial shows how you can create an attached property to set the "id" in XAML whichh gets reflected into the generated HTML.

For example, we want the following XAML:

<TextBlock Text="Hello world" Margin="10" extensions:DomIdentifierExtensions.DomId="testUid1"/>

to be converted to:

<div class="Windows.UI.Xaml.Controls.TextBlock" tabindex="" style="white-space: nowrap; overflow: hidden; text-align: left; height: 100%; width: 100%; font-size: 24px; line-height: 125%; font-weight: 700;" id=”testUId1”>Hello world</div>

To do that, please find attached below a sample project.

Regards