StackPanel StackPanel StackPanel StackPanel Class

Definition

Some information relates to pre-released product which may be substantially modified before it’s commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.

Prerelease APIs are identified by a Prerelease label.

[Contains prerelease APIs.]
Arranges child elements into a single line that can be oriented horizontally or vertically.

public : class StackPanel : Panel, IInsertionPanel, IStackPanel, IStackPanel2, IScrollSnapPointsInfopublic class StackPanel : Panel, IInsertionPanel, IStackPanel, IStackPanel2, IScrollSnapPointsInfoPublic Class StackPanel Inherits Panel Implements IInsertionPanel, IStackPanel, IStackPanel2, IScrollSnapPointsInfo// This API is not available in Javascript.
<StackPanel .../>
-or-
<StackPanel ...>
  oneOrMoreChildren
</StackPanel>

Inheritance
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited properties

Inherited events

Inherited methods

Examples

The following example shows how to create a StackPanel of items.

<StackPanel Margin="20">
    <Rectangle Fill="Red" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Blue" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Green" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Purple" Width="50" Height="50" Margin="5" />
</StackPanel>
<Grid x:Name="LayoutRoot"  Width="500" Height="500">
    <StackPanel x:Name="MyStackPanel">
        <TextBlock x:Name="TB1" Text="First Name" Width="77" HorizontalAlignment="Left"/>
        <TextBlock x:Name="TB2" Text="Last Name" Width="78" HorizontalAlignment="Left"/>
        <TextBlock x:Name="TB3" Text="Address" Width="60" HorizontalAlignment="Left"/>
    </StackPanel>
</Grid>
private void Rearrange()
{
    TextBlock TB4 = new TextBlock();
    TB4.Text = "Age";
    MyStackPanel.Children.Insert(2, TB4);
    
}
Private Sub Rearrange()
    Dim TB4 As New TextBlock()
    TB4.Text = "Age"
    MyStackPanel.Children.Insert(2, TB4)
End Sub

Remarks

StackPanel is a layout panel that arranges child elements into a single line that can be oriented horizontally or vertically.

Stack panel layout control

By default, StackPanel stacks items vertically from top to bottom in the order they are declared. You can set the Orientation property to Horizontal to stack items from left to right.

You can insert items into a StackPanel at a specific location using the Insert method in code-behind.

Tip

Starting in Windows 10, StackPanel defines new border properties that let you draw a border around the StackPanel without using an additional Border element. The new properties are StackPanel.BorderBrush, StackPanel.BorderThickness, StackPanel.CornerRadius, and StackPanel.Padding.

<StackPanel BorderBrush="Red" BorderThickness="2" CornerRadius="10" Padding="12">
    <TextBlock Text="Hello World!"/>
</StackPanel>

Constructors

StackPanel() StackPanel() StackPanel() StackPanel()

Initializes a new instance of the StackPanel class.

public : StackPanel()public StackPanel()Public Sub New()// This API is not available in Javascript.

Properties

AreHorizontalSnapPointsRegular AreHorizontalSnapPointsRegular AreHorizontalSnapPointsRegular AreHorizontalSnapPointsRegular

Gets a value that indicates whether the horizontal snap points for the StackPanel are equidistant from each other.

public : PlatForm::Boolean AreHorizontalSnapPointsRegular { get; }public bool AreHorizontalSnapPointsRegular { get; }Public ReadOnly Property AreHorizontalSnapPointsRegular As bool// This API is not available in Javascript.
Value
PlatForm::Boolean bool bool bool

true if the horizontal snap points for the StackPanel are equidistant from each other; otherwise, false.

AreScrollSnapPointsRegular AreScrollSnapPointsRegular AreScrollSnapPointsRegular AreScrollSnapPointsRegular

Gets or sets a value that indicates whether the generated snap points used for panning in the StackPanel are equidistant from each other.

public : PlatForm::Boolean AreScrollSnapPointsRegular { get; set; }public bool AreScrollSnapPointsRegular { get; set; }Public ReadWrite Property AreScrollSnapPointsRegular As bool// This API is not available in Javascript.
<StackPanel AreScrollSnapPointsRegular="bool" .../>
Value
PlatForm::Boolean bool bool bool

true if the snap points in the StackPanel are equidistant from each other; otherwise, false.

AreScrollSnapPointsRegularProperty AreScrollSnapPointsRegularProperty AreScrollSnapPointsRegularProperty AreScrollSnapPointsRegularProperty

Identifies the AreScrollSnapPointsRegular dependency property.

public : static DependencyProperty AreScrollSnapPointsRegularProperty { get; }public static DependencyProperty AreScrollSnapPointsRegularProperty { get; }Public Static ReadOnly Property AreScrollSnapPointsRegularProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the AreScrollSnapPointsRegular dependency property.

AreVerticalSnapPointsRegular AreVerticalSnapPointsRegular AreVerticalSnapPointsRegular AreVerticalSnapPointsRegular

Gets a value that indicates whether the vertical snap points for the StackPanel are equidistant from each other.

public : PlatForm::Boolean AreVerticalSnapPointsRegular { get; }public bool AreVerticalSnapPointsRegular { get; }Public ReadOnly Property AreVerticalSnapPointsRegular As bool// This API is not available in Javascript.
Value
PlatForm::Boolean bool bool bool

true if the vertical snap points for the StackPanel are equidistant from each other; otherwise, false.

BorderBrush BorderBrush BorderBrush BorderBrush

Gets or sets a brush that describes the border fill of the panel.

public : Brush BorderBrush { get; set; }public Brush BorderBrush { get; set; }Public ReadWrite Property BorderBrush As Brush// This API is not available in Javascript.
<Border BorderBrush="{StaticResource resourceName}"/>

Value
Brush Brush Brush Brush

The brush that is used to fill the panel's border. The default is null, (a null brush) which is evaluated as Transparent for rendering.

Remarks

The BorderThickness value must be greater than 0 in order to see the BorderBrush value take effect.

BorderBrushProperty BorderBrushProperty BorderBrushProperty BorderBrushProperty

Identifies the BorderBrush dependency property.

public : static DependencyProperty BorderBrushProperty { get; }public static DependencyProperty BorderBrushProperty { get; }Public Static ReadOnly Property BorderBrushProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the BorderBrush dependency property.

See Also

BorderThickness BorderThickness BorderThickness BorderThickness

Gets or sets the border thickness of the panel.

public : Thickness BorderThickness { get; set; }public Thickness BorderThickness { get; set; }Public ReadWrite Property BorderThickness As Thickness// This API is not available in Javascript.
<StackPanel BorderThickness="uniform"/>
- or -
<StackPanel BorderThickness="left&right,top&bottom"/>
- or -
<StackPanel BorderThickness="left,top,right,bottom"/>
Value
Thickness Thickness Thickness Thickness

The border thickness of the panel, as a Thickness value.

BorderThicknessProperty BorderThicknessProperty BorderThicknessProperty BorderThicknessProperty

Identifies the BorderThickness dependency property.

public : static DependencyProperty BorderThicknessProperty { get; }public static DependencyProperty BorderThicknessProperty { get; }Public Static ReadOnly Property BorderThicknessProperty As DependencyProperty// This API is not available in Javascript.
See Also

CornerRadius CornerRadius CornerRadius CornerRadius

Gets or sets the radius for the corners of the panel's border.

public : CornerRadius CornerRadius { get; set; }public CornerRadius CornerRadius { get; set; }Public ReadWrite Property CornerRadius As CornerRadius// This API is not available in Javascript.
<StackPanel CornerRadius="uniformRadius"/>
- or -
<StackPanel CornerRadius="topLeft,topRight,bottomRight,bottomLeft"/>

Value
CornerRadius CornerRadius CornerRadius CornerRadius

The degree to which the corners are rounded, expressed as values of the CornerRadius structure.

Remarks

Member components of a CornerRadius value cannot be negative.

CornerRadiusProperty CornerRadiusProperty CornerRadiusProperty CornerRadiusProperty

Identifies the CornerRadius dependency property.

public : static DependencyProperty CornerRadiusProperty { get; }public static DependencyProperty CornerRadiusProperty { get; }Public Static ReadOnly Property CornerRadiusProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the CornerRadius dependency property.

See Also

Orientation Orientation Orientation Orientation

Gets or sets the dimension by which child elements are stacked.

public : Orientation Orientation { get; set; }public Orientation Orientation { get; set; }Public ReadWrite Property Orientation As Orientation// This API is not available in Javascript.
<StackPanel Orientation="Horizontal"/>
-or-
<StackPanel Orientation="Vertical"/>
Value
Orientation Orientation Orientation Orientation

One of the enumeration values that specifies the orientation of child elements. The default is Vertical.

Examples

The following example creates a horizontal list of items by setting the Orientation property to Horizontal.

<StackPanel Orientation="Horizontal" Margin="20">
    <Rectangle Fill="Red" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Blue" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Green" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Purple" Width="50" Height="50" Margin="5" />
</StackPanel>
-->

OrientationProperty OrientationProperty OrientationProperty OrientationProperty

Identifies the Orientation dependency property.

public : static DependencyProperty OrientationProperty { get; }public static DependencyProperty OrientationProperty { get; }Public Static ReadOnly Property OrientationProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the Orientation dependency property.

Padding Padding Padding Padding

Gets or sets the distance between the border and its child object.

public : Thickness Padding { get; set; }public Thickness Padding { get; set; }Public ReadWrite Property Padding As Thickness// This API is not available in Javascript.
Value
Thickness Thickness Thickness Thickness

The dimensions of the space between the border and its child as a Thickness value. Thickness is a structure that stores dimension values using pixel measures.

Remarks

A related property is Margin (a property of FrameworkElement ). For more info about the relationship between margin and padding, see Alignment, margin, and padding or Define layouts with XAML.

PaddingProperty PaddingProperty PaddingProperty PaddingProperty

Identifies the Padding dependency property.

public : static DependencyProperty PaddingProperty { get; }public static DependencyProperty PaddingProperty { get; }Public Static ReadOnly Property PaddingProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the Padding dependency property.

See Also

Spacing Spacing Spacing Spacing

Prerelease. Gets or sets the distance (in pixels) between stacked items.

public : double Spacing { get; set; }public double Spacing { get; set; }Public ReadWrite Property Spacing As double// This API is not available in Javascript.
<StackPanel Spacing="double"/>

Value
double double double double

The distance (in pixels) between stacked items.

Additional features and requirements
Device family
Windows 10 Insider Preview (introduced v10.0.16257.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v5)

SpacingProperty SpacingProperty SpacingProperty SpacingProperty

Prerelease. Identifies the Spacing dependency property.

public : static DependencyProperty SpacingProperty { get; }public static DependencyProperty SpacingProperty { get; }Public Static ReadOnly Property SpacingProperty As DependencyProperty// This API is not available in Javascript.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the Spacing dependency property.

Additional features and requirements
Device family
Windows 10 Insider Preview (introduced v10.0.16257.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v5)

Methods

GetInsertionIndexes(Point, Int32, Int32) GetInsertionIndexes(Point, Int32, Int32) GetInsertionIndexes(Point, Int32, Int32) GetInsertionIndexes(Point, Int32, Int32)

Returns the index values of the items that the specified point is between.

public : void GetInsertionIndexes(Point position, int first, int second)public void GetInsertionIndexes(Point position, Int32 first, Int32 second)Public Function GetInsertionIndexes(position As Point, first As Int32, second As Int32) As void// This API is not available in Javascript.
Parameters
position
Point Point Point Point

The point for which to get insertion indexes.

first
int Int32 Int32 Int32

The index of the item before the specified point.

second
int Int32 Int32 Int32

The index of the item after the specified point.

Additional features and requirements
Device family
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v3)

Remarks

Call this method when handling a DragOver event to return the indices of the two items between which the DragOver is happening and where a potential drop and insertion would happen.

Version compatibility

The GetInsertionIndexes method is not available prior to Windows 10, version 1607. If your app’s 'minimum platform version' setting in Microsoft Visual Studio is less than the 'introduced version' shown in the Requirements block later in this page, you must design and test your app to account for this. For more info, see Version adaptive code.

To avoid exceptions when your app runs on previous versions of Windows 10, do not call this method without first performing a runtime check. This example shows how to use the ApiInformation class to check for the presence of this method before you use it.

<StackPanel AllowDrop="True" DragOver="StackPanel_DragOver">
private void StackPanel_DragOver(object sender, DragEventArgs e)
{
    if (ApiInformation.IsMethodPresent("Windows.UI.Xaml.Controls.StackPanel", "GetInsertionIndexes"))
    {
        StackPanel stackPanel = sender as StackPanel;
        if (stackPanel != null)
        {
            int preceedingIndex;
            int subsequentIndex;
            stackPanel.GetInsertionIndexes(e.GetPosition(stackPanel), out preceedingIndex, out subsequentIndex);
        }
    }
}

GetIrregularSnapPoints(Orientation, SnapPointsAlignment) GetIrregularSnapPoints(Orientation, SnapPointsAlignment) GetIrregularSnapPoints(Orientation, SnapPointsAlignment) GetIrregularSnapPoints(Orientation, SnapPointsAlignment)

Returns the set of distances between irregular snap points for a specified orientation and alignment.

public : IVectorView<float> GetIrregularSnapPoints(Orientation orientation, SnapPointsAlignment alignment)public IReadOnlyList<float> GetIrregularSnapPoints(Orientation orientation, SnapPointsAlignment alignment)Public Function GetIrregularSnapPoints(orientation As Orientation, alignment As SnapPointsAlignment) As IReadOnlyList( Of float )// This API is not available in Javascript.
Parameters
orientation
Orientation Orientation Orientation Orientation

The orientation (dimension) for the desired snap point set.

alignment
SnapPointsAlignment SnapPointsAlignment SnapPointsAlignment SnapPointsAlignment

The alignment to use when applying the snap points.

Returns
IVectorView<float> IReadOnlyList<float> IReadOnlyList<float> IReadOnlyList<float>

The read only collection of snap point distances. Returns an empty collection when no snap points are present.

GetRegularSnapPoints(Orientation, SnapPointsAlignment, Single) GetRegularSnapPoints(Orientation, SnapPointsAlignment, Single) GetRegularSnapPoints(Orientation, SnapPointsAlignment, Single) GetRegularSnapPoints(Orientation, SnapPointsAlignment, Single)

Gets the distance between regular snap points for a specified orientation and alignment.

public : float GetRegularSnapPoints(Orientation orientation, SnapPointsAlignment alignment, float offset)public float GetRegularSnapPoints(Orientation orientation, SnapPointsAlignment alignment, Single offset)Public Function GetRegularSnapPoints(orientation As Orientation, alignment As SnapPointsAlignment, offset As Single) As float// This API is not available in Javascript.
Parameters
orientation
Orientation Orientation Orientation Orientation

The orientation/dimension for the desired snap point set.

alignment
SnapPointsAlignment SnapPointsAlignment SnapPointsAlignment SnapPointsAlignment

The alignment to use when applying the snap points.

offset
float Single Single Single

Out parameter. The offset of the first snap point.

Returns
float float float float

The distance between the equidistant snap points. Returns 0 when no snap points are present.

Events

HorizontalSnapPointsChanged HorizontalSnapPointsChanged HorizontalSnapPointsChanged HorizontalSnapPointsChanged

Occurs when the measurements for horizontal snap points change.

public : event EventHandler HorizontalSnapPointsChanged<object>public event EventHandler HorizontalSnapPointsChanged<object>Public Event HorizontalSnapPointsChanged<object>// This API is not available in Javascript.
<StackPanel HorizontalSnapPointsChanged="eventhandler" />

VerticalSnapPointsChanged VerticalSnapPointsChanged VerticalSnapPointsChanged VerticalSnapPointsChanged

Occurs when the measurements for vertical snap points change.

public : event EventHandler VerticalSnapPointsChanged<object>public event EventHandler VerticalSnapPointsChanged<object>Public Event VerticalSnapPointsChanged<object>// This API is not available in Javascript.
<StackPanel VerticalSnapPointsChanged="eventhandler" />

See Also