How to create table structure in windows phone 8 app? - windows-phone-8

Question

I want to create report of students in windows phone 8 app.
there are 3 row and 4 columns
structure is like as follow
student1 student2 student3
subject1
subject2
subject3
Total
marks
now the student1, student2 are names of student should come dynamically from windows azure database.
all the marks are in database for perticular students. these marks should get display in front of perticular student for perticular subject.
All data is present in database. How to show it in table form?

Answer 1

I think a simple Grid control containing some textblocks would be just fine. You can define it in XAML really easily:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" ... />
<TextBlock Grid.Row="1" Grid.Column="0" ... />
<TextBlock Grid.Row="2" Grid.Column="0" ... />
...
</Grid>
The only think you need to look out for is how the heights and widths are defined. Essentially there are 3 types of height/width:
Static: Defined with a number and measured in pixels
Automatic: Defined by the keyword Auto and changes dynamically according to content size
"Fill the rest": Defined by the star * symbol and makes the row/column fill the rest of the space available in the grid.
Check out the MSDN documentation for the Grid control for more info.

Answer 2

You can set View as Shown Below:
XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListBox x:Name="stu" Grid.RowSpan="4" Grid.Column="1" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10">
<TextBlock Text="{Binding name}"></TextBlock>
<TextBlock Text="{Binding s1}" TextAlignment="Center"></TextBlock>
<TextBlock Text="{Binding s2}" TextAlignment="Center"></TextBlock>
<TextBlock Text="{Binding s3}" TextAlignment="Center"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock></TextBlock>
<TextBlock Grid.Row="1" Text="Subject1"></TextBlock>
<TextBlock Grid.Row="2" Text="Subject2"></TextBlock>
<TextBlock Grid.Row="3" Text="Subject3"></TextBlock>
</Grid>
CS:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
List<data> obj = new List<data>();
obj.Add(new data("Student1", "10", "20", "30"));
obj.Add(new data("Student2", "0", "10", "20"));
obj.Add(new data("Student3", "20", "30", "40"));
obj.Add(new data("Student4", "30", "40", "50"));
obj.Add(new data("Student5", "40", "50", "60"));
stu.ItemsSource = obj;
}
public class data
{
public string name { get; set; }
public string s1 { get; set; }
public string s2 { get; set; }
public string s3 { get; set; }
public data() { }
public data(string name, string s1, string s2, string s3)
{
this.name = name;
this.s1 = s1;
this.s2 = s2;
this.s3 = s3;
}
}
Here You just needed to have data from Azure Database. from above implementation you can have view like as under with scrolling data of Students.

Answer 3

You Have to Use 1st Listbox As Column and Set ItemSource Property
and
another ListBox For the Row of the Object and set ItemSource Property.