Universal Windows Platform ListBox

One of the common and important control of Windows 10 Universal App is List Box control. It is really helpful for making a long list of elements. You can populate it with some data, pictures or anything that you want to show in your application. List Box can be implemented easily only by XAML. In this example, we are going to use our previous project SplitView control and make the Split View Pane items with the help of List Box. So, let’s get started.

Creating a Project with Split View Control

First of all, create a new project and in MainPage.xaml inside the Grid make a new SplitView control.

<SplitView x:Name="SplitView" OpenPaneLength="200" CompactPaneLength="50"
        DisplayMode="CompactOverlay" IsPaneOpen="False" PaneBackground="DarkGray" >
    <SplitView.Pane>
        <!--Pane Items-->
    </SplitView.Pane>
    <SplitView.Content>
        <!--Content View-->
    </SplitView.Content>
</SplitView>

                                                Listing 1

Previously, we have created the Pane items with Radio Buttons with custom styles. But, now we will work with ListBox items, and the work will be much easier for us.

Creating ListBox Items

ListBox is a simple control with inline elements of ListBox items. The basic structure of ListBox is as in the following code snippet:

<ListBox>
<ListBoxItem Content="First" />
<ListBoxItem Content="Second" />
<ListBoxItem Content="Third" />
</ListBox>

                                                Listing 2

We can declare as many items inside the ListBox control. Now, replace the commented Pane Items with the following code:

<ListBox SelectionMode="Single"
            SelectionChanged="ListBox_SelectionChanged">
    <ListBoxItem Name="Back" Background="Gray">
        <StackPanel Orientation="Horizontal">
            <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="30" Text="" />
            <TextBlock FontSize="24" Margin="10,0,0,0">Back</TextBlock>
        </StackPanel>
    </ListBoxItem>
    <ListBoxItem Name="Hamburger">
        <StackPanel Orientation="Horizontal">
            <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="30" Text="" />
            <TextBlock FontSize="24" Margin="10,0,0,0">Menu</TextBlock>
        </StackPanel>
    </ListBoxItem>
    <ListBoxItem Name="Home">
        <StackPanel Orientation="Horizontal">
            <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="30" Text="" />
            <TextBlock FontSize="24" Margin="10,0,0,0">Home</TextBlock>
        </StackPanel>
    </ListBoxItem>
    <ListBoxItem Name="Settings">
        <StackPanel Orientation="Horizontal">
            <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="30" Text="" />
            <TextBlock FontSize="24" Margin="10,0,0,0">Settings</TextBlock>
        </StackPanel>
    </ListBoxItem>
</ListBox>

                                                Lisitn 3

Here we have taken a ListBox, and there are four List Box items like previously we had four Radio Buttons. Each item represents correspondent SplitView Pane item. Inside the ListBoxItem, there is a StackPanel to hold the icon and the text of the items. StackPanel arranges the TextBlocks in a same alignment. In first TextBlock, Font Family is Sagoe MDL2 Assets, which is the same as Character Map special character set, and Text is just the following character.


                                                               Figure 1

Adding Extra Pages

Now, create two blank pages named Page1.xaml and Page2.xaml. In Page1.xaml, change the code like the following.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   <TextBlock FontSize="36" Text="Home Page" Margin="12,17,0,17"/>
</Grid>

                                                      Listing 4

Similarly, in Page2.xaml change the code like the following. 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock FontSize="36" Text="Settings Page" Margin="12,17,0,17"/>
</Grid>

                                                         Listing 5

Handle events in code-behind MainPage.xaml.cs

The event handlers of the Split View’s Radio Buttons are as follows.

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (Back.IsSelected)
    {
        if (MyFrame.CanGoBack)
        {
            MyFrame.GoBack();
        }
    }
    else if (Hamburger.IsSelected)
    {
        if (!this.SplitView.IsPaneOpen)
        {
            this.SplitView.IsPaneOpen = true;
        }
        else
        {
            this.SplitView.IsPaneOpen = false;
        }
    }
    else if (Home.IsSelected)
    {
        MyFrame.Navigate(typeof(Page1));
    }
    else if (Settings.IsSelected)
    {
        MyFrame.Navigate(typeof(Page2));
    }
    else
    {
        // do nothing
    }
}

                                                                  Listing 6

If you notice, we do not have any extra Button control here, and it is just the SelectionChanged event of the ListBox control. Every ListBoxItem has a unique name, so we check whether it is selected or not. If so, we have made the frame navigate to other correspondent page. You can also see the previous article at http://bit.ly/1O626HP.

Running the Application

If you run the application, it will look like the following screenshot:


                                             Figure 2

Conclusion

ListBox is a common and useful control. You can use it for static data as well as some other data source. Hope this helps you to understand the basic implementation of ListBox in Universal Windows Application. Happy Coding!

Download the full source code at http://1drv.ms/1L7iqY6.