Check the position of an item within a columnlayout

How-to Discussions
1

Hi!

is there a way to check if an item is placed on the right or left side of a StackPanel with a ‘ColumnLayout ColumnCount=“2”’ ?

Thnx!

2

this is my solution:

anyone got a better one? for example: checking the column number

<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable");
		var items = Observable();
		var lineX;

		items.add({text:1, isRight: Observable()});
		items.add({text:2, isRight: Observable()});
		items.add({text:3, isRight: Observable()});
		items.add({text:4, isRight: Observable()});
		items.add({text:5, isRight: Observable()});

		function panelPlaced(args) {
        	if (args.x > lineX) {
	        	args.data.isRight.value = true;
        	}
    	}

		function linePlaced(args) {
			lineX = args.x
    	}

    	module.exports = {
    		items: items,
    		linePlaced: linePlaced,
    		panelPlaced: panelPlaced
    	}
	</JavaScript>


	<Panel Background="#fff">

		<Rectangle Width="3" Fill="#000" Placed="{linePlaced}">
		</Rectangle>

		<StackPanel>
			<ColumnLayout ColumnCount="2"/>
			<Each Items="{items}">
				<Rectangle ux:Name="rect" Fill="#f0f" Height="50" Margin="10,10,10,20" CornerRadius="8" Placed="{panelPlaced}">
					<Text Value="{text}"/>
					<WhileTrue Value="{isRight}">
						<Change rect.Fill="#ff0"/>
					</WhileTrue>
				</Rectangle>
			</Each>
		</StackPanel>

	</Panel>
</App>
3

Generally, it should be JS telling the view where it wants things placed, not the other way around.

When you have 2 columns, whether you are left or right will basically be isRight = (index%2 == 1). You can get the index from a .map(function(item, index) { ...

4

Maybe i am missing something but in a columnlayout it may happen that if the size of the 2nd + 3rd item is less than the size of the 1st item then the 3rd one will be placed on the right column so maping won’t work.

I don’t want JS to tell where i want the things placed (columnlayout works perfect in that sense) i just want to ensure the items on the right side (2nd column) to have a yellow background.

5

There is unfortunately no elegant way of achieving knowledge of layout from JS - Fuse is specifically designed to JS should not be involved in layout or styling.

If your solution works it is probably about as good as it gets right now.

Note that you can use the UX functions width() height() (and x() and y() starting in Fuse 0.35) to make triggers based on layout results, e.g.

 <WhileTrue Value="x(elm) > width(otherElm)/2">
6

(Fuse 0.35 is currently in pre-release-testing, download at own risk: https://www.fusetools.com/downloads/channel/qa)

7

Thnx!!!

keep on the good work… but… pls… don’t work on sundays!! (even if it helps me a lot)

8

Hi Anders,

0.35 has been released BUT according to the doc:

One can now get the x or y position of an element relative to its parent by using the x(element) or y(element) functions in UX expressions.

So it won’t help in that case as it’s relative to parent.

9

Sorry, why doesn’t that help? The panel with the column layout is the parent, so it would still work

10

U are right! Sorry!!

And thnx!!