Привязка данных к ListView через x:bind в UWP

Я использую хаб в своей программе, а в <HubSection> есть ListView. но я не могу привязать данные к ListView. Я пытался использовать {binding}, но я получаю пустой вывод, а при использовании x:bind я получаю сообщение об ошибке, которое

Для DataTemplate не определен тип данных. Для шаблонов, содержащих x:Bind, необходимо, чтобы DataType был указан с помощью «x:DataType».

Помогите мне в этой проблеме. Вот мой код:

.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 = "" });

    }
}
}

person Ravi    schedule 22.07.2016    source источник


Ответы (1)


В основном ошибка, которую вы получаете, говорит вам, что вы не определили, какой тип данных вы хотите связать с ним.

Итак, чтобы решить эту проблему в DataTemplate, добавьте это свойство в свой: ListView.ItemTemplate -> DataTemplate

x:DataType="пространство имен:DATA_TYPE"

В этом примере ваш класс info находится в том же пространстве имен, что и MainPage, поэтому для пространства имен в XAML я установлю local для пространства имен, например:

<DataTemplate x:DataType="local:info"

А еще вы допустили ошибку в этой части:

ItemsSource="{x:Информация о привязке}"

Здесь вам нужно установить список или объект, который вы хотите связать, а не тип данных, а информация о классе, очевидно, является вашим типом данных.

Другое дело, что вы не можете просто указать ItemsSource в HubControl, что вам нужно установить его программно с каким-то событием загрузки, а в событии загрузки вы можете установить свой ItemSource.

Итак, в вашем случае со всеми исправлениями ваш XAML должен выглядеть так, это проверенный и рабочий код как для XAML, так и для .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>

Ваш частичный класс .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 = "" });

     }

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

  }
}

Внесите эти изменения и запустите его, после изменений он должен работать.

Примечание. В свойстве x:DataType будьте внимательны и задайте пространство имен, в котором находится ваш класс info, чтобы он работал правильно.

После изменений, если вы получаете синие строки в XAML, очистите и перестройте свой проект, а также я настоятельно рекомендую вам выполнить разделение кода.

А также мой совет для вас - используйте элемент управления Pivot для такого рода «показа данных», его проще реализовать, и вы получите аналогичный результат. Вы можете проверить это здесь.

person Almir Vuk    schedule 22.07.2016
comment
спасибо Я сделаю так, чтобы все выглядело правильно после того, как все будет работать должным образом - person Ravi; 22.07.2016
comment
В моем ответе с окончательным редактированием есть полностью рабочий код, как я уже упоминал в ответе, если вам не нужно использовать Hub в своем приложении, вы можете использовать Pivot для отображения данных и Hub для какой-либо навигации по вашему приложению. Я рекомендую вам ознакомиться с официальной документацией о Hub и Pivot на MSDN. - person Almir Vuk; 22.07.2016
comment
Но разве не будет работать ItemsSource="{x:Bind obsinfo}" вместо использования события Data_Loaded? - person JP Hellemons; 02.03.2018