windows phone 8.1 带有项目模板的列表视图
windows phone 8.1 listview with item template
我想在 Windows Phone 8.1 应用程序中显示一个列表。我添加了列表视图并创建了项目模板。
<ListView x:Name="history" HorizontalAlignment="Left" Height="397" VerticalAlignment="Top" Width="381">
<ListView.Resources>
<DataTemplate x:Key="myCell">
<Grid x:Name="myGrid" Height="161" Width="389">
<TextBlock x:Name="title" HorizontalAlignment="Left" Margin="34,13,0,0" TextWrapping="Wrap" Text="Title" VerticalAlignment="Top" Height="52" Width="170" FontSize="48"/>
<TextBlock x:Name="content" HorizontalAlignment="Left" Margin="34,70,0,0" TextWrapping="Wrap" Text="content" VerticalAlignment="Top" Height="81" Width="345" FontSize="36"/>
</Grid>
</DataTemplate>
</ListView.Resources>
<ListView.ItemTemplate>
<StaticResource ResourceKey="myCell"/>
</ListView.ItemTemplate>
</ListView>
我想以编程方式添加项目。类似的东西
myCell mm = new myCell();
mm.title.Text = "title";
mm.content.Text = "content";
history.Items.Add(mm);
但是我无法访问 myCell。任何人都可以帮助我吗?
由于您使用的是 ItemTemplate,因此您需要使用模型创建项目并将其添加到 ListView。
public class MyModel
{
public string title {get; set;}
public string content {get; set;}
}
然后像这样添加项目:
var item = new MyModel();
item.title = "some title";
item.content = "some content";
history.Add(item);
编辑
实际上最好的方法是创建 ObservableCollection<T>
并在代码中的某处将其设置为 ListView 的 ItemsSource。例如,您可以使用 ListView 的 Loaded 事件:
history_Loaded(object sender, RoutedEventArgs e)
{
var historyCollection = new ObservableCollection<MyModel>();
history.ItemsSource = historyCollection;
}
然后只需将项目添加到此 ObservableCollection 中,它们就会显示出来,因为它会在更改时向 ListView 报告。
并且您的 TextBlock
必须通过绑定定义 Text
属性:
<TextBlock Text="{Binding title}"/>
要了解有关 ObservableCollection<T>
及其与 List<T>
的区别的更多信息,您可能需要阅读此 - http://www.codeproject.com/Articles/42536/List-vs-ObservableCollection-vs-INotifyPropertyCha.
数据绑定有两个目的:您需要在后面的代码中提供数据,并且需要从 Xaml 绑定到它。如果你只做一个那么就没有连接。
要从代码中提供数据,您需要创建 collection 数据 objects 并将其放置在 ListView 可以看到的上下文中。我们可以将其直接设置为 ListView 的 ItemsSource,也可以将 ItemsSource 绑定到 ListView 的 DataContext。您选择的位置取决于您希望共享此数据的距离。通常你会为页面设置一个整体的 DataContext 并让 ListView 绑定到它的一个子集,但为了简单起见,我们只将它设置为 ListView 的 DataContext:
class myCell
{
public string Title { get; set; }
public string Content { get; set; }
}
public sealed partial class MainPage : Page
{
// Create a collection of myCells. ObservableCollection will fire
// change notifications so we can add new cells later and the binding
// will update
ObservableCollection<myCell> myCells = new ObservableCollection<myCell>();
public MainPage()
{
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
// Generate some dummy data
for (int i=0;i<100;i++)
{
myCells.Add(new myCell() { Title = "Cell " + i, Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." });
}
// Set the cells to the Page's DataContext. All controls on
// the page will inherit this.
this.DataContext = myCells;
}
}
一旦我们有了数据,我们就需要从 Xaml 绑定到它。您现有的模板具有用于标题和内容的 TextBlocks,但它显式设置了文本属性,而不是绑定到列出的 objects。要解决这个问题,我们需要更改 TextBlocks 的 Text 属性以绑定到模板所表示的项目的标题和上下文。原来的模板太大放不下,所以我重新整理了一下。还要注意 ItemsTemplate={Binding} 添加到 ListView:
<ListView x:Name="history" ItemsSource="{Binding}">
<ListView.Resources>
<DataTemplate x:Key="myCell">
<StackPanel>
<TextBlock x:Name="title" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Title, Mode=OneTime}" VerticalAlignment="Top" Style="{StaticResource TitleTextBlockStyle}" />
<TextBlock x:Name="content" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Content, Mode=OneTime}" VerticalAlignment="Top" Style="{StaticResource BodyTextBlockStyle}" />
</StackPanel>
</DataTemplate>
</ListView.Resources>
<ListView.ItemTemplate>
<StaticResource ResourceKey="myCell"/>
</ListView.ItemTemplate>
</ListView>
有关详细信息,请参阅 Data binding overview (XAML) on MSDN, in particular the Binding to Collections 部分。
我想在 Windows Phone 8.1 应用程序中显示一个列表。我添加了列表视图并创建了项目模板。
<ListView x:Name="history" HorizontalAlignment="Left" Height="397" VerticalAlignment="Top" Width="381">
<ListView.Resources>
<DataTemplate x:Key="myCell">
<Grid x:Name="myGrid" Height="161" Width="389">
<TextBlock x:Name="title" HorizontalAlignment="Left" Margin="34,13,0,0" TextWrapping="Wrap" Text="Title" VerticalAlignment="Top" Height="52" Width="170" FontSize="48"/>
<TextBlock x:Name="content" HorizontalAlignment="Left" Margin="34,70,0,0" TextWrapping="Wrap" Text="content" VerticalAlignment="Top" Height="81" Width="345" FontSize="36"/>
</Grid>
</DataTemplate>
</ListView.Resources>
<ListView.ItemTemplate>
<StaticResource ResourceKey="myCell"/>
</ListView.ItemTemplate>
</ListView>
我想以编程方式添加项目。类似的东西
myCell mm = new myCell();
mm.title.Text = "title";
mm.content.Text = "content";
history.Items.Add(mm);
但是我无法访问 myCell。任何人都可以帮助我吗?
由于您使用的是 ItemTemplate,因此您需要使用模型创建项目并将其添加到 ListView。
public class MyModel
{
public string title {get; set;}
public string content {get; set;}
}
然后像这样添加项目:
var item = new MyModel();
item.title = "some title";
item.content = "some content";
history.Add(item);
编辑
实际上最好的方法是创建 ObservableCollection<T>
并在代码中的某处将其设置为 ListView 的 ItemsSource。例如,您可以使用 ListView 的 Loaded 事件:
history_Loaded(object sender, RoutedEventArgs e)
{
var historyCollection = new ObservableCollection<MyModel>();
history.ItemsSource = historyCollection;
}
然后只需将项目添加到此 ObservableCollection 中,它们就会显示出来,因为它会在更改时向 ListView 报告。
并且您的 TextBlock
必须通过绑定定义 Text
属性:
<TextBlock Text="{Binding title}"/>
要了解有关 ObservableCollection<T>
及其与 List<T>
的区别的更多信息,您可能需要阅读此 - http://www.codeproject.com/Articles/42536/List-vs-ObservableCollection-vs-INotifyPropertyCha.
数据绑定有两个目的:您需要在后面的代码中提供数据,并且需要从 Xaml 绑定到它。如果你只做一个那么就没有连接。
要从代码中提供数据,您需要创建 collection 数据 objects 并将其放置在 ListView 可以看到的上下文中。我们可以将其直接设置为 ListView 的 ItemsSource,也可以将 ItemsSource 绑定到 ListView 的 DataContext。您选择的位置取决于您希望共享此数据的距离。通常你会为页面设置一个整体的 DataContext 并让 ListView 绑定到它的一个子集,但为了简单起见,我们只将它设置为 ListView 的 DataContext:
class myCell
{
public string Title { get; set; }
public string Content { get; set; }
}
public sealed partial class MainPage : Page
{
// Create a collection of myCells. ObservableCollection will fire
// change notifications so we can add new cells later and the binding
// will update
ObservableCollection<myCell> myCells = new ObservableCollection<myCell>();
public MainPage()
{
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
// Generate some dummy data
for (int i=0;i<100;i++)
{
myCells.Add(new myCell() { Title = "Cell " + i, Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." });
}
// Set the cells to the Page's DataContext. All controls on
// the page will inherit this.
this.DataContext = myCells;
}
}
一旦我们有了数据,我们就需要从 Xaml 绑定到它。您现有的模板具有用于标题和内容的 TextBlocks,但它显式设置了文本属性,而不是绑定到列出的 objects。要解决这个问题,我们需要更改 TextBlocks 的 Text 属性以绑定到模板所表示的项目的标题和上下文。原来的模板太大放不下,所以我重新整理了一下。还要注意 ItemsTemplate={Binding} 添加到 ListView:
<ListView x:Name="history" ItemsSource="{Binding}">
<ListView.Resources>
<DataTemplate x:Key="myCell">
<StackPanel>
<TextBlock x:Name="title" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Title, Mode=OneTime}" VerticalAlignment="Top" Style="{StaticResource TitleTextBlockStyle}" />
<TextBlock x:Name="content" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Content, Mode=OneTime}" VerticalAlignment="Top" Style="{StaticResource BodyTextBlockStyle}" />
</StackPanel>
</DataTemplate>
</ListView.Resources>
<ListView.ItemTemplate>
<StaticResource ResourceKey="myCell"/>
</ListView.ItemTemplate>
</ListView>
有关详细信息,请参阅 Data binding overview (XAML) on MSDN, in particular the Binding to Collections 部分。