Question

I am trying to obtain the <RowDefinitions> element from my Xaml, through Javascript, so I can add new <RowDefinition> elements to it at runtime.

This way, if a user inputs the number ’20’, then 20 <RowDefinition> elements will be added to <RowDefinitions>.

The problem is that <RowDefinitions> does not have a possibility for x:Name. It only has x:uid. So would it be possible to fetch the uid from within Javascript? I need the <RowDefinitions> Element one way or another (but only through JS). I need to add <RowDefinition> elements to it.

Any ideas?

Thanks

Answer 1

Assuming Javascript API

There is no such element as <RowDefinitions> you will be refering to the RowDefinitions property of a Grid element which is represented as <Grid.RowDefinitions> in Xaml. Hence you use FindName to aquire the Grid then use GetValue to get the collection of row definitions. Lets assume you have this simple Xaml to start with:-

<Grid
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Loaded="rootGridLoaded" />

So in your Javascript you have can have this code:-

function rootGridLoaded(sender)
{
     var plugin = sender.getHost();
     var rowDefs = sender.GetValue("RowDefinitions");
     for (var i=0; i < 20; i++)
     {
         var rowDef = plugin.content.createFromXaml("<RowDefinition />");
         rowDefs.add(rowDef);
     }
}

This will get the RowDefinitions collection from the Grid (which in this case is the sender but you just as easily have used FindName to get a named grid. Then it loops adding 20 RowDefintion instances ot the collection.