WPF Popup控件自动调整大小及添加滚动条问题求助

嘿，作为WPF新手碰到这个Popup尺寸的问题太正常了！Canvas确实是个“倔脾气”——它只认你给的固定宽高，不会管里面内容有多少。不过没关系，咱们有两个方向可以解决你的需求：要么让Popup跟着内容自动调整大小，要么给它加上滚动条应对长内容。

一、让Popup自适应内容尺寸（替换Canvas） #

既然Canvas不支持自适应，咱们直接把它换成Grid或者StackPanel这类支持自动布局的容器就行。这里我用Grid来演示，还能顺便保留你的自定义形状背景，同时让Label和TextBlock自动排列：

<Popup Name="PopupRemark" AllowsTransparency="True" Placement="Left" HorizontalOffset="45" VerticalOffset="-22" 
       PlacementTarget="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ToggleButton}}" 
       IsOpen="{Binding IsChecked, ElementName=btnInfo}" StaysOpen="False" >
    <!-- 用Grid替换Canvas，Grid会自动根据子元素大小调整自身尺寸 -->
    <Grid Background="Transparent">
        <!-- 把自定义Path作为Grid的背景层，自动适配Grid的大小 -->
        <Path x:Name="Container" Fill="#f2f6f7" Stroke="#A9A9A9" 
              Data="M 230,40 L220,50 220,90 0,90 0,0 220,0 220,30 230,40">
            <Path.Effect>
                <DropShadowEffect BlurRadius="18" Color="Black" Opacity="0.4"/>
            </Path.Effect>
        </Path>
        <!-- 用StackPanel垂直排列标题和内容，自动适配宽度与高度 -->
        <StackPanel Margin="5,0,10,5">
            <Label FontSize="13" FontWeight="Bold" FontFamily="Roboto" Content="Remark" 
                   HorizontalAlignment="Left" VerticalAlignment="Center"/>
            <TextBlock Width="210" Text="{Binding Remark}" Foreground="#2c3e50" 
                       FontFamily="Roboto" FontSize="11" TextWrapping="Wrap"/>
        </StackPanel>
    </Grid>
</Popup>

关键改动说明： #

• 替换Canvas为Grid：Grid会根据内部元素的总尺寸自动调整自身宽高，Popup也就会跟着Grid的大小动态变化。
• Path作为背景层：利用Grid的层叠特性，Path会自动扩展到能容纳内容的尺寸，同时不会遮挡上方的文本内容。
• 文本自动换行：TextBlock开启TextWrapping="Wrap"后，内容到设定宽度会自动换行，Grid的高度也会跟着文本行数增加。

二、给Popup添加滚动条（应对超长内容） #

如果你的Remark内容特别长，即使自适应尺寸也会导致Popup过大，那咱们就给内容套一个ScrollViewer，让超出部分可以滚动查看：

<Popup Name="PopupRemark" AllowsTransparency="True" Placement="Left" HorizontalOffset="45" VerticalOffset="-22" 
       PlacementTarget="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ToggleButton}}" 
       IsOpen="{Binding IsChecked, ElementName=btnInfo}" StaysOpen="False" >
    <Grid Background="Transparent">
        <Path x:Name="Container" Fill="#f2f6f7" Stroke="#A9A9A9" 
              Data="M 230,40 L220,50 220,90 0,90 0,0 220,0 220,30 230,40">
            <Path.Effect>
                <DropShadowEffect BlurRadius="18" Color="Black" Opacity="0.4"/>
            </Path.Effect>
        </Path>
        <!-- 用ScrollViewer包裹内容，限制最大高度并启用滚动 -->
        <ScrollViewer Margin="5,0,10,5" MaxHeight="200" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
            <StackPanel>
                <Label FontSize="13" FontWeight="Bold" FontFamily="Roboto" Content="Remark" 
                       HorizontalAlignment="Left" VerticalAlignment="Center"/>
                <TextBlock Width="210" Text="{Binding Remark}" Foreground="#2c3e50" 
                           FontFamily="Roboto" FontSize="11" TextWrapping="Wrap"/>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Popup>

关键改动说明： #

• 包裹ScrollViewer：设置MaxHeight限制Popup的最大高度，当内容超过这个高度时，垂直滚动条会自动出现（VerticalScrollBarVisibility="Auto"）。
• 禁用水平滚动：配合TextBlock的TextWrapping="Wrap"，确保内容只会换行而不会横向溢出，避免出现多余的水平滚动条。

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