如何设置 Listviewitem 边距以使用 Listviewitem 的背景颜色？

Posted 2023-02-22

【中文标题】如何设置 Listviewitem 边距以使用 Listviewitem 的背景颜色？

【英文标题】：How to set Listviewitem margins to use the Listviewitem's background color?

【发布时间】：2021-06-02 04:00:40

【问题描述】：

我使用交替颜色，效果很好，但默认情况下，我在项目之间得到白线，即边距/填充，所以我将它们设置为 0，这使它看起来像这样：

但我希望它们之间有一些边距，只是当我有边距时，它看起来像这样：

我怎样才能让白边使用listviewitem的背景？

这里是 xaml 代码：

<Window.Resources>
    <Style TargetType="x:Type ListViewItem">
        <Style.Triggers>
            <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                <Setter Property="Background" Value="#1e1e1e"></Setter>
                <Setter Property="Foreground" Value="#ffffff"></Setter>
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="Margin" Value="0"/>
            </Trigger>
            <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                <Setter Property="Background" Value="#3c3c3c"></Setter>
                <Setter Property="Foreground" Value="#ffffff"></Setter>
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="Margin" Value="0"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Viewbox Stretch="Uniform">
    <ListView Grid.Row="4" Grid.Column="0" Margin="0,0,0,0" ItemsSource="Binding Coins" Name="Tasks" Height="250" AlternationCount="2">
        <ListView.View>
            <GridView>
                <GridView.Columns>
                <GridViewColumn Header="" Width="25" DisplayMemberBinding="Binding Path=Value.X">
                    
                </GridViewColumn>
                <GridViewColumn Header="" Width="25" DisplayMemberBinding="Binding Path=Value.X"></GridViewColumn>
                <GridViewColumn Header="Symbol" Width="90">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="Binding Path=Value.Symbol" TextAlignment="Center" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                <GridViewColumn Header="Amount" Width="90" DisplayMemberBinding="Binding Path=Value.X"></GridViewColumn>
                <GridViewColumn Header="Unit Price" Width="90" DisplayMemberBinding="Binding Path=Value.X"></GridViewColumn>
                <GridViewColumn Header="Capital" Width="90" DisplayMemberBinding="Binding Path=Value.X"></GridViewColumn>
                <GridViewColumn Header="Profit" Width="90" DisplayMemberBinding="Binding Path=Value.X"></GridViewColumn>
                <GridViewColumn Header="PNL %" Width="90" DisplayMemberBinding="Binding Path=Value.X"></GridViewColumn>
                <GridViewColumn Header="Day %" Width="90" DisplayMemberBinding="Binding Path=Value.X"></GridViewColumn>
                <GridViewColumn Header="Hour %" Width="90" DisplayMemberBinding="Binding Path=Value.X"></GridViewColumn>
                <GridViewColumn Header="Min %" Width="90" DisplayMemberBinding="Binding Path=Value.X"></GridViewColumn>
                <GridViewColumn Header="Lowest" Width="90" DisplayMemberBinding="Binding Path=Value.X"></GridViewColumn>

                    <GridViewColumn Header="Price" Width="90">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="Binding Path=Value.PriceDecimalDisplay" TextAlignment="Center" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

                    <GridViewColumn Header="Highest" Width="90" DisplayMemberBinding="Binding Path=Value.X"></GridViewColumn>
                <GridViewColumn Header="Vol BTC/h" Width="90" DisplayMemberBinding="Binding Path=Value.X"></GridViewColumn>
                <GridViewColumn Header="Net BTC/m" Width="90" DisplayMemberBinding="Binding Path=Value.X"></GridViewColumn>
            </GridView.Columns>
        </GridView>
    </ListView.View>
</ListView>
</Viewbox>

【参考方案1】：

对于 ListViewItem 使用 Border 而不是 Margin 怎么样？ 例如，您可以将 Border 设置在 ControlTemplate 内：

<Style x:Key="BorderedItem" TargetType="ListViewItem">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListViewItem">
        <Border Name="Border" 
                BorderBrush="#1e1e1e" 
                BorderThickness="0,0,0,10">
          <ContentPresenter />
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

然后你可以在 ListView 中设置你的样式：

<ListView ItemContainerStyle="StaticResource BorderedItem" />

要根据您的 AlternationIndex 更改 BorderBrush 颜色，您可以将其绑定到一个属性并从您的 ViewModel 更改它的状态。