Toggle color

How-to Discussions
1

Hello,

This is the menu of our app. When a category is chosed it changes color but we cannot make it work to get back to the original color when you select an other.Any suggestions?

file
MRAp5keMrmM6-image-1473201056718.30.37.png752×1380

This is the code


<Page ux:Class="MoviePage">
	<JavaScript File="MoviePage.js" />

	<Panel ux:Class="Categories" Margin="18,0,0,5" Alignment="Left">
		<Text ux:Name="text" Value="{item}" FontSize="20" TextColor="#fff" Alignment="Center" Margin="15,0,0,0" />
		<Clicked Handler="{clickAction}">
			<Toggle Target="tagged"/>
		</Clicked>
		<WhilePressed>
			<Scale Factor=".85" Duration=".08" Easing="QuadraticInOut" />
		</WhilePressed>
		<WhileTrue ux:Name="tagged">
			<Change text.TextColor="#fed166"/>
		</WhileTrue>
	</Panel>

	<Panel Margin="0,50,0,0">
		<StackPanel ItemSpacing="10">
			<Each Items="{categoriesView}">
				<Categories />
			</Each>
		</StackPanel>
	</Panel>
</Page>
2

You can bind the value of your tagged WhileTrue to an observable property of the items in your categoriesView list. Then you can have a small JS function which is called when you click an item and then iterates over the list and untags all the other ones.

Effectively you’d do something similar as what was suggested in this thread

3

Thank you for the reply. I got it to work following your suggestion but i have another question. How can i achieve the same effect when i swipe between pagecontrol pages?

4

I found a solution using an observable as you suggested and WhileActive .