Windows Phone 7中的网格

Question

Windows Phone 7中的网格

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);
        }

- beny lim

有没有办法使用我的代码示例来解决这个问题？ - beny lim

4个回答

2

你应该在每个列中放置一个 StackPanel，并将项目添加到 StackPanels 而不是网格中。

- SLaks

2

一个堆叠面板会让你的项目一个接一个地显示，但是你可能会失去3列之间的关系。你也可以简单地将网格行设置为索引。

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

        schedule.Children.Add(titleTxtBlock);
    }

对于每个for循环，都要这样做，这样你就可以保持元素之间的关系。如果你的元素之间没有关系（例如，第一个标题与第一个类别无关，而第一个时间也无关），那么stackpanel可能是最好的选择。

- Quickhorn

0

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

最好使用另一个控件来保存数据，以使用户更明显地知道要滚动到哪里才能查看更多内容。

首先考虑设计，然后制作它（并寻求帮助）。

- Emond

@ben tan，然后添加更多行或使用一个ListBox。 - Emond

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joe McBride · Accepted Answer

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>