900字范文 > WPF自定义控件与样式(6)

WPF自定义控件与样式(6)

时间：2022-12-31 17:18:31

相关推荐

WPF自定义控件与样式(6)

WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式

一．前言

申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。

本文主要内容：

ScrollViewer的样式拆解及基本样式定义；

ListBox集合控件的样式定义；

二．ScrollViewer自定义样式

ScrollViewer在各种列表、集合控件中广泛使用的基础组建，先看看效果图：

如上图，ScrollViewer简单来说分两部分，一个横向的滚动条，一个垂直滚动条，两个样式、模板、功能都基本一样，他们都是ScrollBar。以垂直滚动条为例，分解一下，分解图：

1：向上滑动的按钮，用RepeatButton实现功能；

2：上部分滑块，功能同1，也是一个RepeatButton来实现的；

3：中间可拖动滑块，用一个Thumb来实现；

4：下部分滑块，和5功能一样，向下滑动，用一个RepeatButton来实现；

5：向下滑动的按钮，用RepeatButton实现功能；

上面实现的是一个标准的垂直滑动条ScrollBar组成，实际可用根据需求定制，实现不同效果的滑动效果。以上各部分的样式代码：

View Code

最后ScrollViewer的样式如下，其实就是两个ScrollBar组成：

<Style x:Key="DefaultScrollViewer" 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="*" x:Name="leftColumn" /> <ColumnDefinition Width="Auto" x:Name="rightColumn" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" Grid.Row="0" Grid.Column="0" />  <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" ViewportSize="{TemplateBinding ViewportHeight}" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"/>  <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}" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>

使用很简单，如果想通用，把上面定义的ScrollViewer设置为默认样式即可：

三．ListBox样式定义

ListBox是最基础、常用的集合控件，效果：

ListBox的样式比较简单，包括两部分：

ListBoxItem项的样式；

ListBox的样式；

完整代码：

ListBox默认是支持虚拟化的，当加载大数据时需要开启虚拟化，或者定义一个虚拟化的样式：

<Style x:Key="VirtualListBox" TargetType="{x:Type ListBox}" BasedOn="{StaticResource DefaultListBox}"> <Setter Property="ScrollViewer.CanContentScroll" Value="True" /> <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True"></Setter> <Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Recycling" /> <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" /> </Style>

上面演示效果的代码示例：

另外提供一个比较常用的需求，ListBox单选RadioButton效果样式，如上图右边的那个ListBox效果：

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。