Help with Selection API

How-to Discussions
1

Hi, everybody!
I am a designer and exploring pizza ordering example.

On ToppingsPage.ux you can select ingredients and they appears in the label below. I want to animate appearance of this label (for example, through LimitHeight property). So label is empty when nothing selected and animates height when I selected at least one ingredients. The UI elements below this label should shifts down.

I think this is something very basic, but I know very little javascript and it is hard to me change this example. Could you send me in right direction?

Thanks!

P.S. By the way there is some kind of a bug - when I change anything in this example, I got javascript error

LOG: Error: "Values" must be an Observable in Fuse.Selection.Selection<C:\Users\emptyfortress\AppData\Local\Fusetools\Fuse\App\app-0.26.0.7741\Packages\Fuse.Selection\0.37.9\$.uno:783> LOG: System.NullReferenceException: Object reference not set to an instance of an object.
But preview seems working.

2

An easy way to animate the appear of the label is:

		<Label Value="{current}" ux:Name="theLabel" ClipToBounds="true" Color="#AFF">
			<LayoutAnimation>
				<Resize Vector="1" RelativeTo="SizeChange" Duration="0.3"/>
			</LayoutAnimation>
		</Label>

Note you can’t animate the disappearance of the label this way since the text will immediately be removed: the height will still animate, but with the text gone it isn’t so interesting.

I’ve found the bug causing that error message and it will be fixed in an upcoming release.

3

Thank you very much!
As usual - exactly what I wanted!