Windows Phone 7中的网格

我有一个网格视图代码，下面分为3列 。 但我的代码有问题。 检索多个数据时 。 3列中的所有数据都是重叠的。 如何修改下面的代码，例如它会在它下面一个接一个地显示。

//Define grid column, size Grid schedule = new Grid(); foreach (var time in timeSplit) { timeList = time; //Column 1 to hold the time of the schedule ColumnDefinition scheduleTimeColumn = new ColumnDefinition(); GridLength timeGrid = new GridLength(110); scheduleTimeColumn.Width = timeGrid; schedule.ColumnDefinitions.Add(scheduleTimeColumn); //Text block that show the time of the schedule TextBlock timeTxtBlock = new TextBlock(); timeTxtBlock.Text = time; //Set the alarm label text block properties - margin, fontsize timeTxtBlock.FontSize = 28; timeTxtBlock.Margin = new Thickness(0, 20, 0, 0); //Set the column that will hold the time of the schedule Grid.SetColumn(timeTxtBlock, 0); schedule.Children.Add(timeTxtBlock); } foreach (var title in titleSplit) { titleList = title; //Column 2 to hold the title of the schedule ColumnDefinition scheduleTitleColumn = new ColumnDefinition(); GridLength titleGrid = new GridLength(500); scheduleTitleColumn.Width = titleGrid; schedule.ColumnDefinitions.Add(scheduleTitleColumn); //Text block that show the title of the schedule TextBlock titleTxtBlock = new TextBlock(); if (title.Length > 10) { string strTitle = title.Substring(0, 10) + "...."; titleTxtBlock.Text = strTitle; } else { titleTxtBlock.Text = title; } //Set the alarm label text block properties - margin, fontsize titleTxtBlock.FontSize = 28; titleTxtBlock.Margin = new Thickness(60, 20, 0, 0); //Set the column that will hold the title of the schedule Grid.SetColumn(titleTxtBlock, 1); schedule.Children.Add(titleTxtBlock); //scheduleListBox.Items.Add(schedule); } foreach (var category in categorySplit) { categoryList = category; //Column 3 to hold the image category of the schedule ColumnDefinition categoryImageColumn = new ColumnDefinition(); GridLength catImgnGrid = new GridLength(70); categoryImageColumn.Width = catImgnGrid; schedule.ColumnDefinitions.Add(categoryImageColumn); TextBlock categoryTxtBlock = new TextBlock(); categoryTxtBlock.Text = category; //set the category image and its properties - margin, width, height, name, background, font size Image categoryImage = new Image(); categoryImage.Margin = new Thickness(-50, 15, 0, 0); categoryImage.Width = 50; categoryImage.Height = 50; if (category == "Priority") { categoryImage.Source = new BitmapImage(new Uri("/AlarmClock;component/Images/exclamination_mark.png", UriKind.Relative)); } else if (category == "Favourite") { categoryImage.Source = new BitmapImage(new Uri("/AlarmClock;component/Images/star_full.png", UriKind.Relative)); } Grid.SetColumn(categoryImage, 2); schedule.Children.Add(categoryImage); } scheduleListBox.Items.Add(schedule); } 

Answer 1

Quickhorn的答案大多正确。 问题是您要为列表中的每个项目创建一个大网格而不是一行。 下面是代码的简化示例，它使用模型对象和数据绑定代替。

通过这种方式，您可以轻松地为xaml中的所有内容设置样式，并使事情变得更加简单。

代码背后： MainPage.xaml.cs

 public partial class MainPage : PhoneApplicationPage { private ObservableCollection _schedules; public MainPage() { InitializeComponent(); string[] timeSplit = new string[] { "One1", "Two2", "Three3" }; string[] titleSplit = new string[] { "Title1", "Title2", "Title3" }; string[] categorySplit = new string[] { "Priority", "Favourite", "Another" }; _schedules = new ObservableCollection(); for ( int i = 0; i < timeSplit.Length; i++ ) { _schedules.Add( CreateSchedule( timeSplit[i], titleSplit[i], categorySplit[i] ) ); } scheduleListBox.ItemsSource = _schedules; } private Schedule CreateSchedule( string time, string title, string category ) { Schedule schedule = new Schedule { Time = time, Title = title, Category = category }; if ( category == "Priority" ) { schedule.ImageSource = "/AlarmClock;component/Images/exclamination_mark.png"; } else if ( category == "Favourite" ) { schedule.ImageSource = "/AlarmClock;component/Images/star_full.png"; } return schedule; } } public class Schedule { public string Time { get; set; } public string Title { get; set; } public string Category { get; set; } public string ImageSource { get; set; } } 

MainPage.xaml中

Answer 2

您应该在每列中放置一个StackPanel ，并将项目添加到StackPanels而不是网格。

Answer 3

堆栈面板会让您的项目显示在另一个之上，但是，您可能会丢失3列之间的关系。 您也可以简单地将grid.row设置为索引。

  int i = 0; foreach (var title in titleSpan) { {...} Grid.SetColumn(titleTxtBlock, 1); Grid.SetRow(titleTxtBlock, i); schedule.Children.Add(titleTxtBlock); } 

为每个for循环执行此操作，您将保持元素之间的关系。 如果您的元素之间没有关系（即，第一个标题与第一个与第一次没有关联的类别无关），那么堆叠面板可能是最佳方式。

Answer 4

当有超过3个值时，您可以向网格添加额外的列。

最好使用另一个控件来保存数据，以使用户更加明显地滚动到哪里，以查看更多信息。

首先考虑设计，然后制作（并寻求帮助）