Search code examples
c#wpflistviewlistviewitem

Wpf ListView right border cut off

I tried to create WPF list View with 3 textlines but the right border is not set correctly (cut off by around 1-3 pixel right border. The left hand side is fine.

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

how to "fix" this?

Solution

  • You don't have to set the Width explicit anywhere, just remove your width bindings and try this:

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

    The Key is the following: HorizontalContentAlignment="Stretch"

    This looks like this:

    Example Image