Tutorial: Setting the DOM "id" via XAML

JS-Support @Userware
Site Admin
Posts: 1083
Joined: Tue Apr 08, 2014 3:42 pm

Tutorial: Setting the DOM "id" via XAML

Postby JS-Support @Userware » Tue Jul 16, 2019 3:06 am

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
Attachments
TestSettingIdentifierInDiv.zip
(8.77 KiB) Downloaded 26 times

Return to “Extensions and Plugins for CSHTML5”

Who is online

Users browsing this forum: No registered users and 1 guest

 

 

cron