About modifying each item's element

There is a panel showing a list of image.


    <Each Items="{image_list}">
        <DisplayImage />


<DockPanel ux:Name="DisplayImage" >
    <Clicked Handler="{resizing}"/>
    <Image ux:Name="{test_img}" Url="{url}" StretchMode="UniformToFill" />


var test_img = Observable();

function resizing(args)
    I am able to modify the args.data here.
    But how can I modify the specific test_img's height and width here according to the args?

module.exports = {
    test_img : test_img



For the most part, we reccommend animation of visual parameters is done in UX markup using triggers and animators, e.g.

<Image ux:Name="img">
        <Set img.Width="100" />

This is much faster than going throught he async javascript thread.

If you want to change visual parameters from JS, you have to data-bind Width and Height to your data source, e.g.

function TestImage()
   this.width = Observable(100);
   this.height = Observable(100);

var images = Observable(
    new TestImage(),
    new TestImage());

module.exports = {
    images: images

And in UX:

<Each Items="{images}">
    <Image Width="{width}" Height="{height}" />

hi thank you!

If I want to do calculation to resize in ux, is it possible?

something like that but I failed

<Image ux:Name="img">
        <Set img.Width="img.Height*0.5" />


Nope, for now this is not possible in UX, but you can do

this.width = this.height*0.5

In JS if you data-bind the sizes.