在 Flex 4 中的面板标题栏右侧添加图像

发布于 2024-09-27 03:08:30 字数 176 浏览 13 评论 0原文

我正在尝试创建一个基于 Spark Panel 的 MXML 组件,我想在标题栏的右端添加一个图像,以便该面板在标题栏上有一个文本,在右侧有一个小图像结尾。我使用皮肤来定义颜色、背景填充等。但是如何将此图像添加到标题栏的右端? 我想使该图像可裁剪,以便在插入组件时,可以使用默认图像或可以提供新图像。

请帮忙提供您的想法。

I'm trying to create a MXML component based on the spark Panel and I would like to add an image on the right end of the title bar, so that the panel will have a text on the title bar and a small image at the right end. I'm using a skin to define the colors, background fill etc. But how do I add this image at the right end of the title bar?
I would like to make that image cutomizable so that when the component is inserted, either the default image is used or a new image can be provided.

Please help with your ideas.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

暗藏城府 2024-10-04 03:08:30

将图像组件添加到您的皮肤中并为其指定一个 id,同时设置您要显示的默认图像。然后创建一个扩展Panel 的ActionScript 组件。在您的自定义面板代码中,使用与您在皮肤中放入的 ID 相同的名称来声明皮肤部件。现在覆盖自定义面板中的partAdded 函数,并将图像设置为您喜欢的任何内容:

package mypackage
{
    import spark.components.Panel;
    import spark.primitives.BitmapImage;

    public class MyCustomPanel extends Panel
    {

        [SkinPart (required="false")]
        public var panelIcon:BitmapImage;

        override protected function partAdded(partName:String, instance:Object):void {
            super.partAdded(partName, instance);

            if (instance == panelIcon) {
                panelIcon.source = someOtherImageSource;
            }
        }
    }
}

最后,将您的皮肤文件与自定义面板相关联,无论是在CSS 中还是在使用自定义面板时设置skinClass。

Add the image component to your skin and give it an id, also set the default image you want to show. Then create an ActionScript component extending Panel. In your custom Panel code, declare a skin part using the same name as the id you put in your skin. Now override the partAdded function in your custom Panel and set the image to whatever you like:

package mypackage
{
    import spark.components.Panel;
    import spark.primitives.BitmapImage;

    public class MyCustomPanel extends Panel
    {

        [SkinPart (required="false")]
        public var panelIcon:BitmapImage;

        override protected function partAdded(partName:String, instance:Object):void {
            super.partAdded(partName, instance);

            if (instance == panelIcon) {
                panelIcon.source = someOtherImageSource;
            }
        }
    }
}

Lastly, associate your skin file with your custom panel, either in CSS or by setting the skinClass when you use your custom panel.

夜司空 2024-10-04 03:08:30

您始终可以使用 TitleWindow,并重新调整关闭按钮的用途,以执行除关闭之外的其他操作。这里有一个很好的为 TitleWindow 和 TitleWindowClosebutton 换肤的示例:http://blog.flexexamples.com/2010/04/04/changing-the-close-button-skin-on-the-spark-titlewindow -container-in-flex-4/

You could always use the TitleWindow, and repurpose the close button to do something besides close. There is a good example of skinning the TitleWindow and TitleWindowClosebutton here: http://blog.flexexamples.com/2010/04/04/changing-the-close-button-skin-on-the-spark-titlewindow-container-in-flex-4/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文