Search code examples
wpflistviewscrollbarlistviewitem

WPF: how can I have ListViewItems fit the window width and use TextEllipsis


I'm currently working with a ListView. Its ListViewItems consist of a left-aligned TextBlock and a right-aligned Button:

The ListView in an uncomplicated state.

Now, I'd like to have my Items always display the Button and shorten the TextBlock accordingly, so they don't need to display a ScrollBar:

The ListView's intended behavior.

Unfortunately, right now that doesn't work:

The ListView's current behavior.

What can I do to make it work? Here's my example code:

<Window x:Class="JansWpfTestUmgebung.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ListView x:Name="AllItemsList"
              HorizontalContentAlignment="Stretch"
              HorizontalAlignment="Stretch">
        <ListViewItem>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0"
                       TextTrimming="CharacterEllipsis" 
                       Text="Item 1 with a very long description"/>
            <Button Grid.Column="1"
                    Content="Modify" />
        </Grid>
    </ListViewItem>
        <ListViewItem>Item 2</ListViewItem>
        <ListViewItem>Item 3</ListViewItem>
    </ListView>
</Window>

Thanks for any hints! :-)


Solution

  • You can do this by forcing a size on the button column:

    <Window
            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" 
            mc:Ignorable="d" 
            x:Class="JansWpfTestUmgebung.MainWindow"
            d:DesignWidth="394">
        <ListView x:Name="AllItemsList"
                  HorizontalContentAlignment="Stretch"
                  HorizontalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListViewItem>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="45" />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0"
                    TextTrimming="CharacterEllipsis" 
                    Text="Item 1 with a very long description"/>
                <Button Grid.Column="1"
                        Content="Modify"/>
            </Grid>
        </ListViewItem>
            <ListViewItem Content="Item 2"/>
            <ListViewItem Content="Item 3"/>
        </ListView>
    </Window>
    

    The way it was, It does its best to keep the * sized column as big as possible, at the expense of the Auto sized column. But a fixed size will win out against a * sized.