Question

I have a list of data where each row is string string int. All of my data comes from plists as I am porting an iOS app. I also have another list which is string int double.

I’m using this tutorial to create my own rows for the list box.

I do not want to create a class for the row data so I don’t have the Transaction class and am unsure how to do the binding using a list of List. I’ll know of course if I am string string int or string int double.

Answer 1

Any reason you don’t want to create a class type for your row? This will make your life a million times easier when working with XAML.

Create a class type for your row and make it implement INotifyPropertyChanged. Once your class implements INotifyPropertyChanged, it is easy to bind to it in your view.

Let’s assume you are following the MVVM pattern. This means you will have a View (which you are coding in XAML) and a ViewModel. This view model is going to be a class that implements INotifyPropertyChanged as well. In the constructor of the view, you will set the DataContext property to a new instance of your ViewModel class.

Now for the list part. In the ViewModel, create an ObservableCollection<MyRow>. An ObservableCollection<T> is a collection type that too implements INotifyPropertyChanged. Or in your case, it sounds like you have a list of these items. If this is true, I recommend encapsulating the list with another custom class. It makes the binding more natural with the MVVM pattern. You can double-nest an ObservableCollection but you’ll have to make the decision whether or not that is easy to read and understand. For instance, ObservableCollection<ObservableCollection<MyRow>>. In the following example, I assume you create a class (MySet) to hold the rows as opposed to double-nested lists.

Custom Row Class

public class MyRow : INotifyPropertyChanged
{
    public event PropertyChanged;

    private string _stringValue = string.Empty;
    public string StringValue
    {
        get { return _stringValue; }
        set
        {
            if( _stringValue != value )
            {
                _stringValue = value;
                if( PropertyChanged != null )
                {
                    PropertyChanged( this, new PropertyChangedEventArgs( "StringValue" ) );
                }
             }
        }
    }

    // continue with the rest of your properties
}

Row Set Class

public class MySet : INotifyPropertyChanged
{
    public event PropertyChanged;

    private ObservableCollection<MyRow> _rows = null;
    public ObservableCollection<MyRow> Rows
    {
        get { return _rows; }
        set
        {
            if( _rows != value )
            {
                _rows = value;

                if( PropertyChanged != null )
                {
                    PropertyChanged( this, new PropertyChangedEventArgs( "Rows" ) );
                }
            }
        }
    }
}

View Model

public class MyViewModel : INotifyPropertyChanged
{
    public event PropertyChanged;

    private ObservableCollection<MySet> _rowSets = null;
    public ObservableCollection<MySet> RowSets
    {
        get { return _rowSets; }
        set
        {
            if( _rowSets != value )
            {
                _rowSets = value;
                if( this.PropertyChanged != null )
                {
                    this.PropertyChanged( this, new PropertyChangedEventArgs( "RowSets" ) );
                }
            }
        }
    }
}

Now in your XAML, you have some options on how you want to display the nested nature of the list. I recommend the ItemsControl container. All you have to do is set the ItemsSource to your ViewModel’s property name and then override the DataTemplate. If you do this, then each item will have the data context of the inner list. Repeat with another ItemsControl and then you’ll have the item context be equal to each of the inner items (MyRow).

View’s XAML

<ItemsControl
    ItemsSource="{Binding Path=RowSets}" >
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ItemsControl
                ItemsSource="{Binding Path=Rows}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock 
                            Text="{Binding Path=StringValue, Mode=OneWay}"
                            Margin="5,0,0,0"
                            />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

And don’t forget to set the DataContext of the view to the ViewModel.

View’s Code Behind

public class View : UserControl
{
    public View()
    {
        InitializeComponents();

        this.DataContext = new ViewModel();
    }
}

The code above is not tested and only gives you a general idea of where to go with this.

Update

If you aren’t wanting to create a class but merely bind to an array, you can do this too. The binding path allows for indexer syntax. You can enter in the XAML Text="{Binding Path=MyArray[0]}".

If you have an array of an array, the XAML could look as follows:

<ItemsControl ItemsSource="{Binding Path=MyOuterArray}">
    <ItemsControl.ItemTemplate>
        <!-- The data context here is the inner array so the indexer are applied to the inner array -->
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Path=[0]}" />
            <TextBlock Text="{Binding Path=[1]}" />
            <TextBlock Text="{Binding Path=[2]}" />
        </StackPanel>
    </ItemsControl.ItemTemplate>
</ItemsControl>

A couple other options are to use Converters to translate the values in the array into some string format or to provide a property on the row class that is responsible for formatting the members appropriately. Are you just printing the array elements as strings in a sequence? Then just create a custom property on the row class called ‘FormattedValue’ and have it return the ToString() concatenation of all the relevant properties.

public class MyRow : INotifyPropertyChanged
{
    // ...

    public string FormattedValue
    {
        get 
        {
           return string.Join( ", ", this.MyArray );
        }
     }
}