UWP中如何动态调整ListBoxItem的高度？

嘿，我帮你梳理下遇到的这两个问题，咱们一步步来解决：

1. 第一条通知未自动增高的原因及解决 #

默认情况下，ListBoxItem虽然设置了Height="Auto"，但如果内容没有触发换行或者Item本身的垂直对齐没设置对，可能不会自动撑开高度。你可以试试这两个调整：

• 给ListBox设置ItemContainerStyle，确保ListBoxItem的内容能垂直拉伸：

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <Setter Property="Padding" Value="10"/>
        <Setter Property="MinHeight" Value="80"/>
        <Setter Property="Height" Value="Auto"/>
        <!-- 让内容填满Item的垂直空间 -->
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    </Style>
</ListBox.ItemContainerStyle>

• 给显示消息的TextBlock开启自动换行：
  如果消息文本太长但没换行，高度不会变化，所以一定要给消息TextBlock加上TextWrapping="Wrap"：

<TextBlock Text="{Binding YourMessageContent}" TextWrapping="Wrap" Margin="0,0,0,5"/>

2. 时间码TextBlock消失的排查方向 #

时间码消失大概率是布局挤压或者隐藏设置问题，你可以从这几点检查：

• 检查Visibility属性：确认时间码TextBlock没有被设置为Visibility="Collapsed"，或者绑定了错误的布尔值导致隐藏。
• 调整StackPanel布局：如果你的StackPanel是Orientation="Horizontal"，时间码可能被消息文本挤到看不见，改成默认的Vertical就能让消息和时间码上下排列。
• 给时间码加Margin：避免被其他元素覆盖，比如设置Margin="0,5,0,0"让它和消息保持间距，再加上HorizontalAlignment="Right"让它靠右显示：

<TextBlock Text="{Binding TimeCode}" HorizontalAlignment="Right" Margin="0,5,0,0"/>

完整示例代码 #

把这些调整整合起来，你可以试试这个完整的示例：

<ListBox Width="350" Padding="0,0,0,10" Name="notificationArray">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Padding" Value="10"/>
            <Setter Property="MinHeight" Value="80"/>
            <Setter Property="Height" Value="Auto"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        </Style>
    </ListBox.ItemContainerStyle>
    <!-- 第一条测试通知（长文本） -->
    <ListBoxItem>
        <StackPanel>
            <TextBlock Text="这是一条很长的测试消息，用来验证多行文本是否能撑开ListBoxItem的高度，看看会不会自动增高显示完整内容，确保所有文字都能被用户看到" TextWrapping="Wrap"/>
            <TextBlock Text="2024-05-20 14:30" HorizontalAlignment="Right" Margin="0,5,0,0"/>
        </StackPanel>
    </ListBoxItem>
    <!-- 第二条测试通知（短文本） -->
    <ListBoxItem>
        <StackPanel>
            <TextBlock Text="这是一条短消息" TextWrapping="Wrap"/>
            <TextBlock Text="2024-05-20 14:31" HorizontalAlignment="Right" Margin="0,5,0,0"/>
        </StackPanel>
    </ListBoxItem>
</ListBox>

这样设置后，长文本的通知会自动增高，时间码也能稳定显示在右下角啦～

内容的提问来源于stack exchange，提问作者user8171157