UWP - ListView binding does not show on XAML in C++/CX

Question

I've already asked about this topic, but this simple binding just don't want to work. My code first of all:

CItem.h

#pragma once

#include "pch.h"



namespace XamlApp
{

    public ref class CItem sealed
    {

    public:

       CItem(Platform::String^ Ho, Platform::String^ Ip, Platform::String^ Im);
        Platform::String^ getHo();
        Platform::String^ getIP();

        property Platform::String^ Ho {
            Platform::String^ get() { return this->ho; }
        }
        property Platform::String^ Ip {
            Platform::String^ get() { return this->ip; }
        }
        property Platform::String^ Im {
            Platform::String^ get() { return this->im; }
        }

    public:

    private:

        Platform::String^ ho;
        Platform::String^ ip;
        Platform::String^ im;

    private:

    };
}

CItem.cpp:

#include "pch.h"
#include "CItem.h"

CItem::CItem(Platform::String^ Ho, Platform::String^ Ip, Platform::String^ Im) : 
    ho{ Ho }, ip{ Ip }, im{ Im }
{

}

Platform::String^ CItem::getHo() {

    return this->ho;
}

Platform::String^ CItem::getIP() {

    return this->ip;
}

Main page:

 Windows::UI::Xaml::Interop::IBindableVector^ test;
    test = ref new Platform::Collections::Vector<CItem^>();
    CItem^ dummy1 = ref new CItem(L"ho1",L"23323",L"Assets/ic_info.png");
    CItem^ dummy2 = ref new CItem("ho2", "23323", "Assets/ic_info.png");

    test->Append(dummy1);
    test->Append(dummy2);
    mainListView->ItemsSource = test;

MainPage.xaml:

 <ListView x:Name="mainListView"  HorizontalAlignment="Stretch" MaxWidth="500" VerticalAlignment="Center"  Margin="20,0,20,-38" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Im}"/>
                        <TextBlock Text="{Binding Ho}"
                           Margin="20,0,20,8"
                           FontSize="24" 
                           FontStyle="Italic" 
                           FontWeight="SemiBold"
                           Foreground="DarkBlue"
                                   />
                        <TextBlock Text="{Binding Ip}"
                           Margin="20,0,20,8"
                           FontSize="24" 
                           FontStyle="Italic" 
                           FontWeight="SemiBold"
                           Foreground="DarkBlue"
                                   />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

My Question is: What is wrong with this code? I actually get 2 listview-entries but not the data, they are just empty. I've already tried to change ho to Ho in xaml, I've already copied it step by step from the microsoft-sample.

Answer 1

In your initial implementation you need to add the BindableAttribute to your CItem class:

[Windows::UI::Xaml::Data::Bindable]
public ref class CItem sealed

Source: https://msdn.microsoft.com/en-us/magazine/dn166929.aspx

If you do this, the type of your vector does also not have to be

Windows::UI::Xaml::Interop::IBindableVector^ test;

You could simply use a

Platform::Collections::Vector<CItem^>^ test;

At least this worked for me!

Answer 2

After a while I figured out that it will work with this pattern alternatively, so I want to share my solution on this problem:

MainPage.xaml.c:

this->viewModel = ref new CItemViewModel();

MainPage.xaml.h:

public:

    property CItemViewModel^ ViewModel
        {
            CItemViewModel^ get() { return this->viewModel; };
        }

private:

     CItemViewModel^ viewModel;

MainPage.xaml:

<ListView x:Name="mainListView"    ItemsSource="{x:Bind ViewModel.CItems}" MaxHeight="230" Margin="20,0,20,-37" >
<ListView.ItemTemplate >
                <DataTemplate x:DataType="local:CItem" >
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{x:Bind Im}" Margin="10,0,0,5" Height="30" Width="30"/>
                        <TextBlock Margin="20,0,0,5" FontSize="12"  >
                            <Run Text="{x:Bind Ho}" /><Run Text="{x:Bind Ip}"/>
                        </TextBlock>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
</ListView>

CItem stayed the same!

CItemViewModel.h:

public ref class CItemViewModel sealed {

    public:

        CItemViewModel();

        property Windows::Foundation::Collections::IObservableVector<CItem^>^ CItems
        {
            Windows::Foundation::Collections::IObservableVector<CItem^>^ get()
            {
                if (this->cItems == nullptr)
                {
                    this->cItems = ref new Platform::Collections::Vector<CItem^>();

                }
                return this->cItems;
            };
        }

    private:

        Windows::Foundation::Collections::IObservableVector<CItem^>^ cItems;

    };

Hope it helps!