¿Cómo hacer una mesa en Silverlight?

Question

Así que me gustaría hacer una tabla visible, con un borde alrededor de cada celda y un color de fondo diferente para el encabezado. Me gustaría eventualmente insertar controles en esto. Por ejemplo, ponga un campo de texto dentro de uno de los elementos de la tabla, o algunos botones de opción, etc. ¿Hay algún control para esto?

me he reducido a dos posibilidades, pero ambos parecen especie de "meh":

1. utilizar el control de cuadrícula - me gusta esto, pero hay una manera de dar color a la frontera en el celular (no lo encontré)

2. use el Control DataGrid - este control es demasiado complicado para lo que necesito.

Estoy buscando una tabla de estilo html en silverlight, alguna idea?

Answer 1

que he obtenido con el HeaderedItemsControl en 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> 

y, por supuesto, puede estilo de lo anterior a su contenido de corazones ...

Answer 2

Puede utilizar la red con el elemento de frontera en cada celda (con BorderThickness y BorderBrush \ fondo) mirada a esta muestra (con UniformGrid): resultados bastante decentes

<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>