如何动态改变 ListBoxItem UWP 的高度？答案

【问题标题】：How to dynamically change the height of ListBoxItem UWP?如何动态改变 ListBoxItem UWP 的高度？
【发布时间】：2018-09-13 05:52:18
【问题描述】：

我需要你的帮助。

此时我正在制作一个通知面板。我需要更改ListBoxItem 的高度以响应许多消息行。 Here's an example。如您所见，第一个通知没有增加它的高度，而带有时间码的TextBlock 刚刚消失了。

这是我的代码示例：

<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>

正如您在此处看到的，我已经尝试过Height="Auto" 和VerticalAlignment="Stretch"，但仍然无法正常工作。有什么建议？无论如何，提前谢谢。

附：问题肯定出在ListBoxItem。我已经尝试过ListBox 和StackPanel

P.P.S 这是一个更大的样本：

<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>

【问题讨论】：

您的代码 sn-p 不足以重现该问题，您能否上传更多 XAML 代码？你如何添加数据？顺便把VerticalAlignment改成VerticalContentAlignment="Stretch"试试。
1.额外的代码是绝对不必要的，但在这里。 2. 目前我没有以编程方式添加任何数据。我只是在为应用程序编写一个 UI 基础。 3. 已经试过了。只是忘了提
我删除了弹出窗口进行测试；但真的不能复制？你能添加更多你看到的信息吗（截图？）？
@DaveSmits 这是screenshot。这是我的GitHub repo，以防万一（开发分支）。
@XFox 它完美地展示给我。没有隐藏文本块

标签： xaml uwp windows-10-universal uwp-xaml

【解决方案1】：

我从您上传到 GitHub 的开发分支下载了您的整个项目并找到了问题。由于您在项目的App.xaml 中定义了ListBoxItem 的全局样式，将ListBoxItem 的Height 属性设置为50，从而限制ListBoxItem 显示内容。

要解决您的问题，请评论此样式，或为第一个 ListBoxItem 设置一个固定高度，就像为第二个所做的一样，或为第一个项目设置一个更大的 MinHeight。

<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>

【讨论】：