#871 – Popup Control Automatically Sizes to Fit Its Content

Because a Popup control is a ContentControl, it can contain exactly one child element.  This element might be a container that in turn contains other elements.

When you create a Popup, you don’t need to specify an explicit size.  The Popup control will automatically size to fit its content.

In the example below, both popups size to fit their content.  The first popup’s size is based on the height of the Image and the specified width of the TextBlock.  The second popup automatically sizes to fit the contained text.

        <Popup Name="popCaesar" StaysOpen="False">
            <Border BorderBrush="Blue" BorderThickness="1"
                    Background="AliceBlue">
                <StackPanel Orientation="Horizontal">
                    <Image Source="Caesar.jpg" Height="100"/>
                    <TextBlock Text="Julius Caesar was a Roman emperor who lived from 100 BC to 44 BC"
                               Margin="10"
                               Width="150" TextWrapping="Wrap"/>
                </StackPanel>
            </Border>
        </Popup>
        <Popup Name="popSmall" StaysOpen="False"
               Placement="Right" PlacementTarget="{Binding ElementName=txt}">
            <Border BorderBrush="Blue" BorderThickness="1"
                    Background="White">
                <TextBlock Text="Hi !"/>
            </Border>
        </Popup>