How to make a table in Silverlight?

Question

So, I would like to make a visible table with a border around each cell and a different background color for the title. I would like to insert controls into this. For example, place a text box inside one of the table elements or some radio buttons, etc. Is there any control for this?

I narrowed it down to two possibilities, but both of them seem to be "meh":

• use Grid Control - I like it, but there is a way to color the border into a cell (I did not find this)

• use DataGrid Control - this control is too complex for what I need.

I'm just looking for a html style table in silverlight, any ideas?

Answer 1

I got pretty decent results using the HeaderedItemsControl in the Toolkit:

<c:HeaderedItemsControl ItemsSource="{Binding rowData}" x:Name="theTable"> <c:HeaderedItemsControl.Header> <Border Background="HEADER BG COLOR HERE"> <Grid Width="{Binding ActualWidth, ElementName=theTable}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" Text="Field 1"/> <TextBlock Grid.Column="1" Text="Field 2"/> <TextBlock Grid.Column="2" Text="Field 3"/> </Grid> </Border> </c:HeaderedItemsControl.Header> <c:HeaderedItemsControl.ItemTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" Text="{Binding Value1}"/> <TextBlock Grid.Column="1" Text="{Binding Value2}"/> <TextBlock Grid.Column="2" Text="{Binding Value3}"/> </Grid> </DataTemplate> </c:HeaderedItemsControl.ItemTemplate> </c:HeaderedItemsControl> 

And, of course, you can draw it in your heart ...

Answer 2

You can use a Grid with a Border element in each cell (with BorderThickness and BorderBrush \ Background) Look at this sample (with UniformGrid):

 <UniformGrid Margin="10" Name="uniformGrid1"> <Border BorderThickness="1" BorderBrush="Red"> <TextBlock Text="1"></TextBlock> </Border> <Border BorderThickness="1" BorderBrush="Blue"> <TextBlock Text="2"></TextBlock> </Border> <Border BorderThickness="1" BorderBrush="Black"> <TextBlock Text="3"></TextBlock> </Border> <Border BorderThickness="1" BorderBrush="Yellow"> <TextBlock Text="4"></TextBlock> </Border> </UniformGrid>