locked
Horizontal line in listview datatemplate stackpannel

    Question

  • Dear team,

            i have a stack panel in a listview datatemplate. i need to draw a line in end of the each entry. 

    <ListView Name="lstTopers" ItemsSource="{Binding}" Grid.Column="1" Grid.Row="2" VerticalAlignment="Top" IsItemClickEnabled="False" >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                                <Border BorderBrush="Black" BorderThickness="2" Width="100">
                            <Image Source="{Binding  Path=Image}" Height="75" Width="100" HorizontalAlignment="Left"/>
                                </Border>
                                <TextBlock Text="{Binding Image_Name}" FontSize="20" Width="150" Padding="2" TextWrapping="WrapWholeWords" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                                <TextBlock Text="{Binding Description}" FontSize="20" Padding="10" TextWrapping="WrapWholeWords" VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="Red" />
                                <Rectangle Fill="Blue"  Width="200" Height="1" Stroke="Black" StrokeThickness="3" Grid.Column="1" Grid.Row="2" />
                            </StackPanel>
                           
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

      i don't know where i have done the mistake.i am not able to see the line.

    kindly help


    • Edited by mann madhan1 Thursday, November 13, 2014 4:15 PM
    Thursday, November 13, 2014 4:14 PM

Answers

  • Hi Mann,

    I think a solution is to add an additional StackPanel with Vertical orientation:

    <ListView Name="lstTopers">
        <ListView.ItemTemplate>
            <DataTemplate>
                <!-- this is the additional StackPanel -->
                <StackPanel>
                    <StackPanel Orientation="Horizontal" Background="AliceBlue">
                        <Border BorderBrush="Black" BorderThickness="2" Width="100">
                            <Image Source="{Binding  Path=Image}" Height="75" Width="100" HorizontalAlignment="Left"/>
                        </Border>
                        <TextBlock Text="{Binding Image_Name}" FontSize="20" Width="150" Padding="2" TextWrapping="WrapWholeWords" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                        <TextBlock Text="{Binding Description}" FontSize="20" Padding="10" TextWrapping="WrapWholeWords" VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="Red" />
                    </StackPanel>
                    <Rectangle Fill="Red" Height="1" Stroke="Red" StrokeThickness="3" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    
        <x:Int32>1</x:Int32>
        <x:Int32>2</x:Int32>
        <x:Int32>3</x:Int32>
    </ListView>

    I also made the line red so it would be more pronounced. There are also a few minor changes to make the example self-contained. Just copy and paste the XAML code.

    This is how it looks:

    Leszek


    My Apps



    • Edited by ata6502 Thursday, November 13, 2014 6:27 PM added a picture
    • Marked as answer by mann madhan1 Thursday, November 13, 2014 6:38 PM
    Thursday, November 13, 2014 6:24 PM