Input Controls in Silverlight

So far I didn’t spend much time on Input Controls. When I needed an example, I just quickly created a project that probably would contain a textbox control, a textblock control and/or a button control. But as I have seen on other applications, there are other types of Input Controls that are used to allow the user to input different types of information. Today I am getting a little overview over the major Input Controls used in Silverlight.

I am not using the toolbox, I am just typing in all the definitions into my XAML pane. That’s giving me the opportunity to get more familiar with XAML. After all, I am a beginner, and beginners need the extra exercise, right?

Also, what I am doing is using a Grid to have all my Input Controls nicely arranged. More exercise. In this blog post you can find more information about Layout controls in Silverlight from a beginner’s view.

I have defined 7 rows and 3 columns:

Let’s move on and place some input controls in each of the cells I just defined.

I am going to begin with a TextBox control. The TextBox allows the user to type in values using the input scope or rather the on screen keyboard. I also created a TextChanged event that fires off each time the user types in a new value:

The next control I want to show is a PasswordBox. This looks very similar to the TextBox. The PasswordBox has limited utility though. It is useful in situations that I want to allow the user to type in values that can’t be seen by others who might look over the user’s shoulder. Its declaration is almost identical to that of the Textbox. There are two subtle differences. First there is a PasswordChanged event available. And secondly instead of the Text property here the Password property is used:

Assuming I need a simple yes or no answer by the user, I could let him type in the value in a textbox, or I could use yet another control, the CheckBox control. The CheckBox control limits the entry of the user to true or false:

A few things I want to point out here. First of all the CheckBox has a content property which is what is displayed to the right of the CheckBox itself. Second there is a Checked event that I can handle. So whenever the user taps the CheckBox it will fire off an event. And third, this is a perfect demonstration of how to span a single control across multiple columns using the ColumnSpan property. I knew the content would not fit into the first column, so I allowed it to use more space. I allowed it to span over all three columns.

If I would want the user to choose between multiple options I would use the RadioButton control instead:

Each RadioButton is independent, but the GroupName property, that I set to “myGroup” on both of my RadioButtons, is the property that keeps them collected together. They “work as a team”. In other words, when one RadioButton is selected, any other RadioButton in the same group is automatically deselected. I’ve set the default IsChecked property on the first RadioButton to “True”. It’s not really necessary to do that, but in a running application it is a good visual reminder for the user to see what the intend of those RadioButtons is. The user sees that he needs to select one of these. If the by default preselected one is not the right one for you, make sure to click the other one.

The RadioButton control also supports a Checked event, just like the CheckBox, which I did not use for now.

What I need to keep in mind is, that when I go to retrieve the value, I have to be a little creative about how to find out which RadioButton of those two was selected.

But first I want to add another Input Control. Let’s say, I have a number of options to choose from, and I want to allow the user to select one or more values from that list, I would choose a ListBox control. The ListBox is a little bit more complicated than these other controls, because a ListBox will contain other controls inside of it, ListBoxItem controls:

In my ListBox I have eight ListBoxItems, each of them has a Content property that I am just setting to a simple string.

Let’s run the application:

Everything’s nicely in place. Just the ListBox doesn’t show all items at the same time. I can use my mouse cursor there, to simulate a finger on a real device, and scroll through my list. I can manage the selected item with the SelectionChanged event.

At this point I am running into a little bit of a problem. I need to add a Button control to the very bottom of my main form. I need to figure out a way to accomplish this, because right now there is no free space. I’ve run out of space vertically. I need some way to allow the user to scroll down to see the rest of my application. Luckily there is an easy way to retrofit this functionality through the use of a ScrollView control. The ScrollViewer creates a little window to the information that it contains within it.

So I am going back to before my ContentPanel in my XAML code and add a ScrollViewer:

I just have to make sure that I don’t forget the ScrollViewer ending tag after my Content Grid.

I essentially now wrapped a ScrollViewer around my Content  Grid.

Now that I have a little space I want to add my button. First I have to add another row to the Grid.RowDefinition collection. Now I can add my Button definition after the ListBox definition:

Now I can scroll down to the very end of that application until I actually can see the just created button:

I could have dragged the ScrollViewer from the toolbox to my main form, but since everybody says as a Windows Phone developer I have to understand XAML, let’s not even go there. After all, my code is working, so why change it?

Anyway, the button indicates that there is some action to be taken when the button is clicked. In XAML I can set properties for my button, like the appearance or the content, but I kind of rely on the button to provide a click event, so that I can write code to handle. By right clicking on that click event in my XAML code I can navigate directly to that click event handler in C#. What I want to do there is to retrieve all the values of the controls that I added:

To be continued…

Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: