WPF ListViewItem Width binding is not working as expected

Question

I am having a problem with getting the listviewitems to size to the space available to it in the second column of a grid. I have a ValidationItemError class that can have a long description. This is the DataTemplate xaml for it.

<DataTemplate DataType="{x:Type Models:ValidationItemError}">
    <StackPanel>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <Ellipse Width="10"
                     Height="10"
                     Margin="5,0,0,0"
                     Fill="Crimson" />
            <TextBlock Text="{Binding ColumnName}"
                       Grid.Column="1"
                       FontWeight="Bold" />
        </Grid>
        <TextBlock Text="{Binding Description}"
                   ToolTip="{Binding Description}"
                   Margin="20,0,0,0"
                   TextWrapping="Wrap" />
    </StackPanel>
</DataTemplate>

The validationItemErrors are grouped into another class ValidationLineItem and this is its DataTemplate

<DataTemplate DataType="{x:Type Models:ValidationLineItem}">
    <StackPanel>
        <Grid Margin="0,10,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="35"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <TextBlock Text="Line"
                       FontSize="16"
                       FontWeight="Bold" />
            <TextBlock Text="{Binding LineNumber}"
                       Margin="5,0,0,0"
                       FontSize="16"
                       Grid.Column="1" />
        </Grid>
        <ItemsControl ItemsSource="{Binding ValidationItems}">
        </ItemsControl>
    </StackPanel>
</DataTemplate>

So basically I have a validationLineItem which stores the linenumber and multiple ValidationItemError/Warnings stored in the ValidationItems property. So now I just bind that data to a listview that is on left column of the grid.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="75*" />
        <ColumnDefinition Name="GridCell" Width="25*" />
    </Grid.ColumnDefinitions>
    <ScrollViewer Grid.Column="1">
        <ListView ItemsSource="{Binding ValidationItems}"                          
                  SelectedItem="{Binding SelectedValidationItem}"                          
                  SelectionChanged="ListViewSelectionChanged">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Width"
                            Value="{Binding ElementName=GridCell, Path=Width}" />
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>
    </ScrollViewer>
</Grid>

That all renders fine except for this part

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="Width"
                Value="{Binding ElementName=GridCell, Path=Width}" />
    </Style>
</ListView.ItemContainerStyle>

The description textblock ignores the width setting and does not wrap like I need it to. If I manually set the width like

<Setter Property="Width" Value="100" />

instead of

<Setter Property="Width" Value="{Binding ElementName=GridCell, Path=Width}" />

The description textblock wraps as I would like. Anyone have any ideas? I am sure I'm missing something simple here.

I should note, that I have already tried this too with no luck.

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment"
                Value="Stretch" />
    </Style>
</ListView.ItemContainerStyle>

Not a real answer, so i add it as a comment. Have you tried binding the Width of the listviewitem to the grid instead of the cell? Also if you try that, use ActualWidth not Width. You also could try to set the HorizontalAlignment to stretch not the HorizontalContentAlignment. If that won't help i would suggest to use Snoop to check which element exactly is not resizing as expected. Snoop also allows you to modify values on the fly, where you can further test whats going on. — dowhilefor

Arcturus Arcturus · Accepted Answer · 2011-07-07T12:20:37

Your problem is that the ListView has an internal buildin ScrollViewer that causes the problem.

It seems to me, that you just want the content to wrap. So ditch the ItemContainerStyle and add this to the ListView:

ScrollViewer.HorizontalScrollBarVisibility="Disabled"

This will disable the horizontal scrollbar and makes your content wrap!

Hope this helps!

For completeness:

<ListView ItemsSource="{Binding ValidationItems}"                          
              SelectedItem="{Binding SelectedValidationItem}"                          
              SelectionChanged="ListViewSelectionChanged" 
              ScrollViewer.HorizontalScrollBarVisibility="Disabled" />

WPF ListViewItem Width binding is not working as expected

1 Answers