Wpf ListView右边框被截掉

Question

我尝试创建包含 3 条文本行的 WPF 列表视图，但右边框设置不正确（截断约 1-3 像素 right border。左边还好。

<Window x:Class="ListViewBorder.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:ListViewBorder"
    mc:Ignorable="d"
    x:Name="MainWindowUc"
    Title="MainWindow" Height="800" Width="1024">
<Grid>
    <ListView
        ItemsSource="{Binding ElementName=MainWindowUc, Path=Items}"
        BorderBrush="DarkCyan"
        BorderThickness="1" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
        >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Border Background="DarkGray"
                        BorderBrush="Blue" 
                        BorderThickness="2"
                        CornerRadius="6" 
                        ScrollViewer.VerticalScrollBarVisibility="Disabled"
                        Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}">
                    <WrapPanel Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=Border}}"
                               >

                        <TextBlock Padding="1" Text="{Binding Column1}" Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=WrapPanel}}" TextWrapping="NoWrap"></TextBlock>
                        <TextBlock Padding="1" Text="{Binding Column2}" Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=WrapPanel}}" TextWrapping="Wrap"></TextBlock>
                        <TextBlock Padding="1" Text="{Binding Column3}" Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=WrapPanel}}" TextWrapping="Wrap" TextAlignment="Right"></TextBlock>

                    </WrapPanel>

                </Border>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

如何"fix"这个？

Answer 1

您不必在任何地方显式设置宽度，只需删除宽度绑定并试试这个：

<ListView BorderBrush="DarkCyan"
        BorderThickness="1"
        ItemsSource="{Binding ElementName=MainWindowUc, Path=Items}"
        HorizontalContentAlignment="Stretch"
        ScrollViewer.HorizontalScrollBarVisibility="Disabled"
        ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
    <DataTemplate>
        <Border Background="DarkGray"
                BorderBrush="Blue"
                BorderThickness="2"
                CornerRadius="6"
                Padding="6"
                ScrollViewer.VerticalScrollBarVisibility="Disabled">
            <StackPanel>
                <TextBlock Padding="1"
                            Text="{Binding Column1}"
                            TextWrapping="NoWrap" />
                <TextBlock Padding="1"
                            Text="{Binding Column2}"
                            TextWrapping="Wrap" />
                <TextBlock Padding="1"
                            Text="{Binding Column3}"
                            TextAlignment="Right"
                            TextWrapping="Wrap" />

            </StackPanel>
        </Border>
    </DataTemplate>
</ListView.ItemTemplate>

关键如下：HorizontalContentAlignment="Stretch"

看起来像这样：

Answer 2

如果其他人遇到此问题并且设置 HorizontalContentAlignment="Stretch" 没有帮助：

我唯一能为我解决这个问题的方法就是将 ListViewItem 的宽度属性设置得比 ViewportWidth 的 ViewportWidth 小一点。 =16=] 它在。

<Window.Resources>
    <Style x:Key="MyStyle" TargetType="ListViewItem">
        <Setter Property="Width" Value="{Binding ViewportWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ScrollViewer}, Converter={StaticResource ABitLessConverter}}" />
        <Setter Property="BorderBrush" Value="LightGray" />
        <Setter Property="BorderThickness" Value="1" />
    </Style>
</Window.Resources>

然后在 ListView:

<ListView ItemContainerStyle="{StaticResource MyStyle}">
    <!-- Contents -->
</ListView>

这里是 ABitLessConverter 的代码，它减去一点：

class ABitLessConverter : IValueConverter
{
    private const int REDUCTION_VALUE = 2;

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        double intValue = (double)value;
        return intValue > REDUCTION_VALUE ? intValue - REDUCTION_VALUE : value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

当然，要使 {StaticResource ABitLessConverter} 正常工作，您需要将其设为键为 "ABitLessConverter" 的资源。

Wpf ListView右边框被截掉

Wpf ListView right border cut off

c#

wpf

listview

listviewitem