如何让Border拉伸填满ListViewItem的整个宽度

问题复现代码 #

<ListView ItemsSource="{Binding SerialNumbers}" SelectionMode="Multiple" HorizontalAlignment="Stretch">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Border Background="Red" Padding="14 5" HorizontalAlignment="Stretch">
                <TextBlock HorizontalAlignment="Stretch" Text="{Binding Number}" />
                <behaviours:Interaction.Triggers>
                    <behaviours:EventTrigger EventName="MouseLeftButtonUp">
                        <behaviours:InvokeCommandAction Command="{Binding Path=DataContext.SerialNumberSelectedCommand, RelativeSource={RelativeSource AncestorType=UserControl}}" CommandParameter="{Binding}" />
                    </behaviours:EventTrigger>
                </behaviours:Interaction.Triggers>
            </Border>
         </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

上述代码中，即使给ListView、Border、TextBlock都设置了HorizontalAlignment="Stretch"，Border仍然无法占满ListViewItem的全宽，仅点击红色区域能触发绑定的MouseLeftButtonUp命令，行内空白区域点击无响应。

修复方法 #

问题出在ListView默认生成的ListViewItem容器，默认HorizontalContentAlignment属性值不是Stretch，导致内容容器不会给子元素分配全宽空间。只需给ListView添加ItemContainerStyle显式设置该属性即可：

<ListView ItemsSource="{Binding SerialNumbers}" SelectionMode="Multiple" HorizontalAlignment="Stretch">
    <!-- 新增项容器样式配置 -->
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ListView.ItemContainerStyle>
    
    <ListView.ItemTemplate>
        <DataTemplate>
            <Border Background="Red" Padding="14 5" HorizontalAlignment="Stretch">
                <TextBlock HorizontalAlignment="Stretch" Text="{Binding Number}" />
                <behaviours:Interaction.Triggers>
                    <behaviours:EventTrigger EventName="MouseLeftButtonUp">
                        <behaviours:InvokeCommandAction Command="{Binding Path=DataContext.SerialNumberSelectedCommand, RelativeSource={RelativeSource AncestorType=UserControl}}" CommandParameter="{Binding}" />
                    </behaviours:EventTrigger>
                </behaviours:Interaction.Triggers>
            </Border>
         </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

配置完成后Border会自动拉伸占满整行宽度，点击ListViewItem任意位置都会触发绑定的选中命令。

可选优化：如果需要全局生效，可以将该ListViewItem样式放到应用级资源字典中，无需每个ListView单独配置。

内容的提问来源于stack exchange，提问作者Eddie