Grid in windows phone 7

Question

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

Answer 1

You should put a StackPanel in each column and add the items to the StackPanels instead of the grid.

Answer 2

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.

Answer 3

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>

Answer 4

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)