none
How to add vertical line for listview?

    Question

  • I need sample xaml code to set vertical line for the lsitview.

    In my application we have created resource file, in that resource file we added code for alternative row color but when we try to add vertical line we are not able to acheive it.

    Below is the resource file that give alternate color to the listview

    <

     

    ResourceDictionary

    xmlns

     

    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns

     

    :x="http://schemas.microsoft.com/winfx/2006/xaml"

     

    xmlns

     

    :appStyles="clr-namespace:PRCC.WPF">

     

     

    <!-- ListViewItem Alternate colour template-->

     

     

    <appStyles:BackgroundConverter x:Key="AlternateBackgroundConverter"/>

     

     

    <Style x:Key="ListViewAlternateItemStyle" TargetType="{x:Type ListViewItem}">

     

     

    <Setter Property="SnapsToDevicePixels" Value="true"/>

     

     

    <Setter Property="OverridesDefaultStyle" Value="true"/>

     

     

    <Setter Property="Background">

     

     

    <Setter.Value>

     

     

    <Binding RelativeSource="{RelativeSource Self}"

     

     

    Converter="{StaticResource AlternateBackgroundConverter}"/>

     

     

    </Setter.Value>

     

     

    </Setter>

     

     

    <Setter Property="Template">

     

     

    <Setter.Value>

     

     

    <ControlTemplate TargetType="ListBoxItem">

     

     

    <Border Name="Border" Margin="-3,0,1,0" Padding="0,3,0,3"

     

    SnapsToDevicePixels="True" Background="{TemplateBinding Background}">

     

     

    <StackPanel Orientation="Horizontal">

     

     

    <GridViewRowPresenter VerticalAlignment="Center"/>

     

     

    </StackPanel>

     

     

    </Border>

     

     

    <ControlTemplate.Triggers>

     

     

    <Trigger Property="IsSelected" Value="true">

     

     

    <Setter TargetName="Border" Property="Background">

     

     

    <Setter.Value>

     

     

    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

     

     

    <GradientStop Color="#FFD4DFFE" Offset="0"/>

     

     

    <GradientStop Color="#FFE0E4EF" Offset="1"/>

     

     

    </LinearGradientBrush>

     

     

    </Setter.Value>

     

     

    </Setter>

     

     

    <Setter TargetName="Border" Property="CornerRadius" Value="2"/>

     

     

    </Trigger>

     

     

    <Trigger Property="IsEnabled" Value="false">

     

    <Setter Property="Foreground" Value="#88888888"/> 

    </Trigger> 

    </ControlTemplate.Triggers>

    </ControlTemplate>

    </Setter.Value>

    </Setter> 

    <Setter Property="Margin" Value="0,1,0,0"/>

    <Setter Property="Height" Value="24"/> 

    <Style.Triggers><MultiTrigger><MultiTrigger.Conditions> 

    <Condition Property="IsSelected" Value="true" /><Condition Property="Selector.IsSelectionActive" Value="true" /></MultiTrigger.Conditions><Setter Property="Foreground" Value="#888" /></MultiTrigger></Style.Triggers></Style> 

    <Style x:Key="disabled" TargetType="FrameworkElement"><Setter Property="IsEnabled" Value="false"/></Style></ResourceDictionary>

    when we try to set the vertical line inside the ScrollContentPresenter of the listview(Code is mentioned below)  and se 'ListViewAlternateItemStyle' from resource file to Listview itemContainerstyle like ItemContainerStyle="{DynamicResource ListViewAlternateItemStyle}" . Only dots is visible in the place of vertical line but alternate row color is visible.

     

     

    ScrollContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="PART_ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" CanContentScroll="{TemplateBinding CanContentScroll}" KeyboardNavigation.DirectionalNavigation="Local">


    <

    <

    ScrollContentPresenter.Content><Grid> 

    <!-- Container of vertical and horizontal lines --> 

    <ItemsControl Margin="3,0,0,0" ItemsSource="{Binding Path=TemplatedParent.View.Columns, RelativeSource={RelativeSource TemplatedParent}}"><ItemsControl.ItemTemplate><DataTemplate><Border Width="{Binding Path=ActualWidth}" BorderThickness="0,0,1,0" BorderBrush="{DynamicResource verticalLineColor}" /> 

    </DataTemplate></ItemsControl.ItemTemplate><ItemsControl.ItemsPanel><ItemsPanelTemplate><StackPanel Orientation="Horizontal" /></ItemsPanelTemplate></ItemsControl.ItemsPanel></ItemsControl><ContentControl Content="{TemplateBinding Content}" /></Grid></ScrollContentPresenter.Content>

     Could you please post some answer?

     

     

     

     

    Friday, October 09, 2009 4:30 AM

Answers

  • Hi,


    what your are trying to achieve cannot be done just by customizing the list view but rather thru customizing the CellTemplate of each GridColumn and the ItemContainerStyle.

    And it all done within 2 steps



    First for the Listview it self

    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>




    Secondly for  the CellTemplate as follows

    <GridViewColumn.CellTemplate>
       <DataTemplate> 
          <Border BorderBrush="SOMECOLOR" BorderThickness="1,0,1,0" Margin="-6,0,-6,0">
    	<Grid Margin="6,0,6,0">
    	  <Grid.ColumnDefinitions>
    	    <ColumnDefinition Width="*"/>
    	    <ColumnDefinition Width="SOMEVALUE"/>	  </Grid.ColumnDefinitions>
    	</Grid>
          </Border>
        </DataTemplate>
    </GridViewColumn.CellTemplate>

     
    hope this be of any help

    • Marked as answer by Hua Chen Wednesday, October 28, 2009 1:27 PM
    Friday, October 09, 2009 10:01 AM
  • Hello Rain,

      Based on my understanding, we can bind the GridColumn Width at the DataTemplate to the ListView Column.

      Here is a sample

    Width="{Binding ElementName=listView1,Path=View.Columns[1].ActualWidth}"
     From:

      http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/608c0b9f-8eac-495e-b32b-0f2e0e2eb87f

    Thanks.

     

     
    Please mark the replies as answers if they help and unmark them if they provide no help
    • Marked as answer by Hua Chen Friday, October 30, 2009 8:44 AM
    Wednesday, October 28, 2009 1:32 PM

All replies

  • You can use this as a line in your datatemplate (it's a gradient line, but you can fill it with any brush you like):

    <!-- Splitter -->
    <Rectangle Margin="6" Height="3">
    	<Rectangle.Fill>
    		<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" >
    			<GradientStop Color="DarkGray" Offset="0" />
    			<GradientStop Color="Transparent" Offset="1" />
    		</LinearGradientBrush>
    	</Rectangle.Fill>
    </Rectangle>

    Geert van Horrik - CatenaLogic
    Visit my blog: http://blog.catenalogic.com

    Looking for a way to deploy your updates to all your clients? Try Updater!
    Friday, October 09, 2009 8:55 AM
  • Hi,


    what your are trying to achieve cannot be done just by customizing the list view but rather thru customizing the CellTemplate of each GridColumn and the ItemContainerStyle.

    And it all done within 2 steps



    First for the Listview it self

    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>




    Secondly for  the CellTemplate as follows

    <GridViewColumn.CellTemplate>
       <DataTemplate> 
          <Border BorderBrush="SOMECOLOR" BorderThickness="1,0,1,0" Margin="-6,0,-6,0">
    	<Grid Margin="6,0,6,0">
    	  <Grid.ColumnDefinitions>
    	    <ColumnDefinition Width="*"/>
    	    <ColumnDefinition Width="SOMEVALUE"/>	  </Grid.ColumnDefinitions>
    	</Grid>
          </Border>
        </DataTemplate>
    </GridViewColumn.CellTemplate>

     
    hope this be of any help

    • Marked as answer by Hua Chen Wednesday, October 28, 2009 1:27 PM
    Friday, October 09, 2009 10:01 AM
  • Hi,

    I am not able to get the required solution from this.

    Could you please put this code inside the resource file  which i posted or just tell me where to update?

    It will be more helpful for me.
    Friday, October 09, 2009 2:42 PM
  • Hello Rain,

      In addition to others',

      In the given style, the Target of Style is  ListViewItem

               <Style x:Key="ListViewAlternateItemStyle" TargetType="{x:Type ListViewItem}">

      But the Target of ControlTemplate is ListBoxItem

                    <ControlTemplate TargetType="ListBoxItem">

      Could you please check it?

      Thanks.


    Please mark the replies as answers if they help and unmark them if they provide no help
    Tuesday, October 13, 2009 5:24 AM
  • Hi Chen,


    Like u said i have checked the ControlTemplate type and changed to ListViewITem.


    But still it is not working.

    Below is the Resource Dictionary that i have created for Alternate Row Color


    <

     

    ResourceDictionary

    xmlns

     

    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns

     

    :x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns

     

    :appStyles="clr-namespace:PRCC.WPF">

     

     

    <!-- ListViewItem Alternate colour template Padding="0,3,0,3"-->

     

     

    <appStyles:BackgroundConverter x:Key="AlternateBackgroundConverter"/>

     

     

    <Style x:Key="ListViewAlternateItemStyle" TargetType="{x:Type ListViewItem}">

     

     

    <Setter Property="VerticalContentAlignment" Value="Stretch"/>

     

     

    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

     

     

     

    <Setter Property="SnapsToDevicePixels" Value="true"/>

     

     

    <Setter Property="OverridesDefaultStyle" Value="true"/>

     

     

    <Setter Property="Background">

     

     

    <Setter.Value>

     

     

    <Binding RelativeSource="{RelativeSource Self}"

     

    Converter="{StaticResource AlternateBackgroundConverter}"/>

     

     

    </Setter.Value>

     

     

    </Setter>

     

     

    <Setter Property="Template">

     

     

    <Setter.Value>

     

     

    <ControlTemplate TargetType="ListViewItem">

     

     

    <Border Name="Border" Margin="-3,0,1,0"

     

    SnapsToDevicePixels="True" Background="{TemplateBinding Background}">

     

     

    <StackPanel Orientation="Horizontal">

     

     

    <GridViewRowPresenter VerticalAlignment="Center"/>

     

     

    </StackPanel>

     

     

    </Border>

     

     

     

     

    <ControlTemplate.Triggers>

     

     

    <Trigger Property="IsSelected" Value="true">

     

     

    <Setter TargetName="Border" Property="Background">

     

     

    <Setter.Value>

     

     

    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

     

     

    <GradientStop Color="#FFD4DFFE" Offset="0"/>

     

     

    <GradientStop Color="#FFE0E4EF" Offset="1"/>

     

     

    </LinearGradientBrush>

     

     

    </Setter.Value>

     

     

    </Setter>

     

     

    <Setter TargetName="Border" Property="CornerRadius" Value="2"/>

     

     

    </Trigger>

     

     

    <Trigger Property="IsEnabled" Value="false">

     

     

    <Setter Property="Foreground" Value="#88888888"/>

     

     

    </Trigger>

     

     

    </ControlTemplate.Triggers>

     

     

     

     

    </ControlTemplate>

     

     

    </Setter.Value>

     

     

    </Setter>

     

     

    <Setter Property="Margin" Value="0,1,0,0"/>

     

     

    <Setter Property="Height" Value="24"/>

     

     

    <Style.Triggers>

     

     

    <MultiTrigger>

     

     

    <MultiTrigger.Conditions>

     

     

    <Condition Property="IsSelected" Value="true" />

     

     

    <Condition Property="Selector.IsSelectionActive" Value="true" />

     

     

    </MultiTrigger.Conditions>

     

     

    <Setter Property="Foreground" Value="#888" />

     

     

    </MultiTrigger>

     

     

    </Style.Triggers>

     

     

    </Style>

     

     

    <Style x:Key="disabled" TargetType="FrameworkElement">

     

     

    <Setter Property="IsEnabled" Value="false"/>

     

     

    </Style>

    </

     

    ResourceDictionary>


    Could you pls add code in my resource dictionary to acheive Vertical line with alternate row color?.

    When i tried am not able to acheive it.

    Please any help me.

    Monday, October 19, 2009 12:45 PM
  • Hi Adham,

    This is working fine in my sample application but in real application we are dynamically creating Header and Cell templates. Data also dynamic generation as xml file.

    If you provide me the same solution with code behind then it will b more helpful.


    Thanks!

    Rain
    Monday, October 19, 2009 12:52 PM
  • Hello Rain,

      Based on my understanding, we can bind the GridColumn Width at the DataTemplate to the ListView Column.

      Here is a sample

    Width="{Binding ElementName=listView1,Path=View.Columns[1].ActualWidth}"
     From:

      http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/608c0b9f-8eac-495e-b32b-0f2e0e2eb87f

    Thanks.

     

     
    Please mark the replies as answers if they help and unmark them if they provide no help
    • Marked as answer by Hua Chen Friday, October 30, 2009 8:44 AM
    Wednesday, October 28, 2009 1:32 PM