网格在Windows Phone 7中(Grid in 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); }I have a grid view code below which have divided into 3 column. But i have a problem with the code is that. When multiple data is retrieved. All the data in the 3 column is overlapping. How can i modify the below code such as it will show one after another below it.
//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); }最满意答案
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>Quickhorn's answer is mostly right. The issue is you're creating one big grid instead of a row for each item in the list. Here's a simplified example of your code which uses a model object and databinding instead.
This way you can style everything in the xaml easily and it makes things much simpler.
Code Behind: 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>网格在Windows Phone 7中(Grid in 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); }I have a grid view code below which have divided into 3 column. But i have a problem with the code is that. When multiple data is retrieved. All the data in the 3 column is overlapping. How can i modify the below code such as it will show one after another below it.
//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); }最满意答案
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>Quickhorn's answer is mostly right. The issue is you're creating one big grid instead of a row for each item in the list. Here's a simplified example of your code which uses a model object and databinding instead.
This way you can style everything in the xaml easily and it makes things much simpler.
Code Behind: 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>
发布评论