WPF: Binding example (Part 2)

We will continue with our Task Manager application. This time we build the list box to show the process details.

Our goal is this screen:

The ListBox definition is:

<ListBox Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Path=ProcList}" Background="Gray" Foreground="White">
</ListBox>

Binding set to our list object: “ProcList”.

Now we can see the list is populated (the scroll bar is enabled), however we do not see any text. We should see the ToString() implementation. For e.g. if we bind the listbox to a list of Person objects we get this:

this.DataContext = new List<Person> { new Person(), new Person() };

Well, lets see if we get this right by adding the ItemTemplate in the list box.

<ListBox Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Path=ProcList}" Background="Gray" Foreground="White" Name="lst">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Path=ProcessName}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

So now we have the process names in the list box. Let’s tidy it a bit:

                <DataTemplate>
                    <Border BorderBrush="Black" BorderThickness="2">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Row="0" Grid.Column="0" Text="ProcessName" Margin="5,5"/>
                            <TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Path=ProcessName}" Margin="5,5"/>
                            <TextBlock Grid.Row="0" Grid.Column="1" Text="WorkingSet" Margin="5,5"/>
                            <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=WorkingSet}" Margin="5,5"/>
                            <TextBlock Grid.Column="2" Text="PrivateMemorySize" Margin="5,5"/>
                            <TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding Path=PrivateMemorySize}" Margin="5,5"/>
                            <TextBlock Grid.Column="3" Text="VirtualMemorySize" Margin="5,5"/>
                            <TextBlock Grid.Row="1" Grid.Column="3" Text="{Binding Path=VirtualMemorySize}" Margin="5,5"/>
                        </Grid>
                    </Border>
                </DataTemplate>

The content doesn’t stretch, this can be done by adding “HorizontalContentAlignment="Stretch" in the ListBox.

So we get:

The full code is embedded here:

Code file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Diagnostics;
namespace Processes
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            GetProcesses();
            this.DataContext = this;
        }
        private List<Process> _procList;
        public List<Process> ProcList
        {
            get { return _procList; }
            set { _procList = value; }
        }
        private void GetProcesses()
        {
            ProcList = Process.GetProcesses().ToList<Process>();
        }
    }
}
<Window x:Class="Processes.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Task Manager" Height="350" Width="525" WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Grid.Column="0" Background="Orange" Orientation="Horizontal">
            <TextBlock  Text="Count:" Margin="10,10"/>
            <TextBlock  Text="{Binding Path=ProcList.Count}" Margin="10,10"/>
        </StackPanel>
        <ListBox Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Path=ProcList}" Background="Gray" Foreground="White" Name="lst" HorizontalContentAlignment="Stretch">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="Black" BorderThickness="2">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Row="0" Grid.Column="0" Text="ProcessName" Margin="5,5"/>
                            <TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Path=ProcessName}" Margin="5,5"/>
                            <TextBlock Grid.Row="0" Grid.Column="1" Text="WorkingSet" Margin="5,5"/>
                            <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=WorkingSet}" Margin="5,5"/>
                            <TextBlock Grid.Column="2" Text="PrivateMemorySize" Margin="5,5"/>
                            <TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding Path=PrivateMemorySize}" Margin="5,5"/>
                            <TextBlock Grid.Column="3" Text="VirtualMemorySize" Margin="5,5"/>
                            <TextBlock Grid.Row="1" Grid.Column="3" Text="{Binding Path=VirtualMemorySize}" Margin="5,5"/>
                        </Grid>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>