2011-07-19 13 views
4

Windows Phone 7アプリケーションでListBoxコントロールを使用していますが、リスト行の間に仕切り線を表示したいとします。 多くの(wp7ではなく)ListBoxの例には除算器があるようですが、これに関する情報は見つかりませんでした。ListBoxの項目間に仕切りを表示するにはどうすればいいですか?

+0

あなたがリストアイテムをテンプレートにしようとしたことがありますか? – NestorArturo

+0

いいえ、もう少し情報を提供できますか? – Marmoy

答えて

11

はNestorArturoに触発と知ったガットボーダーコントロール

BorderコントロールにItemTemplateコンテンツをラップし、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> 
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> 
+0

ありがとうございます。代わりにBorderコントロールを使用することにしました。 – Marmoy

+0

@videre - 答えとしてマーク?私の答えは正しいアプローチを記述していますが、最後に – ColinE

+0

の境界線を使用することに決めたとしても、解決策としてマークしたいと思いますが、境界線コントロールを使用することにしました。あなたが私にそれが良いと納得させるならば、私はあなたの答えを選ぶでしょう。 – Marmoy

関連する問題