windows phone 7中的网格

Question

我有一个网格视图代码，下面有分为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<Schedule> _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<Schedule>(); 

     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中

<ListBox 
    x:Name="scheduleListBox"> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto" /> 
        <ColumnDefinition Width="Auto" /> 
        <ColumnDefinition Width="Auto" /> 
       </Grid.ColumnDefinitions> 
       <TextBlock 
        Text="{Binding Time}"/> 
       <TextBlock 
        Text="{Binding Title}" 
        Grid.Column="1"/> 
       <StackPanel 
        Orientation="Horizontal" 
        Grid.Column="2"> 
        <TextBlock 
         Text="{Binding Category}"/> 
        <Image 
         Source="{Binding ImageSource}"/> 
       </StackPanel> 
      </Grid> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

Answer 2

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

使用另一个控件可以更好地保存数据，以便让用户更加明白要滚动到何处以查看更多内容。

设计的第一个想到，然后使它（求救）

Answer 3

你应该把每列StackPanel并添加项目到StackPanels，而不是电网。

Answer 4

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

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

     schedule.Children.Add(titleTxtBlock); 
    } 

为每个for循环做这件事，你会保持元素之间的关系。如果你的元素之间没有关系（即第一个标题与第一个类不相关，而第一个类不是与第一个相关），那么一个堆栈面板可能是最好的选择。