WPF Popup控件渲染为黑框而非预期表单的问题咨询

问题原因 #

你遇到的Popup内容被裁剪问题有两个核心诱因：

1. Popup被嵌套在设置了Height="30"的ToggleButton内部，按钮的固定高度对内容产生了裁剪约束，所有超出30px高度的Popup内容都会被截断
2. 根Grid只定义了2列，但是后续ListView指定了Grid.Column="2"，存在布局索引不匹配的问题，也会影响整体布局渲染

解决方案 #

第一步：调整Popup的嵌套层级 #

将Popup从ToggleButton的内部内容中移出，和ToggleButton同级放置，脱离按钮的高度裁剪约束，同时给Popup添加位置锚定、宽高相关属性：

<ToggleButton x:Name="TogglePopupButton" Height="30" Width="150" HorizontalAlignment="Left">
    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
        <Run Text="Is button toggled? " />
        <Run Text="{Binding IsChecked, ElementName=TogglePopupButton}" />
    </TextBlock>
</ToggleButton>

<!-- Popup和按钮同级放置 -->
<Popup Name="myPopup" 
       IsOpen="{Binding IsChecked, ElementName=TogglePopupButton}"
       Placement="Bottom"
       PlacementTarget="{Binding ElementName=TogglePopupButton}"
       Width="320"
       StaysOpen="False">
    <Grid Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Label Margin="0,10,0,0">Name:</Label>
        <TextBox Grid.Column="1" Margin="0,10,10,10" x:Name="nameInput"/>
        <Label Grid.Row="1">Amount:</Label>
        <TextBox Grid.Row="1" Grid.Column="1" Margin="0,0,10,10" x:Name="amountInput"/>
        <Label Grid.Row="2">Notes:</Label>
        <TextBox Grid.Row="2" Grid.Column="1" AcceptsReturn="True" x:Name="notesInput" MinHeight="60" Margin="0,0,10,10"/>
        <Button Click="submit" Grid.Row="3" Grid.Column="1" Content="Submit" HorizontalAlignment="Right" Margin="0 0 10 10"/>
    </Grid>
</Popup>

第二步：修正根Grid的列定义 #

给根Grid补全第三列的定义，匹配ListView的列索引：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" /> <!-- 新增第三列 -->
</Grid.ColumnDefinitions>

修改后Popup就可以完整显示所有表单内容，布局也不会出现错位。

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