FrameworkElement.VerticalAlignment Property

Definition

Namespace:

Microsoft.UI.Xaml

Gets or sets the vertical alignment characteristics that are applied to a FrameworkElement when it is composed in a parent object such as a panel or items control.

public:
 property VerticalAlignment VerticalAlignment { VerticalAlignment get(); void set(VerticalAlignment value); };

VerticalAlignment VerticalAlignment();

void VerticalAlignment(VerticalAlignment value);

public VerticalAlignment VerticalAlignment { get; set; }

var verticalAlignment = frameworkElement.verticalAlignment;
frameworkElement.verticalAlignment = verticalAlignment;

Public Property VerticalAlignment As VerticalAlignment

<frameworkElement VerticalAlignment="verticalAlignmentMemberName"/>

Property Value

VerticalAlignment

A vertical alignment setting, as a value of the enumeration. The default is Stretch.

Examples

In this example, the value Center is assigned to HorizontalAlignment and VerticalAlignment to position the TextBlock elements in the center of the Grid cells.

<Grid x:Name="LayoutRoot" Background="Coral" Width="300" Height="100">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <TextBlock Grid.Column="0" Grid.Row="0" Text="First Name" 
        HorizontalAlignment="Center" VerticalAlignment="Center" />
    <TextBlock Grid.Column="0" Grid.Row="1" Text="Last Name" 
        HorizontalAlignment="Center" VerticalAlignment="Center" />
    <TextBox Grid.Column="1" Grid.Row="0" />
    <TextBox Grid.Column="1" Grid.Row="1" />

</Grid>

Remarks

Alignment properties are intended to hint the desired layout to an adaptive layout container. They're typically set on FrameworkElement children and interpreted by another FrameworkElement container parent (typically a ContentControl derived class or a Panel derived class, or perhaps a presenter). Setting alignment properties on a child element is no guarantee that anything happens; the behavior depends on the layout composition and the parent elements involved.

When the Height and Width properties are explicitly set or calculated on an object, those measurements are more important to typical layout logic, and can cancel the effects of setting VerticalAlignment to Stretch. Layout constraint properties (such as MaxHeight) also affect the maximum or minimum layout size for a Stretch layout situation. Stretch is the default so that it's easier to use adaptive layout techniques in the cases where there is no explicit measurement. But if there are either Height and Width or clipping, the layout acts as if the value is Top for VerticalAlignment, typically Left for HorizontalAlignment (Right for right-to-left culture info or explicit FlowDirection values). For more info, see Alignment, margin, and padding.

Canvas does not use VerticalAlignment when composing layout, because Canvas is based on absolute positioning. In general, the value of VerticalAlignment is potentially treated differently by any object that is capable of having one or more FrameworkElement objects as child content. Each such parent object can have its own layout logic.

Each XAML UI element might apply this property differently based on the Style setters for the implicit style. The apparent "default value" for VerticalAlignment in each UI element can be different. For example, a Button control starts with the value Center. If the UI element is a control, the VerticalAlignment value might also affect the control's visual template.

In content controls, the control template often uses {TemplateBinding} markup extension expressions to bind the VerticalContentAlignment property to a VerticalAlignment property on some element within its template, such as the presenter or the element used as the content area.

See also

• Width
• HorizontalAlignment
• Alignment, margin, and padding