运行时自动调整元素大小

在调整元素大小时,如果“属性”面板中的“布局”下的属性未正确设置,则可能得不到预期结果。影响元素大小的属性包括宽度、高度、对齐方式和边距属性。例如,如果希望元素在运行时根据应用程序窗口大小的改变而自动调整大小,则必须将“Width”和“Height”设置为“Auto”,选择所需的“HorizontalAlignment”和“VerticalAlignment”,然后使用“Margin”属性调整大小。

运行时自动调整元素大小

  1. 在美工板上或在“交互”面板的“对象和时间线”下,单击要调整大小的元素以将其选定。

  2. 在“属性”面板中的“布局”下,单击“设为自动”按钮 Cc295141.aa9ec064-22f8-4b62-9eed-3f4772362d22(zh-cn,Expression.10).png。或者,单击“Width”和“Height”属性旁边的“高级属性选项”标记 Cc295141.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(zh-cn,Expression.10).png,然后单击“Auto”。

    Cc295141.alert_note(zh-cn,Expression.10).gif说明:

    在将元素的宽度和高度设置为“Auto”后,元素大小可能会减小,直到您调整边距属性以将元素的边缘拉向容器元素的边缘。

  3. “Width”和“Height”下列出的后续属性与包含元素的版式面板的类型有关。例如,如果父元素为“网格”版式面板,则会显示“Row”、“RowSpan”、“Column”和“ColumnSpan”属性。如果父元素为“画布”,则会显示“Left”和“Top”属性。可以设置这些属性来确定元素在版式面板中的位置。

    Cc295141.alert_note(zh-cn,Expression.10).gif说明:

    如果父元素为“StackPanel”版式面板,则子元素在“Width”和“Height”下将不会有额外属性,这是因为布局是由“StackPanel”的“Orientation”属性确定的,并且所有子元素都将按照“对象和时间线”下提供的顺序堆叠。

  4. 仍然在“属性”面板中的“布局”下,通过单击下列按钮之一来设置“HorizontalAlignment”和“VerticalAlignment”属性:

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

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

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

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

  5. 最后,设置“Margin”属性以确定在距离容器元素的边缘多远的位置显示元素。

    Cc295141.alert_note(zh-cn,Expression.10).gif说明:

    这些边距值将保持静态。换句话说,如果应用程序窗口的大小减小到足够小,您的元素将会完全消失。通过设置最小宽度和最小高度属性,可以防止您的元素消失。在“属性”面板的“布局”下,单击“显示高级属性”按钮 Cc295141.81e110f1-4068-4299-957d-0693cea95088(zh-cn,Expression.10).png,然后在“MinWidth”和“MinHeight”属性中输入值。

另请参见

概念

调整对象大小或缩放对象