ListBox의 항목 간 구분선

Question

ListBox 컨트롤의 항목 사이에 구분선을 넣는 것을 좋아합니다. 그 구분선을 사용하여 ListBox를 하나의 열과 많은 행이있는 테이블처럼 보이게 만들고 싶습니다.

Answer 1

기본적인 방법은 목록 상자 항목에 대한 CSS 스타일을 정의하는 것입니다 :

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

... 

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

이 각 목록 상자 요소의 하단에 회색 테두리를 추가합니다.

참고 :이 내용은 해당 페이지의 모든 목록 상자에 적용됩니다. 당신이 특정리스트 박스에 해당 스타일이 필요한 경우, 다음 목록 상자에 CSS 클래스를 적용하고 그에만 적용 할 CSS를 변경 :

이

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

... 

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

Answer 2

세트 속성 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를 참조하십시오.

Answer 3

NestorArturo에서 영감을 얻었으며 Border 컨트롤에 대해 알아 냈습니다.

Border 컨트롤에 ItemTemplate 내용을 래핑하고 BorderThickness 및 BorderBrush를 지정하는 것은 매우 쉽습니다. ItemTemplate에서 Grid를 변경하지 않아도되므로이 방법을 사용했습니다.

테두리 컨트롤은 여기에 설명되어 있습니다 : http://www.silverlightshow.net/items/Using-the-Border-control-in-Silverlight-2-Beta-1-.aspx.

Answer 4

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