为啥我的 ListView 数据绑定到可观察集合不能正确显示

Posted 2023-02-22

【中文标题】为啥我的 ListView 数据绑定到可观察集合不能正确显示

【英文标题】：Why my ListView databinding to observable collection don't show correctly为什么我的 ListView 数据绑定到可观察集合不能正确显示

【发布时间】：2022-01-20 10:01:30

【问题描述】：

这是我的类TaskTodo和方法GetTask，这个方法与sqlite连接并返回一个可观察的集合

using Microsoft.Data.Sqlite;
using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.IO;
using Windows.Storage;

namespace uwp_to_do_list

public class TaskTodo : INotifyPropertyChanged

    public string NameTask  get; set; 
    public DateTime Reminder  get; set; 
    public string NameList  get; set; 
    public DateTime Date  get; set; 
    public string SubTask  get; set; 
    public string Priority  get; set; 

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string propertyName)
    
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    

    public ObservableCollection<TaskTodo> GetTasks()
    
        var Tasks = new ObservableCollection<TaskTodo>();
        //get data from sqlite3

        string dbpath = Path.Combine(ApplicationData.Current.LocalFolder.Path, "TasksSqlite.db");
        using (SqliteConnection db =
           new SqliteConnection($"Filename=dbpath"))
        
            db.Open();

            SqliteCommand selectCommand = new SqliteCommand
                ("SELECT Name_task from Task", db);

            SqliteDataReader query = selectCommand.ExecuteReader();

            while (query.Read())
            
               TaskTodo taskTodo = new TaskTodo();
                taskTodo.NameTask = query.GetString(0);
                Tasks.Add(taskTodo);
            

            db.Close();
        


        return Tasks;
    

所以我把这个可观察的集合作为listview的itemsource，但这只是显示对象的类型而不是字段NameTask。

public MainView()
    
        this.InitializeComponent();
        TaskTodo taskTodo = new TaskTodo();
        task_list.ItemsSource = taskTodo.GetTasks()
        Debug.WriteLine(taskTodo.GetTasks()[4].NameTask);


    

我认为问题出在 xaml 代码中，因为我测试了 observable 集合是否为空

Debug.WriteLine(taskTodo.GetTasks()[4].NameTask);

输出是 tasxk3

我的 xaml 代码

   <Page
    x:Class="uwp_to_do_list.MainView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:uwp_to_do_list"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup- 
    compatibility/2006" xmlns:fa="using:FontAwesome.UWP"
    mc:Ignorable="d"
    Background="#08090A"       
    >

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
        </Grid.RowDefinitions>
           <StackPanel Background="#04000E" Width="240"  
            Grid.Column="0" 
            Grid.Row="0" HorizontalAlignment="Left" >

            <TextBlock Text="today" Foreground="White" FontSize="24" 
            HorizontalAlignment="Center" Margin="0,50,0,0"> 
             </TextBlock>
            <fa:FontAwesome Icon="CalendarCheckOutline" Height="40" 
             Width="40" FontSize="40" Foreground="Fuchsia" 
             HorizontalAlignment="Left" Margin="20,-35,0,0"> 
            </fa:FontAwesome>
            <TextBlock Text="Tomorrow" Foreground="White" 
             FontSize="24" HorizontalAlignment="Center" 
              Margin="0,20,0,0"></TextBlock>
            <fa:FontAwesome Icon="CalendarOutline" Height="40" 
             Width="40" FontSize="40" Foreground="Fuchsia" 
             HorizontalAlignment="Left" Margin="20,-35,0,0"> 
            </fa:FontAwesome>
            <TextBlock Text="planning" Foreground="White" 
              FontSize="24" HorizontalAlignment="Center" 
             Margin="0,20,0,0"></TextBlock>
            <fa:FontAwesome Icon="Calendar" Height="40" Width="40" 
             FontSize="40" Foreground="Fuchsia" 
             HorizontalAlignment="Left" Margin="20,-35,0,0"> 
             </fa:FontAwesome>
            <TextBlock Text="tasks" Foreground="White" FontSize="24" 
            HorizontalAlignment="Center" Margin="0,20,0,0"> 
            </TextBlock>
            <fa:FontAwesome Icon="Home" Height="40" Width="40" 
            FontSize="40" Foreground="Fuchsia" 
            HorizontalAlignment="Left" Margin="20,-35,0,0"> 
            </fa:FontAwesome>

        </StackPanel>

        <TextBox  Grid.Row="1" HorizontalAlignment="Left" 
        Grid.Column="0" Text="+ add a list " Background="#04000E" 
        Foreground="White" Height="50" Width="240" ></TextBox>
        <TextBox x:Name="add_Task_textbox" Grid.Row="1" 
        Grid.Column="1" KeyDown="add_Task_textbox_KeyDown"  
        HorizontalAlignment="Center"    VerticalAlignment="Center" 
        Text="+ add a task"  Background="#04000E" Foreground="White" 
        Height="40" Width="1000" Margin="20,0,-20,0" />
        <ListView x:Name="task_list" Grid.Row="0" Grid.Column="1" 
        Background="Transparent">

        <ListViewItem>

          <DataTemplate x:DataType="local:TaskTodo">
           
           <TextBlock Width="100" Foreground="White" Text="x:Bind 
            NameTask"></TextBlock>
           
           </DataTemplate>
     
            </ListViewItem>
   
       
             </ListView>
       
        
          </Grid>
        </Page> 

更多上下文my github repository

【问题讨论】：

您将 TaskTodo 列表设置为 ItemSource。您需要一些方法来转换代表它们的字符串中的此类实例。一种方法是覆盖 TaskToDoc 类中的 ToString() 方法，并返回您希望在 ListView 项目中看到的字符串

【参考方案1】：

您应该将ItemTemplate 属性设置为您的DataTemplate，而不是添加ListViewItem：

<ListView x:Name="task_list" Grid.Row="0" Grid.Column="1" 
          Background="Transparent">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:TaskTodo">
            <TextBlock Width="100" Foreground="White"
                       Text="x:Bind NameTask" />
        </DataTemplate>
    <ListView.ItemTemplate>
</ListView>