For this contest entry, How People Use Global’s Millennium, I chose to present the data using the Elastic List concept described here. This is a post on how I built a piece of the Elastic List control, that is the controlling ListBox.
I was asked to share the source, Sure, no problem. If you'd like the whole package, it's right here.
The ListBox that controls this chart needs to do three things: 1. Display the items in descending order of occurrance. 2. Color the items in respect to their occurrance and 3. Size the items in respect to their occurrance.
The Phizzpop contest entry provided a DataVisualization project which was to serve as the starting point. In this project was the datasource, Customersurveys.xml.
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<CustomerSurveys xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<Survey>
<CustomerId>1</CustomerId>
<Device>DX100 MP3 Player</Device>
<Month>9</Month>
<Year>2008</Year>
<TimeUsed>20</TimeUsed>
<Activity>Driving</Activity>
</Survey>
The Xaml for the ListBox:
<PP4:ListControl x:Name="ActivityList" Title="Activities" Width="200" Height="343" VerticalAlignment="Top" AllClicked="ActivityList_AllClicked" FilterClicked="ActivityList_FilterClicked" SelectionChanged="ActivityList_SelectionChanged" LockClicked="ActivityList_LockClicked" Margin="0,0,5,0"/>
Loading a list from the xml file:
XmlReader reader = XmlReader.Create(s);
XElement elementRoot = XElement.Load(reader);
IEnumerable<DataItemXml> theBarItems = from element in elementRoot.Descendants("Survey")
select new DataItemXml
{
CustomerId = (int)element.Element("CustomerId"),
Device = (string)element.Element("Device"),
Month = (short)element.Element("Month"),
Year = (short)element.Element("Year"),
TimeUsed = (short)element.Element("TimeUsed"),
Activity = (string)element.Element("Activity")
};
_barItems = theBarItems.ToList<DataItemXml>();
Use the list _barItems, to load our declared ListBox, ActivityList using this structure:
public class DataItem
{
public int Index { get; set; }
public string Description { get; set; }
public double Value { get; set; }
public double Percentage { get; set; }
public double ItemHeight { get; set; }
public SolidColorBrush ItemColor { get; set; }
}
.
private List<DataItem> getWeightedActivityList()
{
List<DataItemXml> activities = _barItems.GroupBy(b => b.Activity).Select(g => g.First()).ToList();
// compute the percentage size of each activity
List<DataItem> dataItems = new List<DataItem>();
foreach (DataItemXml activity in activities)
{
DataItem dataItem = new DataItem();
dataItem.Index = activities.IndexOf(activity);
dataItem.Description = activity.Activity;
double total = _barItems.Sum(b => b.TimeUsed);
double thisTotal = _barItems.Where(b => b.Activity == activity.Activity).Sum(b => b.TimeUsed);
dataItem.Percentage = thisTotal / total;
dataItem.Value = thisTotal;
double itemheight = 15 + (dataItem.Percentage * 100);
dataItem.ItemHeight = itemheight;
dataItem.ItemColor = getColorFromPercentage(dataItem.Percentage);
dataItems.Add(dataItem);
}
dataItems.Sort(delegate(DataItem d1, DataItem d2) { return d2.Percentage.CompareTo(d1.Percentage); });
return dataItems;
}
In the ListBox control, here is how we bind our ListItems so that they will use the items we initialized for Sizing and Coloring:
<ListBox x:Name="ItemsList" Margin="0,5,0,0"
Style="{StaticResource BlueListBoxStyle}"
SelectionChanged="ItemsList_SelectionChanged" Width="190" Height="270" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,0" Background="{Binding ItemColor}" Orientation="Horizontal" Height="{Binding ItemHeight}">
<TextBlock Text="{Binding Description}" x:Name="Body" Style="{StaticResource listcolumn}" Width="100" />
<TextBlock Text="{Binding Value}" x:Name="Weight" Style="{StaticResource listcolumn}" Width="50" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Subscribe