根据客户需求,要在TreeView目录树上显示10万+个节点,但是目录树显示10万加节点后,整个页面操作起来非常卡,所以给目录树增加了虚拟化设置。但是虚拟化设置一直没生效,后来经过排查发现是使用的自定义滚动条导致了虚拟化设置没有生效,后来自己写了一个滚动条样式,问题解决了。
目录树虚拟化设置属性
WPF虚拟化技术
属性 | 说明 | 描述 |
VirtualizingStackPanel.IsVirtualizing | 开启虚拟化属性 | VirtualizingPanel.IsVirtualizing="True" |
VirtualizingStackPanel.VirtualizationMode | 列表绑定大数据时,显示的速度和流畅性 | VirtualizingStackPanel.VirtualizationMode="Recycling" |
ScrollViewer.CanContentScroll | 设置像素滚动或者单元格滚动 | 设置true 单元滚动,效率更高。 |
ScrollViewer.IsDeferredScrollingEnabled | 如果用户拖动 Thumb 的 ScrollBar 时内容为静止状态,则为 true ;否则为 false 。 |
虚拟化属性
<Style TargetType="{x:Type TreeView}" x:Key="testTree">
<Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True" />
<Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Recycling" />
<Setter Property="ScrollViewer.PanningMode" Value="Both" />
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="True" />
</Style>
目录树滚动条样式:
以下的滚动条样式,是通过原生的滚动条模板样式基础上进行简单修改的,增加了一些注释。
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" StrokeDashArray="1 2" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" SnapsToDevicePixels="true" StrokeThickness="1"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="ScrollBar.Static.Background" Color="#F0F0F0"/>
<SolidColorBrush x:Key="ScrollBar.Static.Border" Color="#F0F0F0"/>
<SolidColorBrush x:Key="ScrollBar.Static.Glyph" Color="#606060"/>
<SolidColorBrush x:Key="ScrollBar.Static.Thumb" Color="#CDCDCD"/>
<SolidColorBrush x:Key="ScrollBar.MouseOver.Background" Color="#DADADA"/>
<SolidColorBrush x:Key="ScrollBar.MouseOver.Border" Color="#DADADA"/>
<SolidColorBrush x:Key="ScrollBar.MouseOver.Glyph" Color="#000000"/>
<SolidColorBrush x:Key="ScrollBar.MouseOver.Thumb" Color="#CCCCCC"/>
<SolidColorBrush x:Key="ScrollBar.Pressed.Background" Color="#606060"/>
<SolidColorBrush x:Key="ScrollBar.Pressed.Border" Color="#606060"/>
<SolidColorBrush x:Key="ScrollBar.Pressed.Thumb" Color="#CCCCCC"/>
<SolidColorBrush x:Key="ScrollBar.Pressed.Glyph" Color="#FFFFFF"/>
<SolidColorBrush x:Key="ScrollBar.Disabled.Background" Color="#F0F0F0"/>
<SolidColorBrush x:Key="ScrollBar.Disabled.Border" Color="#F0F0F0"/>
<SolidColorBrush x:Key="ScrollBar.Disabled.Glyph" Color="#BFBFBF"/>
<Style x:Key="RepeatButtonTransparent" 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="ScrollBarButton" TargetType="{x:Type RepeatButton}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<!--设置按钮边框属性-->
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<!--设置取消按钮的边框-->
<Border x:Name="border" Background="#EDF2FF"
BorderBrush="{StaticResource ScrollBar.Static.Border}"
BorderThickness="0" SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource ScrollBar.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource ScrollBar.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource ScrollBar.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource ScrollBar.Pressed.Border}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--中间滑块部分-->
<Style x:Key="ScrollBarThumbVertical" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Rectangle x:Name="rectangle" Fill="#CCCCCC"
Height="{TemplateBinding Height}" SnapsToDevicePixels="True"
Width="6" RadiusX="3" RadiusY="3"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.MouseOver.Thumb}"/>
</Trigger>
<Trigger Property="IsDragging" Value="true">
<Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.Pressed.Thumb}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarThumbHorizontal" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<!--设置滚动条宽度-->
<Rectangle x:Name="rectangle" Fill="#CCCCCC"
Height="6" RadiusX="3" RadiusY="3" SnapsToDevicePixels="True" Width="{TemplateBinding Width}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.MouseOver.Thumb}"/>
</Trigger>
<Trigger Property="IsDragging" Value="true">
<Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.Pressed.Thumb}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--ScrollBar垂直模板-->
<ControlTemplate TargetType="{x:Type ScrollBar}" x:Key="VerticalBarTemplate">
<Grid x:Name="Bg" SnapsToDevicePixels="true">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
<RowDefinition Height="0.00001*"/>
<RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
</Grid.RowDefinitions>
<!--滚动条地下区域的颜色-->
<Border Background="#EDF2FF" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" Grid.Row="1"/>
<!--滚动条上面的按钮-->
<RepeatButton x:Name="PART_LineUpButton" Command="{x:Static ScrollBar.LineUpCommand}"
IsEnabled="{TemplateBinding IsMouseOver}"
Style="{StaticResource ScrollBarButton}">
<!--设置按钮中箭头的颜色-->
<Path x:Name="ArrowTop" Data="M 0,4 C0,4 0,6 0,6 0,6 3.5,2.5 3.5,2.5 3.5,2.5 7,6 7,6 7,6 7,4 7,4 7,4 3.5,0.5 3.5,0.5 3.5,0.5 0,4 0,4 z" Fill="#CCCCCC" Margin="3,4,3,3" Stretch="Uniform"/>
</RepeatButton>
<!--上下按钮中间的部分-->
<Track x:Name="PART_Track" IsDirectionReversed="true"
IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">
<!--滚动条上面的部分-->
<Track.DecreaseRepeatButton>
<!--上面部分的RepeatButton按钮,设置成透明了看不见,当点击时会触发事件让滚动条移动到点击的位置。-->
<RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource RepeatButtonTransparent}"/>
</Track.DecreaseRepeatButton>
<!--滚动条下面的部分-->
<Track.IncreaseRepeatButton>
<!--下面部分的RepeatButton按钮,设置成透明了看不见,当点击时会触发事件让滚动条移动到点击的位置。-->
<RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource RepeatButtonTransparent}"/>
</Track.IncreaseRepeatButton>
<!--中间滑块的部分-->
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumbVertical}"/>
</Track.Thumb>
</Track>
<!--滚动条下面的按钮-->
<RepeatButton x:Name="PART_LineDownButton" Command="{x:Static ScrollBar.LineDownCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2" Style="{StaticResource ScrollBarButton}">
<!--设置滚动条下面按钮样式颜色-->
<Path x:Name="ArrowBottom" Data="M 0,2.5 C0,2.5 0,0.5 0,0.5 0,0.5 3.5,4 3.5,4 3.5,4 7,0.5 7,0.5 7,0.5 7,2.5 7,2.5 7,2.5 3.5,6 3.5,6 3.5,6 0,2.5 0,2.5 z" Fill="#CCCCCC" Margin="3,4,3,3" Stretch="Uniform"/>
</RepeatButton>
</Grid>
<ControlTemplate.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, ElementName=PART_LineDownButton}" Value="true"/>
<Condition Binding="{Binding IsPressed, ElementName=PART_LineDownButton}" Value="true"/>
</MultiDataTrigger.Conditions>
<Setter Property="Fill" TargetName="ArrowBottom" Value="{StaticResource ScrollBar.Pressed.Glyph}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, ElementName=PART_LineUpButton}" Value="true"/>
<Condition Binding="{Binding IsPressed, ElementName=PART_LineUpButton}" Value="true"/>
</MultiDataTrigger.Conditions>
<Setter Property="Fill" TargetName="ArrowTop" Value="{StaticResource ScrollBar.Pressed.Glyph}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, ElementName=PART_LineDownButton}" Value="true"/>
<Condition Binding="{Binding IsPressed, ElementName=PART_LineDownButton}" Value="false"/>
</MultiDataTrigger.Conditions>
<Setter Property="Fill" TargetName="ArrowBottom" Value="{StaticResource ScrollBar.MouseOver.Glyph}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, ElementName=PART_LineUpButton}" Value="true"/>
<Condition Binding="{Binding IsPressed, ElementName=PART_LineUpButton}" Value="false"/>
</MultiDataTrigger.Conditions>
<Setter Property="Fill" TargetName="ArrowTop" Value="{StaticResource ScrollBar.MouseOver.Glyph}"/>
</MultiDataTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" TargetName="ArrowTop" Value="{StaticResource ScrollBar.Disabled.Glyph}"/>
<Setter Property="Fill" TargetName="ArrowBottom" Value="{StaticResource ScrollBar.Disabled.Glyph}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--ScrollBar水平模板-->
<ControlTemplate TargetType="{x:Type ScrollBar}" x:Key="HorizontalBarTemplate">
<Grid x:Name="Bg" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
<ColumnDefinition Width="0.00001*"/>
<ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
</Grid.ColumnDefinitions>
<!--滚动条地下区域的颜色-->
<Border Background="#EDF2FF" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1"/>
<!--滚动条上面的按钮-->
<RepeatButton x:Name="PART_LineLeftButton" Command="{x:Static ScrollBar.LineLeftCommand}"
IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}">
<!--设置按钮中箭头的颜色-->
<Path x:Name="ArrowLeft" Data="M 3.18,7 C3.18,7 5,7 5,7 5,7 1.81,3.5 1.81,3.5 1.81,3.5 5,0 5,0 5,0 3.18,0 3.18,0 3.18,0 0,3.5 0,3.5 0,3.5 3.18,7 3.18,7 z"
Fill="#CCCCCC" Margin="3" Stretch="Uniform"/>
</RepeatButton>
<!--上下按钮中间的部分-->
<Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}">
<!--滚动条上面的部分-->
<Track.DecreaseRepeatButton>
<!--上面部分的RepeatButton按钮,设置成透明了看不见,当点击时会触发事件让滚动条移动到点击的位置。-->
<RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource RepeatButtonTransparent}"/>
</Track.DecreaseRepeatButton>
<!--滚动条下面的部分-->
<Track.IncreaseRepeatButton>
<!--下面部分的RepeatButton按钮,设置成透明了看不见,当点击时会触发事件让滚动条移动到点击的位置。-->
<RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource RepeatButtonTransparent}"/>
</Track.IncreaseRepeatButton>
<!--中间滑块的部分-->
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumbHorizontal}"/>
</Track.Thumb>
</Track>
<!--滚动条下面的按钮-->
<RepeatButton x:Name="PART_LineRightButton" Command="{x:Static ScrollBar.LineRightCommand}"
Grid.Column="2" IsEnabled="{TemplateBinding IsMouseOver}"
Style="{StaticResource ScrollBarButton}">
<!--设置滚动条下面按钮样式颜色-->
<Path x:Name="ArrowRight" Data="M 1.81,7 C1.81,7 0,7 0,7 0,7 3.18,3.5 3.18,3.5 3.18,3.5 0,0 0,0 0,0 1.81,0 1.81,0 1.81,0 5,3.5 5,3.5 5,3.5 1.81,7 1.81,7 z" Fill="#CCCCCC" Margin="3" Stretch="Uniform"/>
</RepeatButton>
</Grid>
<ControlTemplate.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, ElementName=PART_LineRightButton}" Value="true"/>
<Condition Binding="{Binding IsPressed, ElementName=PART_LineRightButton}" Value="true"/>
</MultiDataTrigger.Conditions>
<Setter Property="Fill" TargetName="ArrowRight" Value="{StaticResource ScrollBar.Pressed.Glyph}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, ElementName=PART_LineLeftButton}" Value="true"/>
<Condition Binding="{Binding IsPressed, ElementName=PART_LineLeftButton}" Value="true"/>
</MultiDataTrigger.Conditions>
<Setter Property="Fill" TargetName="ArrowLeft" Value="{StaticResource ScrollBar.Pressed.Glyph}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, ElementName=PART_LineRightButton}" Value="true"/>
<Condition Binding="{Binding IsPressed, ElementName=PART_LineRightButton}" Value="false"/>
</MultiDataTrigger.Conditions>
<Setter Property="Fill" TargetName="ArrowRight" Value="{StaticResource ScrollBar.MouseOver.Glyph}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, ElementName=PART_LineLeftButton}" Value="true"/>
<Condition Binding="{Binding IsPressed, ElementName=PART_LineLeftButton}" Value="false"/>
</MultiDataTrigger.Conditions>
<Setter Property="Fill" TargetName="ArrowLeft" Value="{StaticResource ScrollBar.MouseOver.Glyph}"/>
</MultiDataTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" TargetName="ArrowLeft" Value="{StaticResource ScrollBar.Disabled.Glyph}"/>
<Setter Property="Fill" TargetName="ArrowRight" Value="{StaticResource ScrollBar.Disabled.Glyph}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--ScrollBar样式-->
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
<Setter Property="Background" Value="{StaticResource ScrollBar.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource ScrollBar.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<!--设置左右Border宽度为0-->
<Setter Property="BorderThickness" Value="0,0"/>
<Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
<Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
<!--ScrollBar默认垂直模板-->
<Setter Property="Template" Value="{StaticResource VerticalBarTemplate}"/>
<!--ScrollBar水平模板触发器-->
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Width" Value="Auto"/>
<Setter Property="MinWidth" Value="0"/>
<Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
<Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
<Setter Property="BorderThickness" Value="0,1"/>
<Setter Property="Template" Value="{StaticResource HorizontalBarTemplate}"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="ScrollViewerStyle1" TargetType="{x:Type ScrollViewer}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<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" Grid.Row="1"
Fill="#EDF2FF"/>
<!--显示滚动条内容区域-->
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
CanHorizontallyScroll="False"
ContentTemplate="{TemplateBinding ContentTemplate}"
CanVerticallyScroll="False" Grid.Column="0"
Content="{TemplateBinding Content}"
CanContentScroll="{TemplateBinding CanContentScroll}"
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" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
<!--水平方向滚动条-->
<ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
扫描二维码关注公众号,回复:
16838196 查看本文章