根據客戶需求,要在TreeView目錄樹上顯示10萬+個節點,但是目錄樹顯示10萬加節點後,整個頁面操作起來非常卡,所以給目錄樹增加了虛擬化設置。但是虛擬化設置一直沒生效,後來經過排查發現是使用的自定義滾動條導致了虛擬化設置沒有生效,後來自己寫了一個滾動條樣式,問題解決了。 目錄樹虛擬化設置屬性 W ...
根據客戶需求,要在TreeView目錄樹上顯示10萬+個節點,但是目錄樹顯示10萬加節點後,整個頁面操作起來非常卡,所以給目錄樹增加了虛擬化設置。但是虛擬化設置一直沒生效,後來經過排查發現是使用的自定義滾動條導致了虛擬化設置沒有生效,後來自己寫了一個滾動條樣式,問題解決了。
目錄樹虛擬化設置屬性
WPF虛擬化技術
https://blog.51cto.com/u_15127512/4364505屬性 | 說明 | 描述 |
VirtualizingStackPanel.IsVirtualizing | 開啟虛擬化屬性 | VirtualizingPanel.IsVirtualizing="True" |
VirtualizingStackPanel.VirtualizationMode | 列表綁定大數據時,顯示的速度和流暢性 | VirtualizingStackPanel.VirtualizationMode="Recycling" |
ScrollViewer.CanContentScroll | 設置像素滾動或者單元格滾動 | 設置true 單元滾動,效率更高。 |
ScrollViewer.IsDeferredScrollingEnabled | 如果用戶拖動 Thumb 的 ScrollBar 時內容為靜止狀態,則為 true ;否則為 false 。 |
<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 T