StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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.</p> <p>This way you can style everything in the xaml easily and it makes things much simpler.</p> <p><strong>Code Behind: <code>MainPage.xaml.cs</code></strong></p> <pre><code>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; } } </code></pre> <p><strong>MainPage.xaml</strong></p> <pre><code><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> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload