Most simple FrameworkElement to handle HorizontalAlignment and VerticalAlignment?

Question

This is Silverlight.

Initial goal is to display a random element in a Popup with some VerticalAlignment and HorizontalAlignment. I do not want to use VerticalOffset or HorizontalOffset, because there is more to what I really want to do, including some complex bindings.

First attempt was:

<Popup>
    <Button
        Height="135"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Bottom" />
</Popup>

Second attempt was:

<Popup
    Height="135"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Bottom">
    <Button />
</Popup>

Both were a failure: the Button was always on Top and not Stretch (HorizontalAlignment and VerticalAlignment didn't work).

So I had the idea to encapsulate the element in a simple FrameworkElement:

<Popup>
    <Border>
        <Button
            Height="135"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Bottom" />
    </Border>
</Popup>

And it is working.

But I had to use Border in this example, when I could have done it with Grid and many other FrameworkElement (but not with Canvas or Viewbox or Popup). I'd like to know what is the most simple, efficient and processor-friendly transparent FrameworkElement to encapsulate another element with working HorizontalAlignment and VerticalAlignment? Is it:

Border? (like the above example)
UserControl?
ContentControl?
ContentContainer?
some custom and basic MyFrameworkElement? (might need help for most basic implementation)
something else like Grid?

Whenever I need a "wrapper element" I use the Border. By default the BorderThickness is 0 and no Background is set. — Martin
@Martin Currently I hesitate between Border, UserControl, ContentControl and ContentContainer. I'm giving a try to ContentContainer as it got less properties than others. — Cœur

Unknown Unknown · Accepted Answer · 2014-09-11T14:45:15

WPF controls come in two flavors: Ones that interact with users (like accept user clicks like a button, or display text like a text block) and containers that control placement and layout of the previous ones.

Container controls are usually designed to lay out their children in a specific manner. For example, Canvases lay out children by X, Y, Width & Height values. Each one has a specific use, so you must read the documentation or tutorials for these container controls and understand how each works in order to select the appropriate one for a task.

In your case, you want the button to fill all available space in the popup (it seems, it isn't that clear). I know that the Grid does this by default. So I would do the following:

<Popup><Grid><Button /></Grid></Popup>

Most simple FrameworkElement to handle HorizontalAlignment and VerticalAlignment?

1 Answers