Binding data into ListView through x:bind in UWP

Question

I am using the hubsection in my program and in <HubSection> there is a ListView. but I am not able to bind the data to ListView. I had tried using {binding} but I am getting blank in output and when using the x:bind I am getting error that is

No DataType defined for DataTemplate. Templates containing x:Bind need a DataType to be specified using 'x:DataType'

Help me in this problem. Here is my code:

.xaml

    <Hub Header="abc" FontWeight="Bold">
        <HubSection Header="header1" x:Name="hub1">
            <DataTemplate >
                <ListView x:Name="list1" ItemsSource="{x:Bind info}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <StackPanel Orientation="Vertical">
                                    <StackPanel Orientation="Horizontal">
                                        <Image Source="{X:Bind image}"></Image>
                                        <TextBlock Text="{x:Bind name}"/>
                                    </StackPanel>
                                    <TextBlock Text="{x:Bind bio}"/>
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </DataTemplate>
        </HubSection>
        <HubSection Header="header 2">
            <DataTemplate>          
            </DataTemplate>
        </HubSection>
    </Hub>
</Grid>

.cs

namespace app1
{
public class info
{
    public String name { get; set; }
    public String bio { get; set; }
    public String image { get; set; }
}

public sealed partial class abcde : Page
{

    ObservableCollection<info> obsinfo = new ObservableCollection<info>();
    public abcde()
    {
        this.InitializeComponent();
        filldata();
    }
    void filldata()
    {
        obsinfo.Add(new info { name = "data1", image = "images/data1.png", bio = "" });
        obsinfo.Add(new info { name = "data2", image = "images/data2.png", bio = "" });

    }
}
}

Answer 1

Basically error that you get is telling you that you are not defined which datatype you want to bind to it.

So in order to solve this at DataTemplate add this property in your: ListView.ItemTemplate -> DataTemplate

x:DataType="namespace:DATA_TYPE"

For this example your class info is in same namespace as MainPage so for namespace in XAML I will set local for a namespace, like this:

<DataTemplate x:DataType="local:info"

And also you have made mistake in this part:

ItemsSource="{x:Bind info}"

Here you need to set list or object that you want to bind form it not the datatype, and class info is your datatype obviously.

Other thing is that you can not just tell ItemsSource in HubControl you need to set it programmatically with some kind of load event, and in load event you can set your ItemSource.

So in your case with all repairs your XAML should look like this, this is tested and working code both for XAML and .CS:

<Hub Header="abc" FontWeight="Bold">
        <HubSection Header="header1" x:Name="hub1">
            <DataTemplate>
                <!-- Instead of ItemSource in XAML we make event in which we will set ItemSource -->
                <ListView x:Name="list1" 
                          Loaded="Data_Loaded">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="local:info">
                            <StackPanel Orientation="Vertical">
                                <StackPanel Orientation="Vertical">
                                    <StackPanel Orientation="Horizontal">
                                        <Image Source="{X:Bind image}"></Image>
                                        <TextBlock Text="{x:Bind name}"/>
                                    </StackPanel>
                                    <TextBlock Text="{x:Bind bio}"/>
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </DataTemplate>
        </HubSection>
        <HubSection Header="header 2">
            <DataTemplate>          
            </DataTemplate>
        </HubSection>
    </Hub>
</Grid>

Your .cs partial class:

namespace app1
{
public class info
{
    public String name { get; set; }
    public String bio { get; set; }
    public String image { get; set; }
}

public sealed partial class abcde : Page
{

    ObservableCollection<info> obsinfo = new ObservableCollection<info>();
    public abcde()
    {
        this.InitializeComponent();
        filldata();
    }
    void filldata()
    {
        obsinfo.Add(new info { name = "data1", image = "images/data1.png", bio = "" });
        obsinfo.Add(new info { name = "data2", image = "images/data2.png", bio = "" });

     }

     // Here we can set ItemsSource for our ListView
     private void Data_Loaded(object sender, RoutedEventArgs e) {
                var listView = (ListView)sender;
                listView.ItemsSource = obsinfo;
     }

  }
}

Make these changes and run it, after changes it should work.

Note: In x:DataType property be careful to set your namespace in which your class info is in order to work properly.

After changes if you get blue lines in XAML, clean and rebuild your project and also my strong recommendation for you is to do code separation.

And also my tip for you is to use Pivot control for this kind of "showing data", it is easier for implement it and you get similar result. You can check it out here.