为什么我的 ListView 数据绑定到可观察集合不能正确显示
Why my ListView databinding to observable collection don't show correctly
这是我的 class TaskTodo 和方法 GetTask 此方法连接 sqlite 和 return 一个可观察的集合
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;
}
所以我把这个可观察的集合作为列表视图的项目源,但这只显示对象的类型而不是字段 NameTask。
public MainView()
{
this.InitializeComponent();
TaskTodo taskTodo = new TaskTodo();
task_list.ItemsSource = taskTodo.GetTasks()
Debug.WriteLine(taskTodo.GetTasks()[4].NameTask);
}
我认为问题出在 xaml 代码中,因为我测试了可观察集合是否为空
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
您应该将 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>
这是我的 class TaskTodo 和方法 GetTask 此方法连接 sqlite 和 return 一个可观察的集合
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;
}
所以我把这个可观察的集合作为列表视图的项目源,但这只显示对象的类型而不是字段 NameTask。
public MainView()
{
this.InitializeComponent();
TaskTodo taskTodo = new TaskTodo();
task_list.ItemsSource = taskTodo.GetTasks()
Debug.WriteLine(taskTodo.GetTasks()[4].NameTask);
}
我认为问题出在 xaml 代码中,因为我测试了可观察集合是否为空
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
您应该将 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>