Windows Phone investigate

Windows Phone 7: using ListBoxes with Style

Adding a button to the end of a ListBox in Windows Phone 7 is a little more complicated than expected.

ListBoxes are the bread and butter of the Metro visuals that have been pioneered by Windows Phone 7 (WP7).

Especially in a text-driven environment with few graphical cues, an application will need to present its data in some form of order.

The Windows Phone framework mandates that the order will flow in a vertical direction, and that the widget to be used is a ListBox. OK, OK, that's a bit of a stretch, but for the vast majority of the time using WP7, that's the way it's going to be.

If you have no idea what I am talking about with ListBoxes, the best way to explain it is by way of a demo app.

Take your Microsoft-sanctioned WP7 environment, start up your version of Visual Studio, and create a new project from a Silverlight for Windows Phone template that is a Windows Phone Panorama Application.

Once you select the version of Windows Phone to target, you'll be presented with the default Panorama application. A garish blue application that contains two Panorama items — these are the containers for the ListBoxes, and have the headers that say "first item" and "second item" — which both contain a ListBox, each of which holds sixteen items.

Should we wish to, we could add items to this list ad infinitum. But adding another widget; well, that's a horse of a different colour altogether.

To add a button to the end of the list, we need to change the Style that the ListBox uses. That means we need to right-click on the MainPage.xaml file and open it in Expression Blend.

Whether via a docked pane or via the Window menu, go to the "Objects and Timeline" panel, right-click on the first ListBox object, and select Edit Template > Edit a Copy.

If you switch to the XAML view of the file, notice how Blend has added a Style block at the start that contains our custom style for the ListBox. I find it easier to add elements in the XAML view rather than via the GUI, but you may differ.

To add more than one object to the Scrollviewer, firstly we need to wrap the contents of the Scrollviewer (the ItemsPresenter) in a StackPanel — the basest of all layout controls in WP7 — and then add a Button element inside the StackPanel object, but after the ItemsPresenter element. ItemsPresenter contains the current ListBox presentation. We don't want to remove this, only add to it.

Your XAML for the Template Setter should look like this:

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="ListBox">

<ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}">

<StackPanel>

<ItemsPresenter />

<Button />

</StackPanel>

</ScrollViewer>

</ControlTemplate>

</Setter.Value>

</Setter>

Blend will also automatically add the Style we have created to the ListBox we edited.

Now let's make that button useful.

<Button Name="Clear" Content="Clear All" Tap="Clear_Tap" />

To access the button easily in our code, we gave it the name "Clear", gave it the label "Clear All", and set the event Clear_Tap to be invoked when the button is pressed.

In order to easily operate on the ListBox, we need to give it a name. We just changed the definition of the first ListBox to:

<ListBox Name="FirstLB" Margin="0,0,-12,0" ItemsSource="{Binding Items}" Style="{StaticResource ListBoxStyle1}">

That's all with the XAML; time to switch over the C#.

In the file MainPage.xaml.cs, all we need to do is add the following handler:

        private void Clear_Tap(object sender, GestureEventArgs e)

{

ObservableCollection<ItemViewModel> itemsSource = FirstLB.ItemsSource as ObservableCollection;

itemsSource.Clear();

}

This method gains a reference to the collection of items in the FirstLB ListBox, and then clears that collection.

Since the same ItemSource is used between both ListBoxes, when we hit the clear button, it actually deletes the items from both lists.

Run the simulator with F5 and see the app in action.

This isn't the most complex application ever created, but hopefully it helps you out of a bind.

About

Some would say that it is a long way from software engineering to journalism, others would correctly argue that it is a mere 10 metres according to the floor plan.During his first five years with CBS Interactive, Chris started his journalistic advent...

0 comments