layout master and each method

How-to Discussions
1

Hi guys, i’m trying to use layout master inside a each method , so when an item of my each method is active, the black rectangle do a translation next to the active item, but i’m falling to understand , how this can be built.
can anyone help me ?

<App>

  <DockPanel>

    <JavaScript>

    var Observable = require("FuseJS/Observable")
    var zt = Observable(
      {isOpen: false, color: "#DC143C"},
      {isOpen: false, color: "#DC143C"},
      {isOpen: true, color: "#7FFF00"},
      {isOpen: false, color: "#DC143C"}
    )

    module.exports = {
      zt: zt
    }
    </JavaScript>
    <StackPanel Margin="10,0,0,0" Height="50">
        <ScrollView AllowedScrollDirections="Horizontal">
          <StackPanel Alignment="Center"  Orientation="Horizontal" ItemSpacing="10">
            <Each Items="{zt}">
              <Rectangle LayoutMaster="za"  Color="{color}" IsInteractingChanged="{page}" Height="10" Width="100" Margin="10">
                <WhileTrue Value="{isOpen}">
                  <Scale Factor="1.4"/>
                </WhileTrue>
              </Rectangle>
            </Each>
          </StackPanel>
        </ScrollView>

        <Rectangle Height="10" Color="Black" ux:Name="za"  Width="50" Margin="10"/>
    </StackPanel>
  </DockPanel>
</App>
2

Hi prince,

the snippet you posted shows nothing but a single black rectangle. It’s impossible to suggest anything until we see what the problem is; and here we see nothing.

3

that’s the problem , please delete LayoutMaster="za" to see other rectangles

4

By doing that you are basically telling Fuse that all of your red and green rectangles are visual children of the black rectangle - so they move there.

To achieve what you’re after, you should change the LayoutMaster of the black rectangle, not the other way around.

The construct with ScrollView and Center-aligned StackPanel is very confusing, but I played with it a little and here’s a proof of concept that kind of works as you would expect it to:

<App>

  <DockPanel>

    <JavaScript>

    var Observable = require("FuseJS/Observable");
    var zt = Observable(
      {isOpen: Observable(false), color: "#DC143C"},
      {isOpen: Observable(false), color: "#DC143C"},
      {isOpen: Observable(true), color: "#7FFF00"},
      {isOpen: Observable(false), color: "#DC143C"}
    );

    var indexed = zt.map(function(item, index) {
        return {index: index, item: item};
    });

    function setActive(args) {
        zt.forEach(function(item, index) {
            if (index == args.data.index) {
                item.isOpen.value = true;
            } else {
                item.isOpen.value = false;
            }
        });
    }

    module.exports = {
      indexed: indexed,
      setActive: setActive
    }
    </JavaScript>
    <StackPanel Margin="10,0,0,0" Height="50">
        <ScrollView AllowedScrollDirections="Horizontal">
          <StackPanel Alignment="Center" Orientation="Horizontal" ItemSpacing="10">
            <Each Items="{indexed}">
                <NodeGroup>
                  <Rectangle ux:Name="smth" Color="{item.color}" Height="10" Width="100" Margin="10">
                    <WhileTrue Value="{item.isOpen}">
                      <Scale Factor="1.4"/>
                      <Change za.LayoutMaster="smth" />
                    </WhileTrue>
                    <Clicked>
                        <Callback Handler="{setActive}" />
                    </Clicked>
                  </Rectangle>
              </NodeGroup>
            </Each>
          </StackPanel>
        </ScrollView>

        <Rectangle Height="10" Color="Black" ux:Name="za" Width="50" Margin="10">
            <Translation Y="2" RelativeTo="Size" />
        </Rectangle>
    </StackPanel>
  </DockPanel>
</App>