WPF自定義控件與樣式(6)-ScrollViewer與ListBox自定義樣式

一．前言

　　申明：WPF自定義控件與樣式是一個(gè)系列文章，前后是有些關(guān)聯(lián)的，但大多是按照由簡到繁的順序逐步發(fā)布的等，若有不明白的地方可以參考本系列前面的文章，文末附有部分文章鏈接。

本文主要內(nèi)容：

ScrollViewer的樣式拆解及基本樣式定義；
ListBox集合控件的樣式定義；

二．ScrollViewer自定義樣式

ScrollViewer在各種列表、集合控件中廣泛使用的基礎(chǔ)組建，先看看效果圖：

　　如上圖，ScrollViewer簡單來說分兩部分，一個(gè)橫向的滾動(dòng)條，一個(gè)垂直滾動(dòng)條，兩個(gè)樣式、模板、功能都基本一樣，他們都是ScrollBar。以垂直滾動(dòng)條為例，分解一下，分解圖：

1：向上滑動(dòng)的按鈕，用RepeatButton實(shí)現(xiàn)功能；
2：上部分滑塊，功能同1，也是一個(gè)RepeatButton來實(shí)現(xiàn)的；
3：中間可拖動(dòng)滑塊，用一個(gè)Thumb來實(shí)現(xiàn)；
4：下部分滑塊，和5功能一樣，向下滑動(dòng)，用一個(gè)RepeatButton來實(shí)現(xiàn)；
5：向下滑動(dòng)的按鈕，用RepeatButton實(shí)現(xiàn)功能；

　　上面實(shí)現(xiàn)的是一個(gè)標(biāo)準(zhǔn)的垂直滑動(dòng)條ScrollBar組成，實(shí)際可用根據(jù)需求定制，實(shí)現(xiàn)不同效果的滑動(dòng)效果。以上各部分的樣式代碼：

View Code

　　最后ScrollViewer的樣式如下，其實(shí)就是兩個(gè) 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" />                        <!--垂直滾動(dòng)條 -->                        <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}}"/>                        <!--水平底部滾動(dòng)條-->                        <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設(shè)置為默認(rèn)樣式即可：

三．ListBox樣式定義

ListBox是最基礎(chǔ)、常用的集合控件，效果：

ListBox的樣式比較簡單，包括兩部分：

ListBoxItem項(xiàng)的樣式；
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默認(rèn)是支持虛擬化的，當(dāng)加載大數(shù)據(jù)時(shí)需要開啟虛擬化，或者定義一個(gè)虛擬化的樣式：

    <!--支持虛擬化的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>

另外提供一個(gè)比較常用的需求，ListBox單選RadioButton效果樣式，如上圖右邊的那個(gè)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>

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

WPF自定義控件與樣式(6)-ScrollViewer與ListBox自定義樣式