Question

Here is what I want to do: I have a List<myCustomType>. Now I want to display that list on a canvas (or any other container for that matter). Every property from myCustomType (a few strings, an image, a list of strings) has a designed control one the canvas. Basically I want to bind each control on my canvas to one property on myCustomType. Then I want to have buttons on the canvas that allow me to cycle through the List<myCustomType> and updates all controls at the same time so that all controls always show the contents of a single list item.

I have been looking around, but couldn’t find anything that I could use as a starting point.

Is that easily achievable? Or do I have to code that from scratch?

Answer 1

Here is an example using MVVM.

My Customer model is very simple and looks like this:

public class Customer
{
    public string Name { get; set; }
    public int Age { get; set; }
}

Next we need a ViewModel which the MainWindow of the application will be bound to. It holds the Customers and has the methods for moving between the Customers with buttons. The CollectionView type supports current item tracking and is I suppose something like WinForms’s BindingSource:

public class MyViewModel
{
    public ICollectionView Customers { get; set; }

    public void MoveSelectionLeft()
    {
        Customers.MoveCurrentToPrevious();
    }

    public void MoveSelectionRight()
    {
        Customers.MoveCurrentToNext();
    }

    public MyViewModel()
    {
        Customers = new CollectionViewSource
            {
                Source = new[]
                    {
                        new Customer {Name = "John", Age = 25},
                        new Customer {Name = "Jane", Age = 27},
                        new Customer {Name = "Dawn", Age = 31}
                    }
            }.View;
    }
}

Next we have the View. I am using Caliburn Micro to simplify hooking up actions to the buttons. Simply download it and add a reference to Caliburn.Micro.dll to your project:

<Window x:Class="WpfApplication.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:cal="http://www.caliburnproject.org" Title="MainWindow" Height="400" Width="400">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <ListBox Grid.RowSpan="2" ItemsSource="{Binding Customers}" DisplayMemberPath="Name"/>

    <DockPanel Grid.Column="1" LastChildFill="False">
        <Button DockPanel.Dock="Left" Content="&lt;"
                    cal:Message.Attach="[Event Click] = [MoveSelectionLeft]"/>
        <Button DockPanel.Dock="Right" Content="&gt;"
                    cal:Message.Attach="[Event Click] = [MoveSelectionRight]"/>
    </DockPanel>

    <StackPanel Grid.Row="1" Grid.Column="1">
        <DockPanel>
            <TextBlock MinWidth="50" Text="Name" Margin="0,0,5,0"/>
            <TextBox Text="{Binding Customers/Name}"/>
        </DockPanel>
        <DockPanel>
            <TextBlock MinWidth="50" Text="Age" Margin="0,0,5,0"/>
            <TextBox Text="{Binding Customers/Age}"/>
        </DockPanel>
    </StackPanel>
</Grid>

We have a ListBox bound to the Customers property of MyViewModel, buttons where their Click event has been attached to the MoveSelection methods, and the Customer fields are bound to the Customers/ property, which is short for Customers.CurrentItem.

Assuming this is the MainWindow of the WPF app all we need to do next is set its DataContext to MyViewModel. This can be done by adding the following to its constructor in the code-behind:

public MainWindow()
{
    this.DataContext = new MyViewModel();

    InitializeComponent();
}

Everything should be setup now so you can build and run the application. It will look something like this: