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循環做這件事，你會保持元素之間的關係。如果你的元素之間沒有關係（即第一個標題與第一個類不相關，而第一個類不是與第一個相關），那麼一個堆棧面板可能是最好的選擇。