Dictionary (ObservableCollection) binding to ListView in Windows Phone 8.1

Question

I am trying to bind a dictionary to two textblocks in a listview. The listview ItemsSource binding is defined in the code behind and the text blocks content is in the XAML.

I am able to display the items but they are displayed with square brackets around each row like [stringA, stringB]. However, this format will not work. The latest code that I tried was by setting the Key and Value which did not work was:

XAML:

           <ListView Name="lvListLogs" 
                      Margin="0,10,0,0">
                <ListView.ItemTemplate>

                    <DataTemplate x:Name="ListItemTemplate">
                        <Grid Margin="5,0,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="122"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition MaxHeight="104"></RowDefinition>
                            </Grid.RowDefinitions>
                            <TextBlock x:Name="tb_PointName" Grid.Column="1"
                                                   Text="{Binding Key}"
                                                   Margin="10,0,0,0" FontSize="40" 
                                                   TextWrapping="Wrap"
                                                   MaxHeight="72" 
                                                   Foreground="#FFFE5815" />

                            <TextBlock x:Name="tb_PointValue" Grid.Column="1"
                                                   Text="{Binding Value}"
                                                   Margin="10,0,0,0" FontSize="40" 
                                                   TextWrapping="Wrap"
                                                   MaxHeight="72" 
                                                   Foreground="#FFFE5815" />

                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

C# (abridged for clarity):

public Dictionary<string, string> mydict2 { get; set; }

mydict2 = new Dictionary<string, string>();


        if (item != null)
            {
                var props = item.GetType().GetRuntimeProperties();

                foreach (var prop in props)
                {
                    foreach (var itm in group1.Items.Where(x => x.UniqueId == prop.Name))
                    {
                        var _Title = prop.Name;
                        var _Value = prop.GetValue(item, null);

                        string propertyValue;
                        string propertyName;

                        propertyValue = Convert.ToString(_Value);
                        propertyName = _Title;

                        mydict2.Add(_Title, propertyValue);
                    }
                }
                //binding here
                lvListLogs.ItemsSource = mydict2;

            }

Any assistance would be appreciated.

Answer 1

Your code works fine, the problem is you set the same Grid.Column for both TextBlocks . The first column index should be zero:

<TextBlock x:Name="tb_PointName" Grid.Column="0" ...

Answer 2

To achieve the required binding, instead of the Dictionary I used an ObservableCollection with the class and constructor.

To databind the listview (xaml) to ObservableCollection:

Create the Class with Constructor

    public class PointInfoClass
    {
        public string PointName { get; set; }
        public string PointValue { get; set; }

        public PointInfoClass(string pointname, string pointvalue)
        {
            PointName = pointname;
            PointValue = pointvalue;

        }
    }

Create collection of the PointInfoClass

    public ObservableCollection<PointInfoClass> PointInfo
    {
        get
        {
            return returnPointInfo;
        }
    }

Instantiate the collection

    ObservableCollection<PointInfoClass> returnPointInfo = new ObservableCollection<PointInfoClass>();

Add item to collection

returnPointInfo.Add(new PointInfoClass(string1, string2));

Databind to the ObservableCollection name. The xaml code:

    <ListView
        Grid.Row="1"
        ItemsSource="{Binding PointInfo}" 
        IsItemClickEnabled="True"
        ItemClick="ItemView_ItemClick"
        Margin="19,0.5,22,-0.333"
        x:Name="lvPointInfo" 
    Background="White">
        <ListView.ItemTemplate>
            <DataTemplate >
                <Grid Margin="0,0,0,20">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="270"/>
                        <ColumnDefinition Width="60"/>
                    </Grid.ColumnDefinitions>

                    <StackPanel Orientation="Vertical"  Grid.Column="1" VerticalAlignment="Top">                           
                        <TextBlock x:Name="tb_PointSubTitle" Grid.Column="1"
                                    Text="{Binding PointName}"
                                    Margin="10,0,0,0" FontSize="20" 
                                    TextWrapping="Wrap"
                                    MaxHeight="72" 
                                   Foreground="#FF5B5B5B"
                                                    />
                    </StackPanel>
                    <StackPanel Orientation="Vertical"  Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Right">
                        <TextBlock x:Name="tb_PointValue" 
                                    Grid.Column="1"
                                    Text="{Binding PointValue}"
                                    Margin="0,5,0,0" FontSize="20" 
                                    HorizontalAlignment="Right"
                                    TextWrapping="Wrap"
                                   FontWeight="Normal"
                                   Foreground="Black" />

                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Set the DataContext of the ListView

lvPointInfo.DataContext = this;

This code is edited for clarity.