WPF XAML Listview 水平线

Question

我想在每个项目之间的列表视图中添加一条水平线（见图）。

我不确定如何调整我当前的 xaml 来执行此操作。如果可能的话，我希望线条在图片的两端淡出。

谢谢。

当前 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>

示例图片：

Answer 1

我的解决方案是使用ListView.ItemContainerStyle 属性为项目容器设置我想要的样式

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

Answer 2

我能够自己解决。我将在下面发布我的代码，以便其他人有机会自己做。

我只是为每个项目的底部设置了一个边框，我在边框上应用了渐变。

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