[WPF] ListBox with ItemTemplate - keeping items same size and trimming content

[NickThissen]

Hi,

I have a ListBox that shows a list of errors in a logfile. I am using an item template so I can show three things: an image (that shows whether this was an error, warning or just a message), the date/time and the message.

The XAML is:

<ListBox Name="lstErrors" Grid.Row="1" Grid.Column="0" Margin="6">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border Margin="4" BorderThickness="1" BorderBrush="SteelBlue" CornerRadius="3">
                        <StackPanel Orientation="Horizontal">
                            <Image Name="imgError" Margin="6" 
                                Source="/WpfLogfileReader;component/Images/109_AllAnnotations_Error_256x256.png" 
                                Width="24" Height="24" />
 
                            <StackPanel>
                                <TextBlock FontWeight="Bold" Text="{Binding Path=Date}" />
                                <TextBlock Text="{Binding Path=Message}" />
                            </StackPanel>                                
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

For now I am hardcoding the image, doesn't matter for my question.

The problem now is when the Message is long. The items with long messages are stretched (while the smaller items remain small), and the entire ListBox (actually, the entire grid cell the listbox is in) is stretched:

This is not what I wanted. I want my ListBox to stay the same size regardless of the size of the items.

I can 'hardcode' this behavior by simply setting the Width property of the listbox to, say, 200. I don't want to do this however, because the ListBox should be able to stretch when the window is stretched (but not when the items are too large). And anyway, the book I'm reading suggests never to hardcode sizes like this and always use the appropriate layout controls so that my windows can be resized properly.
In each case, even if I do simply set the width to 200, the items still don't match up. They now simply hide behind the listbox boundary:


What I really want is this: the items are all equal size (the size of the listbox minus some margin) even if their content is smaller or larger. If it is larger the text should be 'cut off', if possible with some ellipsis at the end (as I drew) but if it just stops mid sentence that would be fine too I guess.
Note this is a photoshop, as I can't manage VS to do it this way...



How do I make my ListBox behave this way?
Thanks!

[Arrow_Raider]

HorizontalContentAlignment on the ListBox must be set to "Stretch." By default it is "Left." This will cause your content to stretch to the parent control size. Next, you have to disable horizontal scrolling. Otherwise, the content can grow indefinitely in the horizontal direction. Also, you can't use a horizontal StackPanel if you want to limit the size of an element in the horizontal direction. I replaced that StackPanel with a Grid. Finally, to enable text trimming with the ellipsis effect, the TextTrimming property is set to CharacterEllipsis on the message TextBlock.

Here is the final resultant xaml:

<ListBox Name="lstErrors"
                 Grid.Row="1"
                 Grid.Column="0"
                 Margin="6"
                 HorizontalContentAlignment="Stretch"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border Margin="4"
                            BorderThickness="1"
                            BorderBrush="SteelBlue"
                            CornerRadius="3">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Name="imgError"
                                   Margin="6"
                                   Source="/WpfLogfileReader;component/Images/109_AllAnnotations_Error_256x256.png"
                                   Width="24"
                                   Height="24" />
                            <StackPanel Grid.Column="1">
                                <TextBlock FontWeight="Bold"
                                           Text="{Binding Path=Date}" />
                                <TextBlock Text="{Binding Path=Message}"
                                           TextTrimming="CharacterEllipsis" />
                            </StackPanel>
                        </Grid>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>