如何在ListBox中的项目之间显示分隔符?

时间:2011-07-19 12:19:41

标签: silverlight windows-phone-7 listbox

我在Windows Phone 7应用程序中使用ListBox控件,我想在列表行之间显示分隔符/行。 虽然许多(不是wp7)ListBox示例似乎都有分隔符,但我无法找到有关此内容的任何信息。

2 个答案:

答案 0 :(得分:11)

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

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

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

下面你可以看到我如何使用它:

<ListBox Background="White" ItemsSource="{Binding Mode=OneWay, Path=MyPath}" Name="listName" SelectionChanged="listName_SelectionChanged">
                    <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
here -->                     <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>
and here -->                </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

答案 1 :(得分:8)

您可以更改ListBoxItem模板,或者更简单的方法是更改​​ItemTemplate,您只需在ItemTemplate中添加分隔符,如下所示:

<ListBox.ItemTemplate>
  <DataTemplate>
    <Grid>
       <!-- your content goes here ... for example: -->
       <TextBlock Text={Binding Path=InterestingThing}"/>

       <!-- the divider -->
       <Line X1="0" X2="200" Y1="0" Y2="0"
             VerticalAlignment="Bottom"/>
    </Grid>
  </DataTemplate>
</ListBox.ItemTemplate>