#880 – Adding an Offset When Positioning a Popup

August 7, 2013 1 Comment

When you position a Popup control, you can add horizontal or vertical offsets to move the Popup away from its target position.

The popup’s HorizontalOffset property indicates how far to move the popup left or right.  A positive value will move the popup to the right and a negative value will move it to the left.

The popup’s VerticalOffset property indicates how far to move the popup up or down.  A positive value will move the popu down and a negative value will move it up.

In the example below, the Popup is placed relative to the bottom of a Button.  It’s then moved 10 units to the right and 5 units down.

        <Popup Name="popCaesar" StaysOpen="False"
               PlacementTarget="{Binding ElementName=btnLearn}"
               Placement="Bottom"
               HorizontalOffset="10" VerticalOffset="5">
            <Border BorderBrush="DarkBlue" BorderThickness="1"
                    Background="AntiqueWhite">
                <TextBlock Text="The seething sea ceaseth and thus the seething sea sufficeth us."
                            Padding="5" Width="160"
                            TextWrapping="Wrap"/>
            </Border>
        </Popup>

880-001

Advertisement

Filed under Controls Tagged with , , , , ,

#329 – Principles of Layout in WPF

June 27, 2011 2 Comments

WPF uses a flow-based layout model by default, where child elements are placed in a container and explicitly positioned based on their content.  This is as opposed to coordinate-based layout, where controls are given specific sizes and positions.

Parent containers (deriving from Panel) are responsible for figuring out both the size and position of all of their child controls.

In general, we following the following layout principles in WPF:

  • Don’t give controls a specific size, but let them size to fit their content
  • Don’t give controls a specific location, but let the parent container position them
  • Layout containers can be nested inside of other layout containers

Filed under Layout Tagged with , , , , ,