CODEWITHSUNDEEP
wpfxamllistview
Mattigins
Mattigins

Reputation: 1016

WPF XAML Listview Horizontal Lines

I would like to add a horizontal line (see image) to my listview in between each item.

I am not sure how i would adapt my current xaml to do this. If possible i would like the line to fade out on both ends line the picture.

Thanks.

Current XAML:

<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="#787f82" />
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListViewItem}">
            <Border
                 BorderBrush="Transparent"
                 BorderThickness="0"
                 Background="{TemplateBinding Background}">
                <GridViewRowPresenter HorizontalAlignment="Stretch" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="Auto" Margin="0" Content="{TemplateBinding Content}"/>
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Example Picture: enter image description here

Upvotes: 2

Views: 2357

Answers (2)

Goldorak84
Goldorak84

Reputation: 3972

My solution is to use the ListView.ItemContainerStyle Property to set the style I want for the item container

                <ListView ItemsSource="{Binding Champs}" Name="listView1" HorizontalContentAlignment="Stretch" Background="Transparent" Padding="-1" >
                    <ListView.ItemContainerStyle>
                        <Style>
                            <Setter Property="Control.Background" Value="White" />
                            <Setter Property="Control.BorderThickness" Value="0.3" />
                            <Setter Property="Control.BorderBrush" Value="Black" />
                        </Style>
                    </ListView.ItemContainerStyle>

                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="0,5,0,5">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="{Binding Nom}" FontWeight="Bold" FontSize="10" />
                                <TextBox Grid.Row="1" TextAlignment="Center" Text="{Binding Valeur}" />
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListView>

Upvotes: 0

Mattigins
Mattigins

Reputation: 1016

I was able to work it out myself. I will post my code below so others may have a chance to do it themselves.

I simply set a border for the bottom of each item, i them applied a gradient to the border.

 <Style x:Key="level1" TargetType="{x:Type ListViewItem}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Foreground" Value="#787f82" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <Border
                         BorderThickness="0,0,0,2"
                         Background="{TemplateBinding Background}">
                        <GridViewRowPresenter HorizontalAlignment="Stretch" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="Auto" Margin="0" Content="{TemplateBinding Content}"/>
                        <Border.BorderBrush>
                            <LinearGradientBrush StartPoint="0,1" EndPoint="1,0" Opacity="0.3">
                                <GradientStop Offset="0" Color="transparent"/>
                                <GradientStop Offset="0.5" Color="white"/>
                                <GradientStop Offset="1" Color="transparent"/>
                            </LinearGradientBrush>
                        </Border.BorderBrush>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background">
                    <Setter.Value>
                        <ImageBrush ImageSource="images/selection-large.png"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="BorderThickness" Value="0" />
            </Trigger>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background">
                    <Setter.Value>
                        <ImageBrush ImageSource="images/selection-large.png"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="Foreground" Value="#FFFFFF" />
                <Setter Property="FontWeight" Value="bold" />
            </Trigger>
        </Style.Triggers>
    </Style>

Upvotes: 3

Related Questions