ListBox中项目之间的分隔线

时间:2012-07-31 08:34:23

标签: c# asp.net css .net-4.0

我喜欢在ListBox控件中的项之间放置分隔线。使用该分隔符行,我想让ListBox看起来像一个包含一列和多行的表。

4 个答案:

答案 0 :(得分:2)

   <DataTemplate>
                <Border BorderThickness="0,10,0,10" BorderBrush="Black">
                        <Grid Width="auto" HorizontalAlignment="Stretch" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="48" />
                            </Grid.ColumnDefinitions>
                            <TextBlock VerticalAlignment="Center" FontSize="36" FontWeight="Bold" Grid.Column="0" Foreground="Black" Text="{Binding Path=Title}" Name="title"/>
                            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" Grid.Column="1" Foreground="Black" Text="{Binding Path=Location}" Name="location"/>
                            <Image VerticalAlignment="Center" Grid.Column="2" Width="48" Height="48" Source="ApplicationIcon.jpg"/>
                        </Grid>
           </Border>
                    </DataTemplate>

答案 1 :(得分:1)

一种基本方法是为列表框项定义CSS样式:

<style type='text/css'>
option { border-top: solid 1px gray; }
</style>

...

<asp:ListBox ...></asp:ListBox>

这将在每个listbox-element的底部添加灰色边框。

注意:这将适用于该页面上的所有列表框。如果您只需要某些列表框的样式,那么将CSS类应用于列表框并将CSS更改为仅适用于那些:

<style type='text/css'>
select.table option { border-top: solid 1px gray; }
</style>

...

<asp:ListBox CssClass="table" ...></asp:ListBox>

答案 2 :(得分:0)

设置属性MultiColumn=true,然后:

listBox1.Items.AddRange(new object[]
    {
        "Item 1, column 1",
        "Item 2, column 1",
        "Item 3, column 1",
        "Item 4, column 1",
        "Item 5, column 1",
        "Item 1, column 2",
        "Item 2, column 2",
        "Item 3, column 2"
   });

请参阅MSDN

答案 3 :(得分:0)

受到NestorArturo的启发,发现了边境控制。

将ItemTemplate内容包装在Border控件中并指定BorderThickness和BorderBrush非常容易。我这样做了,因为它不需要在ItemTemplate中更改我的网格。

此处描述了边框控件:http://www.silverlightshow.net/items/Using-the-Border-control-in-Silverlight-2-Beta-1-.aspx