开发者

How to make a table in Silverlight?

So I'd like to make a visible table, with a border aro开发者_StackOverflow中文版und 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?


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


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜