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 ScrollViewer(滚动条)  自定义样式表制作 图文并茂 滚动条因为要在触摸屏上用  所以我设计的很宽 宽度可以自己...
  • huyu107
  • huyu107
  • 2015年04月10日 17:27
  • 2606

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

先上效果图 正常样式 拖动时样式 好下面 开始吧 ================================================================= ...

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

 先上效果图 正常样式 拖动时样式 好下面 开始吧 ===============================================================...
  • huyu107
  • huyu107
  • 2015年04月10日 17:30
  • 1058

自定义WPF滚动条(ScrollViewer):仿苹果系统规划

苹果系统滚动条最大的特点就是滚动上下按钮是统一摆放在右下侧(如下图)。今天通过WPF灵活的控件模板来定义一个类似的滚动条。        效果如下:     Window.Resourc...
  • haylhf
  • haylhf
  • 2012年05月13日 17:39
  • 1575

自定义WPF滚动条(ScrollViewer):仿苹果系统规划

Red Orange DarkRed Gray Pink

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

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

WPF 自定义ScrollViewer

自定义的WPF ScrollViwer 样式

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

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

wpf slider进度条的样式模板,带有进度颜色显示

效果图: 只需在前台加上这段代码即可: ...

WPF Button 样式 鼠标移入发光

内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WPF ScrollViewer 样式
举报原因:
原因补充:

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