Tutorial: Setting the DOM "id" via XAML

JS-Support @Userware
Site Admin
Posts: 1142
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


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.

(8.77 KiB) Downloaded 162 times

Return to “Extensions and Plugins for CSHTML5”

Who is online

Users browsing this forum: No registered users and 1 guest