绘制内容控件

内容控件 只有一个定义控件将显示的内容的内容属性。内容属性既可以是简单的文本字符串,也可以是复杂的 Microsoft .NET Framework 对象。如果向内容控件中添加一个版式面板控件,该面板控件就会成为可以添加多个子对象的内容,这样就可以避开单一内容对象的限制。

以下过程显示了如何创建内容控件 (Button) 并将其内容属性设置为版式面板 (StackPanel)。此过程也适用于 MSDN 上的主题 ContentControl Types(ContentControl 类型)中“类型”下列出的其他内容控件。

创建内容控件

  1. 在 Microsoft Expression Blend 应用程序窗口左侧的“工具”面板中,单击“资产”Cc295336.0d8b8d29-1af9-418f-8741-be3097d76eab(ZH-CN,Expression.30).png。在“资产”面板的“控件”类别中,从列表中选择“Button”Cc295336.05df1779-a68f-436b-b834-a91b7995a3ec(ZH-CN,Expression.30).png

    “Button”控件的图标将显示在“工具”面板中“资产”按钮下方,并且处于选中状态以便您可以向美工板上添加“Button”。

    Cc295336.alert_tip(ZH-CN,Expression.30).gif提示:

    最常用的用户界面 (UI) 元素(如“Button”控件)已显示在“资产”按钮下方的下拉列表中,以便您可以快速添加这些元素。

  2. 若要向美工板添加按钮,请双击“Button”控件的“工具”面板图标。Button 的默认内容是字符串“Button”。

    按照默认大小和位置(左上角)在美工板上创建的 Button 对象

    Cc295336.38211dc1-69d4-46bd-acd2-d7f9b48102bb(ZH-CN,Expression.30).png

    Cc295336.alert_tip(ZH-CN,Expression.30).gif提示:

    也可以通过在“工具”面板中选择一个控件,然后单击美工板并拖动鼠标以指定该控件的范围框,从而将该控件添加到美工板上。

    Cc295336.alert_tip(ZH-CN,Expression.30).gif提示:

    将 UI 设计元素(如“Button”控件)添加到美工板上之后,该元素就会成为应用程序中的对象。

  3. 在“资产”面板内“控件”类别中的“面板”下,选择“StackPanel”Cc295336.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(ZH-CN,Expression.30).png。双击“StackPanel”控件的图标,将该控件添加到美工板中。

  4. 在“对象和时间线”面板中,将 StackPanel 对象拖到 Button 对象上。

    “StackPanel”将取代“Button”对象的内容字符串。若要证实这一点,请选中“对象和时间线”面板中的“[Button]”,然后查看“属性”面板的“公共属性”类别中的“Content”属性。

    在美工板上作为子对象添加到 Button 中的 StackPanel 对象

    Cc295336.fb639649-9e46-4aef-960f-d0b40e9e8aff(ZH-CN,Expression.30).png

  5. “StackPanel”设置的默认高度和宽度均为 100,而最小高度和最小宽度均为 0。为了使“StackPanel”更易于使用,请选中“对象和时间线”面板中的“[StackPanel]”,然后在“属性”面板的“布局”类别中,将“Width”更改为 150 像素(即设备无关单位,每单位约等于 1/96 英寸),将“Height”更改为 75 像素。

    Cc295336.alert_tip(ZH-CN,Expression.30).gif提示:

    也可以通过拖动范围框边角处的修饰工具,调整美工板上对象的大小。

  6. 若要使 Button 对象的大小在您重设其子对象(StackPanel 对象)的大小时自动进行重设,请选择此 Button 对象,然后在“属性”面板的“布局”类别中,将“Width”和“Height”属性设置为“Auto”。

  7. 在“对象和时间线”面板中选中“[StackPanel]”,将“属性”面板的“布局”类别中的“Orientation”属性设置为“Horizontal”,使“StackPanel”中的子对象水平堆叠。

  8. 在“对象和时间线”面板中,单击“[StackPanel]”对象以将其激活,以便可以添加子对象。

    Cc295336.alert_tip(ZH-CN,Expression.30).gif提示:

    有些版式面板(如“StackPanel”和“Grid”)可以包含多个子对象,这一点与大多数 UI 元素有所不同。这对组织和布置应用程序设计方案的布局非常有用。有关详细信息,请参阅排列对象

  9. 从“工具”面板中,选择“椭圆形”Cc295336.d7a04618-e35a-44f9-b78c-1f22e38016c1(ZH-CN,Expression.30).png,然后在美工板上的“StackPanel”内绘制圆形。接下来,从“工具”面板中选择“TextBox”Cc295336.343296b4-5c7d-4145-84cc-91b08ba67a1b(ZH-CN,Expression.30).png,并在“StackPanel”内绘制该对象。由于包含子对象的“StackPanel”对象是水平方向的,所以这些子对象将从左至右并排堆叠。如果要在子对象之间添加间距,可以在“属性”面板的“布局”类别中,调整这些对象的“Margin”属性。

    添加到 StackPanel 对象中的子对象

    Cc295336.12af719b-02a4-4334-801d-9dedeebec030(ZH-CN,Expression.30).png

  10. 生成项目 (F5) 以查看所得到的应用程序。