<Match> inside of another <Match> changing order of items

How-to Discussions
1

Hi,
I created a list of cards and have a few types of components inside of any card. I have JSON for any component where is specified type of component and in the UX file I have Match for selection the right component template.

In the JSON, I have defined an order of components like that:

  1. ResultUniversal

  2. TextBlock

Order of components stays the same if I have only one Match. But if I put another Match inside of Case (where I am choosing the right template for the cardType), it renders components in this order, not sure why:

  1. TextBlock

  2. ResultUniversal

Here is my code:

<Each Items="{components}">
	<Match Value="{type}">   
	    <Case String="ResultUniversal">
	    	<Match Value="{cardType}">   
			    <Case String="match">
			        <molecule.ResultUniversalLarger />
			    </Case>
			    <Case String="information">
			        <molecule.ResultUniversal />
			    </Case>
			</Match>
	    </Case>
	    <Case String="TextBlock">
	        <molecule.TextBlock />
	    </Case>
	</Match>
</Each>

What am I doing wrong? Thanks for the help!

2

Hi!

To enforce ordering, make sure you wrap the cases with <Panel> appropriately.

Consider using this pattern instead (faster, better):

 <Each MatchKey="type">
      <Panel ux:Template="match">
            ....
      </Panel>
      <Panel ux:Template="information">
            ....
      </Panel>
3

Thanks, it helped a lot.

4

Jumping on this thread as we also have a list with many different types of items requiring different rendering - when using MatchKey and Template, it seems I am unable to refer to UX elements outside the template.

So how can I do things like changing the layout master which is core to our design?

<Change myIconInsideTemplate.LayoutMaster="containerOutsideList" Duration="0.6" />

Using Match, Case gives this possibility? But what is the performance loss really using match case?