About modifying each item's element

How-to Discussions
1

There is a panel showing a list of image.

Outside:

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

Inside:

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

js:

var test_img = Observable();

function resizing(args)
{
    Question:
    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
};

Thanks!

2

Hi!

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">
    <Clicked>
        <Set img.Width="100" />
    </Clicked>
</Image>

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}" />
</Each>
3

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">
  <Clicked>
        <Set img.Width="img.Height*0.5" />
  </Clicked>
</Image>
4

Hi,

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.