WPF ScrollViewer 样式

原创 2015年11月25日 11:33:46
[code=csharp]
  <!--所有页面滚动条样式-->
        <Style TargetType="{x:Type ScrollViewer}">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="CanContentScroll" Value="True"></Setter>
            <Style.Resources>
                <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#D6D4D4" />
                <SolidColorBrush x:Key="NormalBrush" Color="Transparent" />
                <SolidColorBrush x:Key="NormalBorderBrush" Color="#D6D4D4" />
                <SolidColorBrush x:Key="HorizontalNormalBrush" Color="#D6D4D4" />
                <SolidColorBrush x:Key="HorizontalNormalBorderBrush" Color="#D6D4D4" />
                <!--方向箭头颜色-->
                <SolidColorBrush x:Key="GlyphBrush" Color="Black" />
                <LinearGradientBrush x:Key="PressedBrush"
            StartPoint="0,0" EndPoint="0,1">
                    <GradientBrush.GradientStops>
                        <GradientStopCollection>
                            <GradientStop Color="#BBB" Offset="0.0"/>
                            <GradientStop Color="#EEE" Offset="0.1"/>
                            <GradientStop Color="#EEE" Offset="0.9"/>
                            <GradientStop Color="#FFF" Offset="1.0"/>
                        </GradientStopCollection>
                    </GradientBrush.GradientStops>
                </LinearGradientBrush>
                <!--方向箭头按钮-->
                <Style x:Key="ScrollBarLineButton" TargetType="{x:Type RepeatButton}">
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type RepeatButton}">
                                <Border Name="Border" Margin="1" Background="{StaticResource NormalBrush}">
                                    <Path HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{StaticResource GlyphBrush}"
            Data="{Binding Path=Content,
                RelativeSource={RelativeSource TemplatedParent}}" />
                                </Border>
                                <ControlTemplate.Triggers>
                                    <!--选择箭头时的背景色-->
                                    <Trigger Property="IsPressed" Value="true">
                                        <Setter TargetName="Border" Property="Background"
                                Value="#6A6A6A" />
                                    </Trigger>
                                    <!--鼠标悬浮时 设置透明度-->
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Opacity" TargetName="Border" Value="0.8"></Setter>
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="false">
                                        <Setter Property="Foreground"
                                Value="{StaticResource DisabledForegroundBrush}"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!-- 滚动条显示部分样式-->
                <Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type RepeatButton}">
                                <Border Background="Transparent" />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <!--滚动条样式-->
                <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Width" Value="8"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Thumb}">
                                <Border x:Name="border"  Background="#D6D4D4" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0" />
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Background" TargetName="border" Value="#6A6A6A"></Setter>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

                <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
                    <Grid >
                        <Grid.RowDefinitions>
                            <RowDefinition MaxHeight="18"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition MaxHeight="18"/>
                        </Grid.RowDefinitions>
                        <Border  Grid.RowSpan="3" CornerRadius="2"  Background="Transparent"  BorderThickness="0"
	  BorderBrush="#D6D4D4" />
                        <RepeatButton  Grid.Row="0" Style="{StaticResource ScrollBarLineButton}"
      Height="18" Command="ScrollBar.LineUpCommand" Content="M 0 4 L 8 4 L 4 0 Z" />
                        <Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Style="{StaticResource ScrollBarPageButton}"/>
                            </Track.DecreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{StaticResource ScrollBarThumb}" Margin="1,0,1,0" Background="{StaticResource HorizontalNormalBrush}"
          BorderBrush="{StaticResource HorizontalNormalBorderBrush}" />
                            </Track.Thumb>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton
          Style="{StaticResource ScrollBarPageButton}"
          Command="ScrollBar.PageDownCommand" />
                            </Track.IncreaseRepeatButton>
                        </Track>
                        <RepeatButton Grid.Row="3" Style="{StaticResource ScrollBarLineButton}" Height="18" Command="ScrollBar.PageDownCommand"  Content="M 0 0 L 4 4 L 8 0 Z"/>
                    </Grid>
                </ControlTemplate>

                <Style x:Key="HScrollBarThumb" TargetType="{x:Type Thumb}">
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Height" Value="9"/>
                    <Setter Property="HorizontalAlignment" Value="Stretch"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Thumb}">
                                <Border  x:Name="border" CornerRadius="0" Background="#D6D4D4"
                             BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" />
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Background" TargetName="border" Value="#6A6A6A"></Setter>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

                <ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition MaxWidth="18"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition MaxWidth="18"/>
                        </Grid.ColumnDefinitions>
                        <Border  Grid.ColumnSpan="3"  CornerRadius="2" Background="Transparent"  BorderThickness="0"
	  BorderBrush="#D6D4D4" />
                        <RepeatButton   Grid.Column="0" Style="{StaticResource ScrollBarLineButton}"  Width="18"  Command="ScrollBar.LineLeftCommand" Content="M 4 0 L 4 8 L 0 4 Z" />
                        <Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Style="{StaticResource ScrollBarPageButton}"
 />
                            </Track.DecreaseRepeatButton>
                            <Track.Thumb>
                                <Thumb Style="{StaticResource HScrollBarThumb}" Margin="0,1,0,1" Background="{StaticResource NormalBrush}"
          BorderBrush="{StaticResource NormalBorderBrush}" />
                            </Track.Thumb>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton  Style="{StaticResource ScrollBarPageButton}" />
                            </Track.IncreaseRepeatButton>
                        </Track>
                        <RepeatButton Grid.Column="2" Style="{StaticResource ScrollBarLineButton}" Width="18" Command="ScrollBar.PageRightCommand" 
 Content="M 0 0 L 4 4 L 0 8 Z"/>
                    </Grid>
                </ControlTemplate>
                <!--滚动条整体样式-->
                <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Style.Triggers>
                        <Trigger Property="Orientation" Value="Horizontal">
                            <Setter Property="Width" Value="Auto"/>
                            <Setter Property="Height" Value="10" />
                            <Setter Property="Template"
                        Value="{StaticResource HorizontalScrollBar}" />
                        </Trigger>
                        <Trigger Property="Orientation" Value="Vertical">
                            <Setter Property="Width" Value="10"/>
                            <Setter Property="Height" Value="Auto" />
                            <Setter Property="Template"
                        Value="{StaticResource VerticalScrollBar}" />
                        </Trigger>
                    </Style.Triggers></Style>   </Style.Resources> </Style>
[/code]

WPF 自定义ScrollViewer

自定义的WPF ScrollViwer 样式
  • lvguoshan
  • lvguoshan
  • 2015-08-21 12:34:26
  • 1645

WPF ScrollViewer(滚动条) 仿苹果样式

  • 2013年08月07日 10:24
  • 346KB
  • 下载

[WPF,XAML,ScrollBar,ScrollViewer,Style] 自定义滚动条

自定义 ScrollViewer 的滚动条样式,如下图所示: ScrollBar 在滚动时会自动显示并隐藏,而且 ScrollBar 存在于 View...
  • qqamoon
  • qqamoon
  • 2012-03-04 15:34:45
  • 13116

WPF自定义ScrollViewer

App.xaml
  • Qian_F
  • Qian_F
  • 2014-06-10 19:11:28
  • 8979

潘鹏整理WPF(5)滚动条ScrollViewer

示例布局如下: 等同窗口Size的ScrollViewer中嵌套一个Height大于窗口的TextBox(蓝色边缘线) 视频提供了功能强大的方法...
  • PanPen120
  • PanPen120
  • 2015-09-21 13:11:05
  • 4046

Wpf ScrollBar自定义样式

Wpf的ScrollBar可以分为六个区域:A.背景、B.向上按钮、C.向下的按钮、D.Track里面向上的按钮、E.Track里面向下的按钮、F.Track的Thumb 详情见下图   下...
  • huyu107
  • huyu107
  • 2015-04-13 14:50:04
  • 2502

WPF ScrollViewer样式 滚动时显示滚动条

  • 2016年09月28日 14:20
  • 17KB
  • 下载

WPF 修改listbox中scollviewer的样式

1、首先先修改listbox的样式:                                                         ...
  • ht_zhaoliubin
  • ht_zhaoliubin
  • 2014-09-04 16:15:17
  • 1690

WPF 几种常用控件样式的总结

这里把wpf中几种常用样式总结一下,后期可以直接拷贝使用,呵呵 一、Button View Code 二、ComboBox View Code 三、Context...
  • xuejiren
  • xuejiren
  • 2014-09-21 10:28:07
  • 5468

WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂

先上效果图 正常样式 拖动时样式 好下面 开始吧 ================================================================= ...
  • dyllove98
  • dyllove98
  • 2013-04-04 21:53:12
  • 3681
收藏助手
不良信息举报
您举报文章:WPF ScrollViewer 样式
举报原因:
原因补充:

(最多只允许输入30个字)