CODEWITHSUNDEEP
c#xamlwindows-phone-7
bhaku
bhaku

Reputation: 448

how to place a horizontal line after each item in listbox

I am building an application for Windows Phone 7 where i am displaying a few data in listbox. I want to add an image after each item to distinguish it from another. My xaml code is:

 <ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
 <ListBox.ItemTemplate>
 <DataTemplate>
 <ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
 <StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
 <Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch"     VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
 <StackPanel Orientation="Vertical">
      <StackPanel Orientation="Horizontal">
   <TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
   <TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
    <TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
      </StackPanel>
   <TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
    <Image Source="Image/index.jpg"/>
       </StackPanel>
     </StackPanel>
   </ScrollViewer>
    </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

The index.jpg image is the horizontal line i wanted to add. Please help where to add that image so that i get that image as a separator for each data

Upvotes: 1

Views: 1281

Answers (1)

Oscar Bralo
Oscar Bralo

Reputation: 1907

Check this:

http://social.msdn.microsoft.com/Forums/vstudio/en-US/e09926c2-5d53-4337-ba76-d1c786ec9ced/listbox-with-horizontal-lineseparator?forum=wpf

1st answer

Try something like this:

<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
 <ListBox.ItemTemplate>
 <DataTemplate>
 <ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
 <StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
 <Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch"     VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
 <StackPanel Orientation="Vertical">
      <StackPanel Orientation="Horizontal">
   <TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
   <TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
    <TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
      </StackPanel>
   <TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
    <Image Source="Image/index.jpg"/>
       </StackPanel>
     </StackPanel>
   </ScrollViewer>
    </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

This will help you ;)

Upvotes: 1

Related Questions