Resizing issue with ListItem in WPF ListBox during resizing

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:

  1. How can I fix this resizing issue.
  2. Even though the comment is being wrapped and trimmed. No Ellipses are being shown at the end.

PS: My app is an Outlook Addin.

Image1 Image3

Answers


The property ScrollViewer.HorizontalScrollBarVisibility on the listBox should be disabled instead of hidden.


Need Your Help

How do I grep for all non-ASCII characters?

regex unix unicode grep

I have several very large XML files and I'm trying to find the lines that contain non-ASCII characters. I've tried the following:

push in priorityqueue

java collections queue priority-queue

I want to push some int to a priorityqueue but i can't! i used the queue.add() code but this code will return the sorted queue,please help,thank you!