小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

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

 牛人的尾巴 2015-12-01

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

一．前言

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

本文主要內容：

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

二．ScrollViewer自定義樣式

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

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

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

　　上面實現(xiàn)的是一個標準的垂直滑動條ScrollBar組成，實際可用根據需求定制，實現(xiàn)不同效果的滑動效果。以上各部分的樣式代碼：  

View Code

　　最后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>
復制代碼

 

    本站是提供個人知識管理的網絡存儲空間，所有內容均由用戶發(fā)布，不代表本站觀點。請注意甄別內容中的聯(lián)系方式、誘導購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權內容，請點擊一鍵舉報。
    轉藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多