[英]Grid in windows phone 7
I have a grid view code below which have divided into 3 column . 我有一个网格视图代码,下面分为3列 。 But i have a problem with the code is that.
但我的代码有问题。 When multiple data is retrieved.
检索多个数据时 。 All the data in the 3 column is overlapping.
3列中的所有数据都是重叠的。 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. Quickhorn的答案大多正确。 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. 通过这种方式,您可以轻松地为xaml中的所有内容设置样式,并使事情变得更加简单。
Code Behind: MainPage.xaml.cs
代码背后:
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 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>
您应该在每列中放置一个StackPanel
,并将项目添加到StackPanels而不是网格。
A stack panel would have your items display one above the other, though, you may lose relationships between the 3 columns. 堆栈面板会让您的项目显示在另一个之上,但是,您可能会丢失3列之间的关系。 You could also simply set the grid.row to an index.
您也可以简单地将grid.row设置为索引。
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. 为每个for循环执行此操作,您将保持元素之间的关系。 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. 当有超过3个值时,您可以向网格添加额外的列。
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) 首先考虑设计,然后制作(并寻求帮助)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.