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>

Answer 1

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