ListPicker: color picker

[Scott Ferguson]

The ListPicker component takes an already powerful tool for storing data in the app (the list) and adds a 'window' for you to view and select one of it's elements/items.

In this exercise we will create a color picker that changes the BackgroundColor of the app Screen. In order to do this we will create a list of color names to select a color from in the ListPicker.

The selected color will be used to pick a color code from another list containing color code numbers. The selected color code will then be used to change the BackgroundColor of the app screen.

Create a new project named lrn_lpk_colors .

Screen Designer:

Drag out a ListPicker component to the Viewer layout.

Change the ListPicker component Text Property to Set screen BackgroundColor.

Blocks Editor:

Drag out a ListPicker1.BeforePicking block.

 - this block executes when the ListPicker button has been pressed and will be used to load the ListPicker with it's color name elements.

Drag out a make a list block.

We will store the color names inside the make a list block.

Drag out 14 text blocks, attach them to the make a list block, then rename them as shown below.

 - the text in these text blocks will show in the ListPicker list that displays on the app Screen

Drag out a ListPicker1.AfterPicking block.

 - this block will be used to first pick a color code based on the color item that was pick with the ListPicker, then use that color code to change the Screen BackgroundColor.

Drag out a Screen1.BackgroundColor block and drop it inside the ListPicker1.AfterPicking block.

 - this block will be used to set the Screen BackGroundColor.

Drag out a select list item block and attach it to the Screen1.BackgroundColor block,

Drag out a make a list item as before and attach color code number blocks to it as shown below. 

Drag out a ListPicker1.SelectionIndex block and attach it to the index socket of the select list item block.

 - this block contains the position in the ListPicker where the color name was picked.

 - This is a very powerful block as it will be used to pick the color code that matches that color name in the color codes list.

Now test your color picker with the emulator or connected device. If it changes the background color of the Screen, then congrats!


Challenge:Create a ListPicker that contains fruits, vegetables, etc. items.When an item is selected, change the text label of the ListPicker button (ListPicker1.Text) to show the item that was selected (ListPicker1.Selection).