动手试验:使用位图效果自定义 SimpleTabItem

此页仅适用于 WPF 项目

通过使用“SimpleTabItem”模板,可以轻松地自定义选项卡控件的外观。

向 SimpleTabItem 添加位图效果

  1. 在美工板上绘制“SimpleTabControl”。默认情况下,“SimpleTabControl”包含两个“SimpleTabItem”模板。

    Cc294648.alert_tip(zh-cn,Expression.10).gif提示:

    “资源库”Cc294648.0224cabd-5da1-4e01-bddd-4a647401a098(zh-cn,Expression.10).png 中的“控件”选项卡的“简单样式”类别中提供了简单样式控件。从列表中选择简单样式控件后,即可在美工板上进行绘制。

  2. 在“对象和时间线”下右键单击一个选项卡项,指向“编辑控件部件(模板)”,然后单击“编辑模板”。如果不希望更改 SimpleStyles.xaml 资源字典,则可以单击“编辑副本”而不是“编辑模板”,以创建新模板并将其保存到文档中。有关创建副本的详细信息,请参阅创建资源

    Cc294648.alert_tip(zh-cn,Expression.10).gif提示:

    若要退出模板编辑模式并返回到文档范围:请单击位于“交互”面板中的元素树上方的“范围上移”Cc294648.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-cn,Expression.10).png 按钮。

    若要返回到现有模板的模板编辑模式:请在“对象和时间线”下,右键单击要编辑其模板的元素,指向“编辑控件部件(模板)”,然后单击“编辑模板”。

  3. 在控件模板的编辑范围中,选择“对象和时间线”下的“Border”元素,然后在“属性”面板的“外观”类别的高级部分 Cc294648.81e110f1-4068-4299-957d-0693cea95088(zh-cn,Expression.10).png 中,单击“BitmapEffect”属性旁边的下拉箭头,然后单击“棱台”。默认情况下,“BevelWidth”属性的值为 5。

  4. 在“触发器”面板中,选择“IsPressed”状态以启用触发器记录操作。在“属性”面板中,再次单击“BitmapEffect”属性旁边的下拉箭头,单击“棱台”,然后将“BevelWidth”属性的值更改为 25。

    在“触发器”下的“活动时的属性”下将显示一个新行,以反映将在鼠标单击选项卡项时发生的属性更改。

  5. 单击“范围上移”Cc294648.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-cn,Expression.10).png 按钮以返回到文档的编辑范围。

  6. 若要向选项卡控件中的其他选项卡项应用自定义模板,请在“对象和时间线”下右键单击其他选项卡项,指向“编辑控件部件(模板)”,指向“应用资源”,然后单击自定义模板的名称。

  7. 测试应用程序 (F5) 以查看效果。

另请参见

概念

SimpleTabControl 和 SimpleTabItem