Multi-column lists in WPF with rich cell contents - wpf

Question

I'm trying to write an automated test harness using WPF and F#. I'd like to display aggregate test results as rows in a multi-column list. Ideally, I would like to present rich content in each cell, e.g. highlighting issues with specific tests using color or making details available via tooltips. However, I cannot figure out how to put anything richer than a plain string into a multi-column ListView.
Furthermore, I'm not a fan of XAML or data binding and prefer to write vanilla F# code. The simplest program I have been able to write that displays a multi-column WPF ListView is:
open System.Windows
let gridView = Controls.GridView()
let listView = Controls.ListView(View=gridView)
type SystemParams = { Name: string; Value: obj }
[<System.STAThread>]
do
let column header binding =
let binding = Data.Binding binding
Controls.GridViewColumn(Header=header, DisplayMemberBinding=binding)
for header, binding in ["Name", "Name"; "Value", "Value"] do
column header binding
|> gridView.Columns.Add
for prop in typeof<SystemParameters>.GetProperties() do
if prop.PropertyType <> typeof<ResourceKey> then
{ Name = prop.Name; Value = prop.GetValue(null, null) }
|> listView.Items.Add
|> ignore
Application().Run(Window(Content=listView)) |> ignore
Although this works, I don't like the way it requires the field names to be duplicated both in the type definition and as strings that are fed to WPF which presumably then uses reflection to resolve them at run-time (yuk!). Ideally, I would like to Add an obj array giving the WPF controls for each cell.
Is ListView capable of this? If so, how do you write a function that accepts a 2D array of controls and returns a ListView that visualizes them?
If not, I will probably use a Grid instead. I have tried DataGrid before and it is just a world of pain in comparison...
EDIT:
Thanks to the answers below, I have been able to come up with a solution. The multiColumnList function in the program below creates list of controls with the given headers and content with selectable rows:
open System.Windows
let multiColumnList columns contents onSelection =
let gridView = Controls.GridView()
let list = Controls.ListView(View=gridView)
let column index header =
let binding = Data.Binding(sprintf "[%d]" index)
Controls.GridViewColumn(Header=header, DisplayMemberBinding=binding)
|> gridView.Columns.Add
Seq.iteri column columns
list.ItemsSource <-
[|for row in contents ->
[|for elt in row ->
box elt|]|]
list.SelectionChanged.Add onSelection
list
[<System.STAThread>]
do
let columns = ["Name"; "Value"]
let contents =
[ for prop in typeof<SystemParameters>.GetProperties() do
if prop.PropertyType <> typeof<ResourceKey> then
yield [box prop.Name; prop.GetValue(null, null)] ]
Application().Run(Window(Content=multiColumnList columns contents ignore))
|> ignore

Answer 1

Yes, it possible but it's a little tricky, but once you've mastered the approach it's quite flexible. WFP has a flexible templating system that this available both though code and XAML, except there are far less examples of how to do this in code.
It basically involves working how to to use the FrameworkElementFactory to override the list box default template and show the UI elements you want. Then using the Binding class to specify how the controls should be bound to the data.
I wrote a twitter client in WPF and F# and I use this approach to display the columns of tweets in list boxes. Take a look at how the createTweetContainerTemplate function works.
https://github.com/robertpi/TwitMemento/blob/master/Strangelights.TwitMemento.WPF/View.fs
Then again unless you really need a high level of control over how each row in the list box should be laid out, it maybe simpler to use a datagrid.

Answer 2

Your specific problem of duplicating the field names could be avoided by using an index based binding, instead of member name. See the changes to your example here:
open System
open System.Windows
let gridView = Controls.GridView()
let listView = Controls.ListView(View=gridView)
[<System.STAThread>]
do
let column index header =
let binding = Data.Binding(sprintf "[%d]" index)
Controls.GridViewColumn(Header=header, DisplayMemberBinding=binding)
["Name"; "Value"]
|> List.mapi column
|> List.iter gridView.Columns.Add
for prop in typeof<SystemParameters>.GetProperties() do
if prop.PropertyType <> typeof<ResourceKey> then
([| prop.Name; prop.GetValue(null, null) |] : Object array)
|> listView.Items.Add
|> ignore
Application().Run(Window(Content=listView)) |> ignore
Regarding giving the ListView a sequence of sequences of controls, that is somewhat lower level than ListView is intended to be used. ListView and DataGrid both assume that you have some roughly homogeneous collection of objects that you want show (generally as rows) and some idea of what information you want to show about those objects (the column definitions). Both controls will help in that situation, although I do agree that their general assumption that you want to use reflection over the members of a type can be annoying.
If you want to be able to specify a grid of any controls, then as you mention the Grid panel layout is probably more suitable.

Answer 3

I made a simple combinator library to build WPF UI thru code, I use this pattern in my pit project for creating HTML elements.
namespace FSharp.WPF
open System
open System.Windows
open System.Windows.Controls
[<AutoOpen>]
module Combinator =
type XDef =
| Attr of string * obj
| Tag of Type * XDef list
//| Element of FrameworkElement
[<AutoOpen>]
module Operators =
let (#=) (p:string) (v:obj) : XDef = Attr(p,v)
module internal Helpers =
let createEl (ty:Type) = new FrameworkElementFactory(ty)
let tag name attr = Tag(name,attr)
//let el dom = Element(dom)
let rec build (tag:XDef) =
match tag with
| Tag(ty,defs) ->
let attrs = defs |> List.choose(fun t -> match t with | Attr(k,v) -> Some(k,v) | _ -> None)
let tags = defs |> List.choose(fun t -> match t with | Tag(k,v) -> Some(t) | _ -> None)
/// create the element and set attributes
let el = Helpers.createEl(ty)
let rec setProps (d:(string*obj) list) =
match d with
| [] -> ()
| (p,v) :: t ->
let dp = System.ComponentModel.DependencyPropertyDescriptor.FromName(p, el.Type,el.Type)
el.SetValue(dp.DependencyProperty,v)
setProps attrs
let rec gen (d:XDef list) =
match d with
| [] -> ()
| h::t ->
let childEl = build(h)
el.AppendChild(childEl)
gen(t)
gen tags
el
//| Element(el) -> el
| Attr(key,value) -> failwith "Unrecognized sequence"
let make xdef =
let fEl = build xdef
let contentEl = new ContentControl()
contentEl.ContentTemplate <- new DataTemplate(VisualTree=fEl)
contentEl :> FrameworkElement
Its very low profile now, just create objects, but it could be extended to do much more with databinding and other things etc., and a bit of type checking should find errors in object creation.
Usage:
module Test =
open System.Windows.Controls
let create() =
tag typeof<System.Windows.Controls.Button> ["Content"#="Hello World"]
|> Combinator.make
let create2() =
tag typeof<StackPanel> [
tag typeof<Button> ["Content"#="Button 1"]
tag typeof<Button> ["Content"#="Button 2"]
]
|> Combinator.make
[<STAThread>]
[<EntryPoint>]
let main(_) =
let el = Test.create2() // Test.create1()
let window = new Window(Content = el, Height = 600.0, Width = 800.0, Title = "WpfApplication1")
let app = new Application()
app.Run(window)
As you see, nesting elements means Panel elements, but there could some extra leverage that allows the type to identify panel elements or content elements. But you get the idea, this could be useful. What do you think?
-Fahad