zoukankan      html  css  js  c++  java
  • WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式

    一.前言

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

    本文主要内容:

    • ScrollViewer的样式拆解及基本样式定义;
    • ListBox集合控件的样式定义;  

    二.ScrollViewer自定义样式

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

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

    • 1:向上滑动的按钮,用RepeatButton实现功能;
    • 2:上部分滑块,功能同1,也是一个RepeatButton来实现的;
    • 3:中间可拖动滑块,用一个Thumb来实现;
    • 4:下部分滑块,和5功能一样,向下滑动,用一个RepeatButton来实现;
    • 5:向下滑动的按钮,用RepeatButton实现功能;

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

    复制代码
        <sys:Double x:Key="ScrollBarSize">12</sys:Double>
        <!--滚动两边按钮样式-->
        <Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
            <Setter Property="Background" Value="Transparent"></Setter>
            <Setter Property="Foreground" Value="{StaticResource TextForeground}"></Setter>
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="Width" Value="auto"></Setter>
            <Setter Property="Height" Value="auto"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <TextBlock x:Name="FIcon" FontSize="12" Text="{TemplateBinding local:ControlAttachProperty.FIcon}" Margin="1"
                                   Style="{StaticResource FIcon}" />
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="{StaticResource MouseOverForeground}" TargetName="FIcon"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Foreground" Value="{StaticResource PressedForeground}" TargetName="FIcon"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" Value="0.5" TargetName="FIcon"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
        <!--滚动条滑块两边按钮样式-->
        <Style x:Key="ScrollBarTrackButton" TargetType="{x:Type RepeatButton}">
            <Setter Property="Background" Value="Transparent"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border Background="Transparent"></Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
        <!--滚动条滑块样式-->
        <ControlTemplate x:Key="ThumbTemplate" TargetType="Thumb">
            <Grid>
                <Border  x:Name="Bg" CornerRadius="4" Margin="2" SnapsToDevicePixels="True" Background="{StaticResource ScrollBarForeround}">
                    <!--<Border.Background>
                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                            <GradientStop Color="#C7C0C0" Offset="0.15"/>
                            <GradientStop Color="#AFA9A9" Offset=".5"/>
                            <GradientStop Color="#989494" Offset=".5"/>
                            <GradientStop Color="#858585" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.Background>-->
                </Border>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="{StaticResource MouseOverForeground}" TargetName="Bg"></Setter>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Opacity" Value="0.5" TargetName="Bg"></Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    
        <!--水平滚滚动条模板-->
        <ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
            <Grid x:Name="HorizontalRoot" Height="{TemplateBinding Height}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <!--外部背景,好像不用更好看-->
                <!--<Border x:Name="Bg" Grid.Column="0" Grid.ColumnSpan="3" CornerRadius="0"  Opacity="0" Background="#858585"/>-->
                <!--内部背景-->
                <Border x:Name="BgInner" Grid.Column="1" Margin="0" SnapsToDevicePixels="True" Opacity="0.3"  CornerRadius="6" Background="{StaticResource ScrollBarBackground}"/>
                <!--左按钮-->
    
                <Border Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center">
                    <RepeatButton  local:ControlAttachProperty.FIcon="&#xe65e;"  Style="{StaticResource ScrollBarButton}" x:Name="HorizontalSmallDecrease"
                                     IsTabStop="False" Interval="50" Margin="0,1,0,0" Command="ScrollBar.LineLeftCommand"/>
                </Border>
                <!--中间滑动区域-->
                <Track x:Name="PART_Track" IsDirectionReversed="False" Grid.Column="1">
                    <!--左滑块-->
                    <Track.DecreaseRepeatButton>
                        <RepeatButton x:Name="HorizontalLargeDecrease" Command="ScrollBar.PageLeftCommand"
                                          IsTabStop="False" Interval="50" Style="{DynamicResource ScrollBarTrackButton}" />
                    </Track.DecreaseRepeatButton>
                    <!--中间滑块 Margin="1" VerticalAlignment="Center" VerticalContentAlignment="Center" -->
                    <Track.Thumb>
                        <Thumb Template="{StaticResource ThumbTemplate}" />
                    </Track.Thumb>
                    <!--右滑块-->
                    <Track.IncreaseRepeatButton>
                        <RepeatButton x:Name="HorizontalLargeIncrease" Command="ScrollBar.PageRightCommand"
                                          IsTabStop="False"  Interval="50" Style="{DynamicResource ScrollBarTrackButton}" />
                    </Track.IncreaseRepeatButton>
                </Track>
                <!--右按钮-->
                <Border Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center">
                    <RepeatButton local:ControlAttachProperty.FIcon="&#xe605;"  Style="{StaticResource ScrollBarButton}"
                                     IsTabStop="False" Interval="50" Margin="0,1,0,0" Command="ScrollBar.LineRightCommand"/>
                </Border>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="BgInner" Property="Opacity" Value="0.5"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    
        <!--垂直滚滚动条模板-->
        <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
            <Grid x:Name="VerticalRoot" Height="{TemplateBinding Height}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <!--外部背景,好像不用更好看-->
                <!--<Border x:Name="Bg" Grid.Row="0" Grid.RowSpan="3" CornerRadius="0" Opacity="0" Background="#858585"/>-->
                <!--内部背景-->
                <Border x:Name="BgInner" Grid.Row="1" Margin="0" CornerRadius="6" SnapsToDevicePixels ="True" Opacity="0.3"  Background="{StaticResource ScrollBarBackground}"/>
                <!--上按钮-->
                <Border Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="VerticalSmallDecrease">
                    <RepeatButton local:ControlAttachProperty.FIcon="&#xe65d;"  Style="{StaticResource ScrollBarButton}"
                                     IsTabStop="False" Interval="50" Margin="0" Command="ScrollBar.LineUpCommand"/>
                </Border>
                <!--中间滑动区域-->
                <Track x:Name="PART_Track" IsDirectionReversed="true" Grid.Row="1">
                    <!--上滑块-->
                    <Track.DecreaseRepeatButton>
                        <RepeatButton x:Name="HorizontalLargeDecrease" Command="ScrollBar.PageUpCommand" 
                                          IsTabStop="False" Interval="50" Style="{DynamicResource ScrollBarTrackButton}" />
                    </Track.DecreaseRepeatButton>
                    <!--中间滑块-->
                    <Track.Thumb>
                        <Thumb Template="{StaticResource ThumbTemplate}" MinHeight="10"/>
                    </Track.Thumb>
                    <!--下滑块-->
                    <Track.IncreaseRepeatButton>
                        <RepeatButton x:Name="HorizontalLargeIncrease" Command="ScrollBar.PageDownCommand"
                                          IsTabStop="False" Interval="50" Style="{DynamicResource ScrollBarTrackButton}" />
                    </Track.IncreaseRepeatButton>
                </Track>
                <!--下按钮-->
                <Border Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="VerticalSmallIncrease">
                    <RepeatButton local:ControlAttachProperty.FIcon="&#xe64b;"  Style="{StaticResource ScrollBarButton}"
                                     IsTabStop="False" Interval="50" Margin="0" Command="ScrollBar.LineDownCommand"/>
                </Border>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="BgInner" Property="Opacity" Value="0.5"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    
        <!--ScrollBar样式-->
        <Style x:Key="DefaultScrollBar" TargetType="{x:Type ScrollBar}">
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Style.Triggers>
                <Trigger Property="Orientation" Value="Horizontal">
                    <Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
                    <Setter Property="Height" Value="{StaticResource ScrollBarSize}" />
                </Trigger>
                <Trigger Property="Orientation" Value="Vertical">
                    <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
                    <Setter Property="Width" Value="{StaticResource ScrollBarSize}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    复制代码

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

    复制代码
        <!--ScrollViewer样式-->
        <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设置为默认样式即可:

    <Style TargetType="{x:Type ScrollBar}" BasedOn="{StaticResource DefaultScrollBar}"></Style>

    <Style TargetType="{x:Type ScrollViewer}" BasedOn="{StaticResource DefaultScrollViewer}"></Style>

    三.ListBox样式定义

    ListBox是最基础、常用的集合控件,效果:

    ListBox的样式比较简单,包括两部分:

    • ListBoxItem项的样式;
    • ListBox的样式;

    完整代码:  

    复制代码
    <Style x:Key="DefaultListBoxItem" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Foreground" Value="{StaticResource TextForeground}" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <!--<Setter Property="VerticalContentAlignment" Value="Center" />-->
            <Setter Property="MinHeight" Value="25" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Padding" Value="3,0,0,0" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="Border" Background="{TemplateBinding Background}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                            <ContentPresenter Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="{StaticResource ItemSelectedBackground}" />
                                <Setter Property="Foreground" Value="{StaticResource ItemSelectedForeground}" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="{StaticResource ItemMouseOverBackground}" />
                                <Setter Property="Foreground" Value="{StaticResource ItemMouseOverForeground}" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="Border" Property="Opacity" Value="{StaticResource DisableOpacity}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    复制代码
    复制代码
        <Style x:Key="DefaultListBox" TargetType="{x:Type ListBox}">
            <Setter Property="BorderBrush" Value="{StaticResource ControlBorderBrush}" />
            <Setter Property="Background" Value="{StaticResource ItemsContentBackground}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="ItemContainerStyle" Value="{StaticResource DefaultListBoxItem}"></Setter>
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="False"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBox}">
                        <Border Name="Border" Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <ScrollViewer>
                                <ItemsPresenter />
                            </ScrollViewer>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="Border" Property="Opacity" Value="{StaticResource DisableOpacity}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    复制代码

    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 Margin="5" SelectionMode="Multiple"  >
                    <ListBoxItem  Style="{StaticResource RadioButtonListBoxItem}">男</ListBoxItem>
                    <ListBoxItem  Style="{StaticResource RadioButtonListBoxItem}">女</ListBoxItem>
                    <ListBoxItem  Style="{StaticResource RadioButtonListBoxItem}">其他</ListBoxItem>
                    <CheckBox>2222333333333333333</CheckBox>
                    <CheckBox>2222333333333333333</CheckBox>
                    <CheckBox>2222333333333333333</CheckBox>
                    <CheckBox>2222333333333333333</CheckBox>
                    <CheckBox>2222333333333333333</CheckBox>
                    <CheckBox>2222333333333333333</CheckBox>
                    <CheckBox>2222333333333333333</CheckBox>
                    <CheckBox>2222333333333333333</CheckBox>
                    <TextBox Width="200"></TextBox>
                    <ListBoxItem IsSelected="True">111</ListBoxItem>
                </ListBox>
                <ListBox Margin="5" Grid.Column="1">
                    <ListBoxItem  Style="{StaticResource RadioButtonListBoxItem}">男</ListBoxItem>
                    <ListBoxItem  Style="{StaticResource RadioButtonListBoxItem}">女</ListBoxItem>
                    <ListBoxItem  Style="{StaticResource RadioButtonListBoxItem}">其他</ListBoxItem>
                </ListBox>
    复制代码

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

    复制代码
       <Style x:Key="RadioButtonListBoxItem" TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource DefaultListBoxItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="Border" Background="{TemplateBinding Background}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                            <RadioButton  IsChecked="{Binding IsSelected,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}">
                                <RadioButton.Content>
                                    <ContentPresenter Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                </RadioButton.Content>
                            </RadioButton>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="{StaticResource ItemSelectedBackground}" />
                                <Setter Property="Foreground" Value="{StaticResource ItemSelectedForeground}" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="{StaticResource ItemMouseOverBackground}" />
                                <Setter Property="Foreground" Value="{StaticResource ItemMouseOverForeground}" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="Border" Property="Opacity" Value="{StaticResource DisableOpacity}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    复制代码

    附录:参考引用

    WPF自定义控件与样式(1)-矢量字体图标(iconfont)

    WPF自定义控件与样式(2)-自定义按钮FButton

    WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展

    WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

    WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展

    版权所有,文章来源:http://www.cnblogs.com/anding

    个人能力有限,本文内容仅供学习、探讨,欢迎指正、交流。

  • 相关阅读:
    【转载】分布式环境Raft一致性共识算法解读
    从码农到工程师:只要做到这6点
    产品思维的修炼–技术的必修课
    工具篇
    安全测试
    测试体会
    测试题目
    软件测试工具
    常见的性能测试方法
    性能测试在软件测试的周期位置
  • 原文地址:https://www.cnblogs.com/ljdong7/p/12115191.html
Copyright © 2011-2022 走看看