在C# WPF下自定義滾動(dòng)條ScrollViewer樣式的操作
更新時(shí)間：2021年01月14日 11:28:25 作者：凡夢(mèng)_
這篇文章主要介紹了在C# WPF下自定義滾動(dòng)條ScrollViewer樣式的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
一、實(shí)現(xiàn)對(duì)ScrollViewer樣式的自定義主要包括：
1、滾動(dòng)條寬度設(shè)置
2、滾動(dòng)條顏色
3、滾動(dòng)條圓角
4、滾動(dòng)條拉動(dòng)時(shí)的效果mouseover
二、實(shí)現(xiàn)效果：
三、實(shí)現(xiàn)方法
1、創(chuàng)建資源字典（ ResourceDictionary）文件
由于style代碼比較多，之間在控件文件中加載style比較混亂，也不利于其它窗口復(fù)用，這里單獨(dú)創(chuàng)建了ScrollViewDictionary.xaml文件代碼如下：
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ControlTemplate x:Key="MyScrollViewer" TargetType="{x:Type ScrollViewer}">
<!--View區(qū)域背景色-->
<Grid x:Name="Grid" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle x:Name="Corner" Grid.Column="1" Fill="White" Grid.Row="1"/>
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
<ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource MyScrollBarStyle}"/>
<ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Style="{DynamicResource MyScrollBarStyle}"/>
</Grid>
</ControlTemplate>
<SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>
<Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--滾動(dòng)條顏色、圓角等設(shè)置-->
<Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<!--滾動(dòng)條顏色和圓角設(shè)置-->
<Rectangle Name="thumbRect" Fill="#03ffea" RadiusX="3" RadiusY="3"/>
<!--鼠標(biāo)拉動(dòng)滾動(dòng)條時(shí)的顏色-->
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" Value="CornflowerBlue" TargetName="thumbRect" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MyScrollBarStyle" TargetType="{x:Type ScrollBar}">
<Setter Property="Background" Value="AliceBlue"/>
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
<!--滾動(dòng)條寬度-->
<Setter Property="Width" Value="8"/>
<Setter Property="MinWidth" Value="6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<!--滾動(dòng)條背景色-->
<Grid x:Name="Bg" Background="#001f55" SnapsToDevicePixels="true" Width="8">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}">
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumb}"/>
</Track.Thumb>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Width" Value="Auto"/>
<Setter Property="MinWidth" Value="0"/>
<Setter Property="Height" Value="6"/>
<Setter Property="MinHeight" Value="6"/>
<Setter Property="Background" Value="AliceBlue"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="Bg" Background="Red" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}">
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumb}" />
</Track.Thumb>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
2、在窗口中引用資源字典
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ScrollViewDictionary.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
3、scrollViewer中使用新樣式
<ScrollViewer Template="{StaticResource MyScrollViewer}" Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" x:Name="scrList" Margin="0" VerticalScrollBarVisibility="Auto" Height="350" Width="250">
<StackPanel Orientation="Vertical" Name="layerList" ScrollViewer.VerticalScrollBarVisibility="Visible" Width="250" >
</StackPanel>
</ScrollViewer>
自定義完成，以上是所有步驟和代碼，可以根據(jù)自己程序的整體設(shè)計(jì)來(lái)更改顏色、寬度、圓角等效果。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教。
您可能感興趣的文章:
- c# 基于GMap.NET實(shí)現(xiàn)電子圍欄功能（WPF版）
- c# wpf使用GMap.NET類(lèi)庫(kù),實(shí)現(xiàn)地圖軌跡回放
- c# 基于wpf,開(kāi)發(fā)OFD電子文檔閱讀器
- c# WPF中自定義加載時(shí)實(shí)現(xiàn)帶動(dòng)畫(huà)效果的Form和FormItem
- c# WPF中CheckBox樣式的使用總結(jié)
- 淺談c# WPF中的PreviewTextInput
- C# WPF 自定義按鈕的方法
- c# WPF中通過(guò)雙擊編輯DataGrid中Cell的示例(附源碼)
- C# WPF Image控件的綁定方法
- c# WPF設(shè)置軟件界面背景為MediaElement并播放視頻
- c# wpf如何使用Blend工具繪制Control樣式
相關(guān)文章
掃雷游戲相信不用給大家過(guò)多介紹，大家基本都玩過(guò)，下面這篇文章主要給大家介紹了關(guān)于如何利用C#編寫(xiě)掃雷游戲的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2019-01-01
C#中csv文件與DataTable互相導(dǎo)入處理實(shí)例解析
這篇文章主要介紹了C#中csv文件與DataTable互相導(dǎo)入處理實(shí)例解析,非常實(shí)用的功能,需要的朋友可以參考下2014-08-08
這篇文章主要為大家詳細(xì)介紹了C#自定義IP輸入框控件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
C#使用Equals()方法比較兩個(gè)對(duì)象是否相等的方法
這篇文章主要介紹了C#使用Equals()方法比較兩個(gè)對(duì)象是否相等的方法,涉及C#操作對(duì)象的相關(guān)技巧,需要的朋友可以參考下2015-04-04
C#實(shí)現(xiàn)Json轉(zhuǎn)Unicode的方法
這篇文章主要介紹了C#實(shí)現(xiàn)Json轉(zhuǎn)Unicode的方法,可實(shí)現(xiàn)輸入為帶有json格式的文本，輸出正常文本的功能,需要的朋友可以參考下2014-09-09
本文詳細(xì)講解了可空類(lèi)型Nullable<T>的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-02-02
C#設(shè)置自定義文件圖標(biāo)實(shí)現(xiàn)雙擊啟動(dòng)(修改注冊(cè)表)
這篇文章介紹的是利用C#設(shè)置自定義文件圖標(biāo)，然后實(shí)現(xiàn)雙擊啟動(dòng)的功能，文章給出了示例代碼，介紹的很詳細(xì)，有需要的可以參考借鑒。2016-08-08
這篇文章主要介紹了C#初始化數(shù)組的方法,總結(jié)分析了C#聲明與初始化一維數(shù)組及多維數(shù)組的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
.net中前臺(tái)javascript與后臺(tái)c#函數(shù)相互調(diào)用問(wèn)題
.net中前臺(tái)javascript與后臺(tái)c#函數(shù)相互調(diào)用問(wèn)題...2007-12-12
本文詳細(xì)講解了C#多線程中async和await的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-02-02