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'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>
You should put a StackPanel in each column and add the items to the StackPanels instead of the grid.
A stack panel would have your items display one above the other, though, you may lose relationships between the 3 columns. You could also simply set the grid.row to an index.
int i = 0;
foreach (var title in titleSpan)
{
{...}
Grid.SetColumn(titleTxtBlock, 1);
Grid.SetRow(titleTxtBlock, i);
schedule.Children.Add(titleTxtBlock);
}
Do that for each of your for loops and you'll keep the relationship between the elements. If there isn't a relationship between your elements (ie, the first title isn't related to the first category which isnt' related to the first time) then a stackpanel will likely be the best way to go.
You could add extra columns to the grid when there are more than 3 values.
It could be better to use another control to hold the data to make it more obvious to the user where to scroll to, to see more.
First think of a design, then make it (and ask for help)
来源：https://stackoverflow.com/questions/6845896/grid-in-windows-phone-7