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
| 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.

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.
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}"/>
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.
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"/>
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.
The identifier for the BorderThickness dependency property.
- 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"/>
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.
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"/>
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.
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.
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.
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.
| 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.
The identifier for the Spacing dependency property.
| 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.
- 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.
| 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.
- orientation
- Orientation Orientation Orientation Orientation
The orientation (dimension) for the desired snap point set.
The alignment to use when applying the snap points.
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.
- orientation
- Orientation Orientation Orientation Orientation
The orientation/dimension for the desired snap point set.
The alignment to use when applying the snap points.
- offset
- float Single Single Single
Out parameter. The offset of the first snap point.
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" />