Over a million developers have joined DZone.

Input Controls in Silverlight

· Mobile Zone

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

So far I didn’t spent 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:

    <RowDefinition Height="75*" />
    <RowDefinition Height="75*" />
    <RowDefinition Height="75*" />
    <RowDefinition Height="75*" />
    <RowDefinition Height="75*" />
    <RowDefinition Height="75*" />
    <RowDefinition Height="75*" />
    <ColumnDefinition Width="160*" />
    <ColumnDefinition Width="10" />
    <ColumnDefinition Width="250*" />

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:

<TextBox Name="myTextBox"
         TextChanged="myTextBox_TextChanged" />

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:

<PasswordBox Name="myPasswordBox"
             PasswordChanged="myPasswordBox_PasswordChanged" />

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:

<CheckBox Name="myCheckBox"
          Content="Are you sure you want to do this?"
          Checked="myCheckBox_Checked" />

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:

<RadioButton Name="myRadioButton1"
             IsChecked="True" />
<RadioButton Name="myRadioButton2"
             GroupName="myGroup" />

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:

<ListBox Name="myListBox"
    <ListBoxItem Content="First Option" />
    <ListBoxItem Content="Second Option" />
    <ListBoxItem Content="Third Option" />
    <ListBoxItem Content="Fourth Option" />
    <ListBoxItem Content="Fifth Option" />
    <ListBoxItem Content="Sixth Option" />
    <ListBoxItem Content="Seventh Option" />
    <ListBoxItem Content="Eighth Option" />

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:

<ScrollViewer Margin="0,175,0,0"

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:

<Button Name="myButton"
        Click="myButton_Click" />

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:

    private void myButton_Click(object sender, RoutedEventArgs e)
        string textBoxValue = myTextBox.Text;
        string passwordBoxValue = myPasswordBox.Password;
        bool? checkBoxValue = myCheckBox.IsChecked;
        string radioButtonValue = "";
        if (myRadioButton1.IsChecked == true)
            radioButtonValue = "Female";
            radioButtonValue = "Male";
        ListBoxItem lbI = (ListBoxItem)myListBox.SelectedItem;
        string listBoxItem = (string)lbI.Content;
        //write code here to save data on the phone or online

To be continued…

Source:  http://andreahaubner.blog.com/2011/02/25/input-controls-in-silverlight/

The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.


The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}