`
lipbb
  • 浏览: 68420 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

flex4 为垂直滚动条VScrollBar换肤

阅读更多
为垂直滚动条换肤是一件比较麻烦的事情。且让我们一步一步来实现。

首先,由于它只是Scroller的一部分,要直接给它设置样式需要在css文件里这样写:

s|Scroller s|VScrollBar
{
	skinClass:ClassReference("com.views.skins.VScrollBarSkin");
	fixedThumbSize:true;
}

这里设置fixedThumbSize为true是因为滑块使用了一个固定的图片,如果false会导致内部计算错误。

然后,我们看下皮肤具体应该怎么写,首先打开spark.skins.spark.VScrollBarSkin(可以用打开类型快捷键ctrl+shift+t,输入VScrollBarSkin)

    <!---  The default skin class is VScrollBarTrackSkin.  
            @copy spark.components.supportClasses.TrackBase#track 
            @see spark.skins.spark.VScrollBarTrackSkin -->
    <s:Button id="track" top="16" bottom="15" height="54"
              focusEnabled="false" tabEnabled="false"
              skinClass="spark.skins.spark.VScrollBarTrackSkin" />
    
    <!--- The default skin class is VScrollBarThumbSkin.
            @copy spark.components.supportClasses.TrackBase#thumb 
            @see spark.skins.spark.VScrollBarThumbSkin -->
    <s:Button id="thumb" 
              focusEnabled="false" visible.inactive="false" tabEnabled="false"
              skinClass="spark.skins.spark.VScrollBarThumbSkin" />
    
    <!--- The default skin class is ScrollBarUpButtonSkin. 
            @copy spark.components.supportClasses.ScrollBarBase#decrementButton 
            @see spark.skins.spark.ScrollBarUpButtonSkin -->
    <s:Button id="decrementButton" top="0" enabled.inactive="false"
              focusEnabled="false" tabEnabled="false"
              skinClass="spark.skins.spark.ScrollBarUpButtonSkin" />
    
    <!---  The default skin class is ScrollBarDownButtonSkin. 
            @copy spark.components.supportClasses.ScrollBarBase#incrementButton
            @see spark.skins.spark.ScrollBarDownButtonSkin -->
    <s:Button id="incrementButton" bottom="0" enabled.inactive="false"
              focusEnabled="false" tabEnabled="false"
              skinClass="spark.skins.spark.ScrollBarDownButtonSkin" />


上面这是直接从VScrollBarSkin复制出来的。看起来很简单,不是吗,就是4个按钮,分别代表向上向下以及滑块与滑轨。而实际上我们需要改的就是这4个按钮的皮肤。

接下来就简单了,分别书写相应的按钮皮肤,并用它们替换掉默认的按钮皮肤即可。

需要注意的是要给皮肤里的各部分设置宽高!
具体的皮肤文件可以参考附件
分享到:
评论
4 楼 lipbb 2013-07-26  
java_stream 写道
表示没图片……

自己找几张图片放过去吧
3 楼 java_stream 2013-07-17  
表示没图片……
2 楼 lipbb 2013-06-17  
love51 写道
请问这个有具体demo吗?

这还需要demo吗,把压缩里的几个文件放到相应的包里,然后在全局的css加上文章开头的那段css。就这样,只要用到滚动条的地方就会变了
1 楼 love51 2013-05-27  
请问这个有具体demo吗?

相关推荐

    C# 用VScrollBar控制webbrowser的滚动条 简单测试

    WebBrowser控件将用于显示网页内容,而VScrollBar则作为替代的垂直滚动条。 接着,我们需要在代码中设置VScrollBar的基本属性,例如最小值、最大值、步长等,以匹配WebBrowser控件的滚动范围。这可以通过监听...

    C# HScrollBar VScrollBar 水平滚动条美化皮肤控件

    在.NET Framework中,C#提供了一系列的控件用于构建用户界面,其中HScrollBar(水平滚动条)和VScrollBar(垂直滚动条)是常见的导航控件,用于浏览大范围的数据或内容。本文将深入探讨如何自定义C#中的HScrollBar和...

    水平和垂直滚动条的应用,C#源代码his.pictureBox1.Top = -this.vScrollBar1.Value;

    综上所述,C#中的水平和垂直滚动条的应用涉及控件布局、事件处理和用户交互,它们为用户提供了一种便捷的方式来浏览和查看大尺寸或超出了控件显示范围的内容。通过巧妙地使用滚动条的`Value`属性,可以实现图像或...

    flex textlayout 滚动条

    2. **滚动条组件**:在Flex中,滚动条组件(HScrollBar和VScrollBar)用于在内容超过视口大小时提供水平和垂直导航。它们与Scroller组件一起工作,自动管理显示和隐藏。当TextLayout容器内的内容不能完全展示时,...

    webbrowser滚动条隐藏

    若要隐藏滚动条,我们可以在CSS中设置宽度为0: ```css ::-webkit-scrollbar { width: 0; /* 隐藏横向滚动条 */ } ::-webkit-scrollbar-thumb { background: transparent; /* 隐藏纵向滚动条 */ } ``` 然而,...

    winform 滚动条示例

    滚动条分为水平滚动条(Horizontal Scroll Bar, HScrollBar)和垂直滚动条(Vertical Scroll Bar, VScrollBar),它们都可以根据需要进行自定义和配置。 首先,我们需要在Winform设计界面中添加滚动条控件。在...

    给groupbox加上滚动条

    在C#编程中,我们经常会遇到需要在控件中显示大量数据的情况,此时,滚动条就显得尤为重要。在默认情况下,GroupBox控件并不会自动添加滚动条,但通过自定义和扩展,我们可以为GroupBox添加滚动条功能。这个项目就是...

    C# winform 重绘滚动条

    为了自定义滚动条,我们需要覆盖`VScrollBar`或`HScrollBar`控件的`OnPaint`方法,并在其中添加自定义的绘制代码。首先,创建一个继承自`VScrollBar`或`HScrollBar`的新类: ```csharp public class ...

    panel自定义滚动条

    这段代码将垂直滚动条的滚动值转换为`Panel`的滚动位置,确保内容随滚动条移动。 3. **监听鼠标滚轮事件**:如果希望在鼠标滚轮滚动时也能影响`Panel`的内容,可以捕获`MouseWheel`事件。在事件处理程序中,更新...

    DevExpress中XtraScrollableControl随鼠标滚轮操作滚动条

    4. **滚动条样式和外观** DevExpress控件的一大优势是其高度定制的外观。XtraScrollableControl的滚动条样式可以通过`ScrollBarStyle`属性进行更改,同时,滚动按钮、滑块等各个部分的外观都可以通过皮肤系统进行...

    C# 自定义滚动条样式和多窗口切换

    在C#编程中,自定义滚动条样式和多窗口切换是两种常见的用户界面(UI)设计技巧,可以提升应用程序的视觉效果和用户体验。本篇将详细介绍这两个知识点。 首先,我们来探讨如何实现自定义滚动条样式。在Windows ...

    C# winform 自定义滚动条

    在WinForm中,我们通常使用`System.Windows.Forms.VScrollBar`或`System.Windows.Forms.HScrollBar`来创建垂直或水平滚动条。但若要自定义滚动条的外观和行为,我们就需要使用自绘(Custom Painting)技术。 1. **...

    易语言按钮滚动条

    易语言中,滚动条组件(ScrollBar)通常有水平滚动条(HScrollBar)和垂直滚动条(VScrollBar)两种类型。我们可以分别设置它们的最小值、最大值、当前值等属性,以控制滚动条的范围和当前位置。同时,通过绑定滚动...

    VB使用滚动条实现图形的缩放

    Scroll事件会在滚动条滚动时触发,而ValueChanged事件则在滚动条的值发生改变时触发。在这些事件中,我们将获取滚动条的新值,并用它来更新图形的大小。 缩放的基本算法可以是这样的: 1. 获取滚动条的新值...

    VScrollBar的滑动的使用

    VScrollBar是Windows Forms和WPF等图形用户界面(GUI)框架中的一个重要组件,它用于提供垂直方向的滚动功能,尤其在显示大量数据或内容超出屏幕范围时非常实用。本篇文章将详细探讨VScrollBar的滑动使用,包括...

    合适XE5的滚动条控件

    滚动条控件一般分为两种类型:水平滚动条(HScrollBar)和垂直滚动条(VScrollBar)。它们通常与容器控件(如TScrollBox或TCustomForm)一起使用,当内容超出容器的显示范围时自动出现。在XE5中,Delphi自带的...

    1.rar_VB 窗体滚动条_窗体 滚动条_窗体滚动

    4. `SetScrollPos`:设置滚动条的位置,并更新相关的控件。 5. `ScrollWindowEx`:用于在窗口中执行滚动操作,更新显示的内容。 6. `WM_HSCROLL` 和 `WM_VSCROLL`:这两个是Windows消息,当滚动条的状态改变时,...

    上拉滚动条 异步加载组件

    设置必要的选项,如`hScrollbar`(水平滚动条)和`vScrollbar`(垂直滚动条)。 ```javascript var myScroll = new IScroll('#scroller', { hScrollbar: false, // 可能根据需求关闭水平滚动条 vScrollbar: true,...

Global site tag (gtag.js) - Google Analytics