Search code examples
wpflistviewgridword-wrapcolumn-width

WPF TexBlock in Grid in ListView not Sizing Correctly?


I have a TextBlock that is in a Grid that is an ItemTemplate for a ListView. I have the items so that they grow when the window is resized, but I cannot figure out how to have the TextBlock be limited to that size. I've tried to do this with the width on the ColumnDefinition - if I set the Width to a fixed number (say 350) the text wraps correctly, but obviously the TextBlock doesn't expand when the window is expanded - if I set the Width to "*" the there is then a horizontal scroll bar and the text runs off to the right and doesn't wrap.

Any idea what I'm doing wrong here?

<GroupBox Header="Urgent Items" Margin="8,8,8,340" Name="UrgetItemsGroupBox">
    <Grid>
        <ListView Margin="6" Name="CriticalErrorsListView" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Path=.}" MouseDoubleClick="CriticalErrorsListView_MouseDoubleClick">
            <ListView.Background>
                <LinearGradientBrush EndPoint="-0.192,0.529" StartPoint="0.998,0.519">
                    <GradientStop Color="#FFD2D2D2" Offset="0"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                </LinearGradientBrush>
            </ListView.Background>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Border Margin="2,2,2,3" BorderBrush="#FF847F6E" CornerRadius="10" BorderThickness="3">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30" />
                                <ColumnDefinition Width="10" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="25" />
                                <RowDefinition Height="20" />
                                <RowDefinition Height="20" />
                                <RowDefinition Height="75" />
                            </Grid.RowDefinitions>
                            <Image Grid.Row="0" Grid.RowSpan="5" Grid.Column="0" Margin="2,2,2,2" Source="Images\errorIcon.png" />
                            <TextBlock Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="2" Margin="2,2,2,2" Text="{Binding Path=ApplicationName}" FontFamily="Calibri" FontWeight="Bold" FontSize="18" />
                            <TextBlock Grid.Row="1" Grid.Column="2" Margin="10,2,10,2" Text="{Binding Path=ErrorTime}" FontFamily="Calibri" FontSize="12" />
                            <TextBlock Grid.Row="2" Grid.Column="2" Margin="10,2,10,2" Text="{Binding Path=ErrorPerson}" FontFamily="Calibri" FontSize="12" />
                            <TextBlock Grid.Row="3" Grid.Column="2" Margin="2,2,2,2" Text="{Binding Path=ShortDescription}" TextWrapping="Wrap" />
                        </Grid>
                    </Border>                            
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</GroupBox>

Solution

  • You see horizontal scroll bar because ListView uses ScrollViewer in its template to allow scrolling. All you need to do is say ScrollViewer to not scroll horizontally. Just set ScrollViewer.HorizontalScrollBarVisibility="Disabled" on your ListView. So you'll have something like this:

    <ListView Margin="6"
              ScrollViewer.HorizontalScrollBarVisibility="Disabled"
              Name="CriticalErrorsListView"
              HorizontalContentAlignment="Stretch"
              ItemsSource="{Binding Path=.}"
              MouseDoubleClick="CriticalErrorsListView_MouseDoubleClick">
         <!-- The rest goes here. -->
    </ListView>
    

    Hope this helps.