Wpf ScrollBar自定義樣式

2022-05-01 17:09:10 字數 4039 閱讀 3850

wpf的scrollbar可以分為六個區域:a.背景、b.向上按鈕、c.向下的按鈕、d.track裡面向上的按鈕、e.track裡面向下的按鈕、f.track的thumb

詳情見下圖

下面通過乙個例子來自定義scrollbar的樣式

<

style

x:key

="scrollbar_style"

targettype

="scrollbar"

>

<

setter

property

="template"

>

<

setter.value

>

<

controltemplate

targettype

="scrollbar"

>

<

grid

width

="15"

>

<

border

width

="13"

horizontalalignment

="center"

cornerradius

="5"

background

="#33555555"

>

border

>

<

track

horizontalalignment

="center"

name

="part_track"

width=""

maximum=""

minimum=""

value=""

isdirectionreversed

="true"

>

<

track.decreaserepeatbutton

>

<

repeatbutton

template=""

command

="scrollbar.lineupcommand"

/>

track.decreaserepeatbutton

>

<

track.increaserepeatbutton

>

<

repeatbutton

template=""

command

="scrollbar.linedowncommand"

/>

track.increaserepeatbutton

>

<

track.thumb

>

<

thumb

style=""

>

thumb

>

track.thumb

>

track

>

grid

>

controltemplate

>

setter.value

>

setter

>

style

>

這裡用到了兩個其它的樣式,其中 scroll_background 定義track.decreaserepeatbutton 、 track.increaserepeatbutton的背景

<

controltemplate

x:key

="scroll_background"

targettype

="repeatbutton"

>

<

border

background

="transparent"

>

border

>

controltemplate

>

scroll_thumb_style定義thumb的外觀

<

style

x:key

="scroll_thumb_style"

targettype

="thumb"

>

<

setter

property

="snapstodevicepixels"

value

="true"

/>

<

setter

property

="overridesdefaultstyle"

value

="true"

/>

<

setter

property

="istabstop"

value

="false"

/>

<

setter

property

="focusable"

value

="false"

/>

<

setter

property

="template"

>

<

setter.value

>

<

controltemplate

targettype

="thumb"

>

<

rectangle

width

="13"

fill

="#7d7d7d"

radiusx

="5"

radiusy

="5"

>

rectangle

>

controltemplate

>

setter.value

>

setter

>

style

>

這裡的thumb的height是自動的大小,如果想自己設定thumb的height,直接設定時沒有效果的,必須要將track的viewportsize設定為nan即 viewportsize="nan"

上面的例子中只定義了a,d-f區域,b、c即向上滑動和向下滑動的那妞被去掉,如果要加上,只需要在grid裡面新增上既可以了

<

grid.rowdefinitions

>

<

rowdefinition

height

="15"

/>

<

rowdefinition

height

="*"

/>

<

rowdefinition

height

="15"

/>

grid.rowdefinitions

>

<

border

grid.rowspan

="3"

>

<

border.background

>

<

imagebrush

imagesource

="/images/scroll_background.png"

/>

border.background

>

border

>

<

repeatbutton

template=""

grid.row

="0"

command

="scrollbar.lineupcommand"

/>

<

repeatbutton

template=""

grid.row

="2"

command

="scrollbar.linedowncommand"

/>

最終執行結果

本例的**

自定義 如何自定義協議

何為自定義協議,其實是相對標準協議來說的,這裡主要針對的是應用層協議 常見的標準的應用層協議如http ftp smtp等,如果我們在網路通訊的過程中不去使用這些標準協議,那就需要自定義協議,比如我們常用的rpc框架 dubbo,thrift 分布式快取 redis,memcached 等都是自定義...

自定義控制項 自定義鐘錶

private context mcontext 畫筆 private paint mpaint 控制項的寬 private int mwidth x方向的圓心座標 private int center 鐘錶的半徑 private int mradio 圓環的寬 private int stroke...

自定義控制項及自定義屬性

自定義控制項在android開發中的重要性,是不言而喻,眾人皆知的。希望通過這二天的學習,能讓大家了解自定義控制項的原理,熟悉自定義控制項的使用步驟,並能寫出一些普通的效果。內容介紹 1 使用系統控制項,實現自定義的效果,案例有 優酷環形選單 廣告條 viewpager 下拉列表 spinner 2...