Line Seperator in a ListView

Question

I am pretty sure that I am missing something really obvious but I can not seem to find the answer I am looking for.  I am trying to create a ListView where each row will contain two columns.  I would like to add a line separator between each row to give it a good visual appearance however I can not seem to figure out how to add a line separator.

Here is my code:

<ListView Name="ItemListView" Margin="0,0,10,20" Padding="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsItemClickEnabled="True" ItemClick="ListViewBase_OnItemSelected" >
   
    <ListView.ItemTemplate>

        <DataTemplate>

            <Border BorderBrush="Black" BorderThickness="0,0,0,1" HorizontalAlignment="Stretch">

                <Grid HorizontalAlignment="Stretch">

                   <Grid.ColumnDefinitions>

                       <ColumnDefinition MinWidth="150"/>

                       <ColumnDefinition Width="*"/>

                   </Grid.ColumnDefinitions>

                   <TextBlock HorizontalAlignment="Stretch" Grid.Column="0" Name="TextBlock_Id" Text="{Binding id}" Style="{StaticResource EditSelectable_ItemListText}"/>

                   <TextBlock HorizontalAlignment="Stretch" Grid.Column="1" Name="TextBlock_DisplayName" Text="{Binding displayName}" Style="{StaticResource EditSelectable_ItemListText}"/>

               </Grid>

           </Border>

       </DataTemplate>

   </ListView.ItemTemplate>

</ListView>

As you can see, I tried using a Border to create a line at the bottom but the line only stretches as far as the last letter in the DisplayName TextBlock.   I know I must be missing something pretty obvious but for the life of me I can not seem to figure this out.

Thanks

Jon

Answer 1

Hi Jon,

The easiest way to solve this problem is to set a static width to Border XAML, here I use 800px but you could modify the value as you need. I attach my code here:

           <ListView.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="white" BorderThickness="0,0,0,1" HorizontalAlignment="Stretch" Width="800">
                        <Grid HorizontalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition MinWidth="150"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock HorizontalAlignment="Stretch" Grid.Column="0" Name="TextBlock_Id" Text="{Binding ID}" />
                            <TextBlock HorizontalAlignment="Stretch" Grid.Column="1" Name="TextBlock_DisplayName" Text="{Binding DisplayName}" />
                        </Grid>
                    </Border>
                </DataTemplate>
            </ListView.ItemTemplate>

Let me know if I misunderstand something.

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

You should define an ItemContainerStyle for the ListView that sets the HorizontalContentAlignment property of the ListViewItems to Strecth:

 <ListView Name="ItemListView" Margin="0,0,10,20" Padding="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsItemClickEnabled="True" >
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                </Style>
            </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                <DataTemplate>
  ...

Answer 3

That worked great, thank you very much.