How to make a table in Silverlight ?

Question

So I'd like to make a visible table, with a border around each cell and a different background color for the header. I'd like to eventually insert controls into this. For example, put a textfield inside one of the table elements, or some radio buttons, etc. Is there a control for this?

I've narrowed it down to two possibilities, but they both seem kind of "meh":

1. use the Grid Control - I like this but is there a way to color the border on the cell (I did not find this)

2. use the DataGrid Control - this control is just way too complicated for what I need.

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

Answer 1

You can use Grid with 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>

Answer 2

I've gotten pretty decent results with 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 style the above to your hearts content...