How to dynamically change the height of ListBoxItem UWP? - xaml

Question

I need your help.
At this moment I'm making a notification panel. And I need to change the height of ListBoxItem in response to a number of message's lines. Here's an example.
As you can see the first notification didn't increase its height and TextBlock with timecode has just disappeared.
Here's my code sample:
<ListBox Width="350" Padding="0,0,0,10" Name="notificationArray">
<ListBoxItem Padding="10" MinHeight="80" Height="Auto" VerticalAlignment="Stretch">
<StackPanel>
<TextBlock FontSize="14" FontStyle="Italic" Foreground="Gray" Text="Channel name"/>
<TextBlock TextWrapping="WrapWholeWords" Text="This is very long notification. One, two, three, four, five, six, seven, eight, nine, ten."/>
<TextBlock Foreground="Gray" Text="HH:MM TT" FontSize="13"/>
</StackPanel>
</ListBoxItem>
</ListBox>
As you can see here, I've already tried Height="Auto" and VerticalAlignment="Stretch" but it still doesn't work. Any suggestions? Anyway, thanks in advance.
P.S. Problem is definitely in ListBoxItem. I've already experimented with ListBox and StackPanel
P.P.S Here's a lager sample:
<Popup Grid.Column="6" Margin="0,50,0,0" Name="notificationPane" LostFocus="notificationPane_LostFocus" IsOpen="False" IsLightDismissEnabled="True">
<StackPanel Width="350" Background="WhiteSmoke" Padding="0,10,0,0">
<TextBlock Text="Notifications" HorizontalAlignment="Center" FontWeight="Bold"/>
<StackPanel Margin="0,10,0,0">
<TextBlock Text="You have no any notification" Name="noNotifText" Foreground="Gray" FontStyle="Italic" Padding="10" Visibility="Visible"/>
<StackPanel Name="notificationPanel" Visibility="Collapsed">
<ListBox Width="350" Padding="0,0,0,10" Name="notificationArray">
<ListBoxItem Padding="10" MinHeight="80">
<StackPanel>
<TextBlock FontSize="14" FontStyle="Italic" Foreground="Gray" Text="Channel name"/>
<TextBlock TextWrapping="WrapWholeWords" Text="This is very long notification. One, two, three, four, five, six, seven, eight, nine, ten."/>
<TextBlock Foreground="Gray" Text="HH:MM TT" FontSize="13"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Padding="10" VerticalAlignment="Stretch" Background="LightGray" MinHeight="80" Height="100">
<StackPanel>
<TextBlock FontSize="14" FontStyle="Italic" Foreground="Gray" Text="Channel name"/>
<TextBlock TextWrapping="WrapWholeWords" Text="This is very long notification. One, two, three, four, five, six, seven, eight, nine, ten."/>
<TextBlock Foreground="Gray" Text="HH:MM TT" FontSize="13"/>
</StackPanel>
</ListBoxItem>
</ListBox>
<Button Content="Clear all" HorizontalAlignment="Right" Margin="10,0,10,10"/>
</StackPanel>
</StackPanel>
</StackPanel>
</Popup>

Answer 1

I download your whole project from the development branch that you uploaded to the GitHub and find the issue. Since you defined defined the global style for the ListBoxItem in App.xaml of the project, which set the Height property of ListBoxItem as 50 that limited the ListBoxItem to show the content.
To resolve your issue, commented this style, or set a fixed height for the first ListBoxItem as you did for the second one, or set a larger MinHeight for the first item.
<Application.Resources>
<!--<Style TargetType="ListBoxItem">
<Setter Property="Height" Value="50"/>
</Style>-->
<Style TargetType="TextBlock" x:Key="ItemIcon">
<Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Margin" Value="5,5,20,2"/>
</Style>
...
</Application.Resources>