首页

Wpf 自定义滚动条样式模板

c#

2021-1-29

参考网上资料,进行修改。定义了有上下按钮和无上下按钮2种滚动条样式模板,

每种滚动条定义7或8副图像,

半透明和无按钮的滚动条需Scrollbackground(x).png图像,上下按钮为全透明图像即可。

添加样式:

1、替换(x)为数字,例如(3),添加相应的图片到资源

2、调整滚动块高度和上下位置距离:

<Track.Thumb>

<Thumb Style=”{StaticResource ThumbStyle(2)}” 

    Height=”79″

    Margin=”-1,0,-1,0″ />

</Track.Thumb>

设置上下按钮高度

<Grid x:Name=”Bg”

    Background=”{TemplateBinding Background}”

    SnapsToDevicePixels=”true”>

    <Grid.RowDefinitions>

       <RowDefinition MaxHeight=”39″ />

       <RowDefinition Height=”0.00001*” />

       <RowDefinition MaxHeight=”39″ />

    </Grid.RowDefinitions>

如无上下按钮,则设置

<ImageBrush x:Key=”ScrollBackground(x)” 

 TileMode=”FlipY” 

ImageSource=”/Resource_ScrollImage/Scrollbackground(1).png” />

……

<ControlTemplate TargetType=”{x:Type ScrollBar}”>

<Grid x:Name=”Bg”

Background=”{DynamicResource ScrollBackground(1)}”

SnapsToDevicePixels=”true”>

……

背景透明

<ScrollBar x:Name=”PART_VerticalScrollBar”

 Background=”Transparent”

资源下载此资源下载价格为2D币(VIP免费),请先
资源文件列表
ScrollDEmo/.vs/ScrollDEmo/v15/.suo , 35840
ScrollDEmo/.vs/ScrollDEmo/v15/Server/sqlite3/db.lock , 0
ScrollDEmo/.vs/ScrollDEmo/v15/Server/sqlite3/storage.ide , 716800
ScrollDEmo/ScrollDEmo/App.config , 189
ScrollDEmo/ScrollDEmo/App.xaml , 374
ScrollDEmo/ScrollDEmo/App.xaml.cs , 337
ScrollDEmo/ScrollDEmo/bin/Debug/background.jpg , 145381
ScrollDEmo/ScrollDEmo/bin/Debug/ScrollDEmo.exe , 294912
ScrollDEmo/ScrollDEmo/bin/Debug/ScrollDEmo.exe.config , 189
ScrollDEmo/ScrollDEmo/bin/Debug/ScrollDEmo.pdb , 26112
ScrollDEmo/ScrollDEmo/bin/Debug/中文字体.ttf , 10828284
ScrollDEmo/ScrollDEmo/MainWindow.xaml , 1149
ScrollDEmo/ScrollDEmo/MainWindow.xaml.cs , 3610
ScrollDEmo/ScrollDEmo/Properties/AssemblyInfo.cs , 2314
ScrollDEmo/ScrollDEmo/Properties/Resources.Designer.cs , 2833
ScrollDEmo/ScrollDEmo/Properties/Resources.resx , 5612
ScrollDEmo/ScrollDEmo/Properties/Settings.Designer.cs , 1097
ScrollDEmo/ScrollDEmo/Properties/Settings.settings , 201
ScrollDEmo/ScrollDEmo/Resource_ScrollImage/BarDown(1).png , 18577
ScrollDEmo/ScrollDEmo/Resource_ScrollImage/BarDown(2).png , 15829
ScrollDEmo/ScrollDEmo/Resource_ScrollImage/BarUp(1).png , 18577
ScrollDEmo/ScrollDEmo/Resource_ScrollImage/BarUp(2).png , 15833
ScrollDEmo/ScrollDEmo/Resource_ScrollImage/BarUp_E(1).png , 18577
ScrollDEmo/ScrollDEmo/Resource_ScrollImage/BarUp_E(2).png , 15833
ScrollDEmo/ScrollDEmo/Resource_ScrollImage/Nar_Center(1).png , 19913
ScrollDEmo/ScrollDEmo/Resource_ScrollImage/Nar_Center(2).png , 16211
ScrollDEmo/ScrollDEmo/Resource_ScrollImage/Nar_Center_s(1).png , 19913
ScrollDEmo/ScrollDEmo/Resource_ScrollImage/Nar_Center_s(2).png , 16211
ScrollDEmo/ScrollDEmo/Resource_ScrollImage/PageDownBG(1).png , 18581
ScrollDEmo/ScrollDEmo/Resource_ScrollImage/PageDownBG(2).png , 16012
ScrollDEmo/ScrollDEmo/Resource_ScrollImage/PageUpBG(1).png , 18581
ScrollDEmo/ScrollDEmo/Resource_ScrollImage/PageUpBG(2).png , 16012
ScrollDEmo/ScrollDEmo/Resource_ScrollImage/Scrollbackground(1).png , 19962
ScrollDEmo/ScrollDEmo/Res_Content.Designer.cs , 4705
ScrollDEmo/ScrollDEmo/Res_Content.resx , 7993
ScrollDEmo/ScrollDEmo/ScrollDEmo.csproj , 5959
ScrollDEmo/ScrollDEmo/ScrollDEmo.csproj.user , 228
ScrollDEmo/ScrollDEmo/Template_ScrollXaml/scroll_Template(1).xaml , 11150
ScrollDEmo/ScrollDEmo/Template_ScrollXaml/scroll_Template(2).xaml , 10827
ScrollDEmo/ScrollDEmo.sln , 1129
没有账号? 忘记密码?

社交账号快速登录