locked
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
    Wednesday, August 20, 2014 2:05 PM

Answers

  • 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>
      ...
    

    • Marked as answer by Jon Hoffman123 Thursday, August 21, 2014 11:09 AM
    Thursday, August 21, 2014 9:13 AM

All replies

  • 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.


    Thursday, August 21, 2014 8:55 AM
    Moderator
  • 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>
      ...
    

    • Marked as answer by Jon Hoffman123 Thursday, August 21, 2014 11:09 AM
    Thursday, August 21, 2014 9:13 AM
  • That worked great, thank you very much.
    Thursday, August 21, 2014 11:09 AM