I am trying to render an activity feed kind of an UI using a

Question

0

Asked: June 8, 20262026-06-08T11:00:51+00:00 2026-06-08T11:00:51+00:00

I am trying to render an activity feed kind of an UI using a

0

I am trying to render an activity feed kind of an UI using a listBox in WPF. The listBox is perfectly rendering and resizes itself as the window is being resized. However, the inner items were not wrapping its contents as they should be. So, I set the width of the inner Grid to be the ActualWidth of the listBox. Here’s my XAML and some screenshots to explain what I am trying to acheive.

<Grid x:Class="MyAddin.WPFControls"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:c="clr-namespace:MyAddin"
         mc:Ignorable="d" Background="Transparent"
         HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="False" d:DesignHeight="221" d:DesignWidth="275">
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Stretch" 
           IsManipulationEnabled="True" Grid.Row="0" 
           Height="20" Grid.ColumnSpan="5" TextAlignment="Right" Padding="0,0,5,0" Margin="0,5,0,0" FontSize="14" FontStyle="Normal" FontWeight="ExtraLight">Activity Feed</TextBlock>
<ListBox Grid.Row="1" Name="listBox1" IsSynchronizedWithCurrentItem="True" 
         ScrollViewer.HorizontalScrollBarVisibility="Hidden"
         VerticalContentAlignment="Stretch" ItemContainerStyle="{StaticResource ContainerStyle}" 
         AlternationCount="2" HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid MaxWidth="{Binding ElementName=listBox1, Path=ActualWidth}" Height="40">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="34"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                    <Border Grid.Column="0">
                        <Image Source="{Binding Path=AvatarURL}" Stretch="Fill" Width="32" Height="32" />
                    </Border>
                    <StackPanel Grid.Column="1">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Path=FirstName }" TextBlock.FontWeight="Bold" 
                                   HorizontalAlignment="Left" />
                        <TextBlock><Bold> - </Bold></TextBlock>
                            <TextBlock Text="{Binding Path=TS}" TextWrapping="Wrap" 
                                   TextTrimming="WordEllipsis" FontSize="9" Margin="0,2,0,0" FontWeight="ExtraLight" />
                        </StackPanel>
                        <TextBlock Text="{Binding Path=Comment}" TextWrapping="Wrap" 
                               TextTrimming="CharacterEllipsis" HorizontalAlignment="Stretch" 
                               VerticalAlignment="Top" Padding="0,0,5,0"/>
                    </StackPanel>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

and it gets rendered as image 1. If I re-size my window, the listbox contents are wrapped as I expect them. However when I resize the window back, the layout is broken as seen in image 3. I need help with solving 2 problems here: