This section combines the understanding of DataContext, Layouts, and Events to create a custom list.

We will first gain the basic understanding of custom lists and then create one advanced level ListView based on custom view.

(Feel free to jump to the section of your choice, directly by clicking on it)

Preparing an item template #

To understand this concept, let us create one small UI that will serve as an item template in our custom list by following the steps below:

Drag the Border from the TOOLBOX onto the WPF form.

Add a StackPanel. Right-click on it and select Fill Parent from the drop-down.

Setup the Orientation option of StackPanel from the PROPERTIES as Horizontal.

Add an Ellipse from TOOLBOX into the StackPanel.

Drop another StackPanel in the existing structure.

Add two TextBlock(s) in the second StackPanel.

Set up Margins and your item template is ready!

Creating a custom list with item template #

After preparing the template for each item, let us create a complex custom list, based on the template of the previous section.

The steps are as follows:

From the TOOLBOX, add a ListView.

Navigate to the DataContext to create an array of objects named ‘data’. You can create complex objects in an array by writing their properties within the curly brackets.

You can assign the properties of your choice along with their values to each of the objects. We have created three properties for an object named ‘name’, ‘lastChecked’, ‘color’.

Here is what the DataContext will look like after assigning properties and values to all four objects in the array.

{
    "data": [
        {
            "name":"poshgui.com",
            "lastChecked":"2 minutes ago",
            "color":"Green"
        },{
            "name":"facebook.com",
            "lastChecked":"4 minutes ago",
            "color":"Red"
        },{
            "name":"twitter.com",
            "lastChecked":"6 minutes ago",
            "color":"Green"
        },{
            "name":"linkedIn.com",
            "lastChecked":"8 minutes ago",
            "color":"Red"
        }]}

Navigate to the XAML of ListView, and add the <ListView.ItemTemplate><DataTemplate></DataTemplate></ListView.ItemTemplate> to create a template of custom list within the ListView.

Add all the controls you added in the Border while working on Custom Lists between the <DataTemplate></DataTemplate> in the previous section. You can refer to steps 2-7 of the preparing item template section.

Select the ListView, and bind it to the ‘data’. This will create a view like follows:

Now, time to bind the respective properties of DataContext to the list items. For that you can add Fill= “{Binding color}” to Ellipse, Text = “{Binding name}” to the first TextBlock, and Text= “{Binding lastChecked}” to the last TextBlock.

After executing, you can see the created custom list as follows:

Code for creating example complex CustomList:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="800" Height="400">
<Grid>
<ListView HorizontalAlignment="Left" BorderBrush="Black" BorderThickness="1" Height="280" VerticalAlignment="Top" Width="327" Margin="266,31,0,0" ItemsSource="{Binding data}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="5,5,5,5">
                <Ellipse HorizontalAlignment="Left" VerticalAlignment="Top" Fill="{Binding color}" Stroke="Black" Height="50" Width="50"/>
                <StackPanel HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="0,0,0,0">
                    <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap" Text="{Binding name}" Margin="10,0,0,0"/>
                    <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap" Text="{Binding lastChecked}" Margin="10,0,0,0"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
</Grid>
</Window>