Resize an element automatically at runtime

When you resize an element, you might not get the result you expect if the properties under Layout in the Properties panel are not set correctly. The properties that affect the size of an element are the width, height, alignment, and margin properties. For example, if you want an element to resize automatically at runtime when the size of the application window changes, you must set the Width and Height to Auto, select the HorizontalAlignment and VerticalAlignment that you want, and then adjust the size by using the Margin properties.

  1. On the artboard or under Objects and Timeline in the Interaction panel, click the element that you want to resize to select it.

  2. Under Layout in the Properties panel, click the Set to Auto button Cc295141.aa9ec064-22f8-4b62-9eed-3f4772362d22(en-us,Expression.10).png. Alternatively, click the Advanced property options marker Cc295141.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(en-us,Expression.10).png next to the Width and Height property, and then click Auto.


    When you set the width and height of an element to Auto, your element might reduce in size until you adjust the margin properties to pull the sides of the element toward the edges of the containing element.

  3. The next properties that are listed under Width and Height depend on the type of layout panel that contains your element. For example, if the parent element is a Grid layout panel, you will see Row, RowSpan, Column, and ColumnSpan properties. If the parent element is a Canvas, you will see Left and Top properties. You can set these properties to determine the position of your element in the layout panel.


    If the parent element is a StackPanel layout panel, the child elements will not have extra properties under Width and Height because the layout is determined by the Orientation property of the StackPanel, and all child elements are stacked in the order provided under Objects and Timeline.

  4. Still under Layout in the Properties panel, set the HorizontalAlignment and VerticalAlignment properties by clicking one of the following buttons:

    • Left Cc295141.1e3c2891-633d-4162-a3bd-d5ac53046b56(en-us,Expression.10).png

    • Center Cc295141.02978741-8e12-476d-afa7-165b613ea515(en-us,Expression.10).png

    • Right Cc295141.c0d22c24-ad68-4355-b8f2-d6a373deaf8e(en-us,Expression.10).png

    • Stretch Cc295141.90aa9534-0480-4a7f-b992-1af23c71ea9c(en-us,Expression.10).png

  5. Finally, set the Margin properties to determine how far from the sides of the containing element to display your element.


    These margin values will stay static. In other words, if the size of your application window is reduced far enough, your element will disappear completely. You can prevent your element from disappearing by setting the minimum width and minimum height properties. Under Layout in the Properties panel, click the Show advanced properties button Cc295141.81e110f1-4068-4299-957d-0693cea95088(en-us,Expression.10).png, and then enter values in the MinWidth and MinHeight properties.