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

来源:转载

苹果系统滚动条最大的特点就是滚动上下按钮是统一摆放在右下侧(如下图)。今天通过WPF灵活的控件模板来定义一个类似的滚动条。

 

效果如下:

 

代码:

    <Window.Resources>        <SolidColorBrush x:Key="NormalColor">Red</SolidColorBrush>

        <SolidColorBrush x:Key="HighlightColor">Orange</SolidColorBrush>

        <SolidColorBrush x:Key="PressedColor">DarkRed</SolidColorBrush>

        <SolidColorBrush x:Key="BorderColor">Gray</SolidColorBrush>

        <SolidColorBrush x:Key="BackColor">Pink</SolidColorBrush>

        <Style x:Key="stBorder" TargetType="Border">

            <Setter Property="BorderBrush" Value="{StaticResource BorderColor}"/>

            <Setter Property="BorderThickness" Value="1"/>

            <Setter Property="Background" Value="{StaticResource NormalColor}"/>

            <Setter Property="CornerRadius" Value="3"/>

        </Style>

        <Style x:Key="stBackBorder" TargetType="Border">

            <Setter Property="BorderBrush" Value="{StaticResource BorderColor}"/>

            <Setter Property="BorderThickness" Value="1"/>

            <Setter Property="Background" Value="{StaticResource BackColor}"/>

            <Setter Property="CornerRadius" Value="3"/>

        </Style>

        <Style x:Key="stRepeatBtn" TargetType="RepeatButton">

            <Setter Property="SnapsToDevicePixels" Value="True"/>

            <Setter Property="OverridesDefaultStyle" Value="true"/>

            <Setter Property="Focusable" Value="false"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="RepeatButton">

                        <Border Name="bd" 

                                Style="{StaticResource stBorder}">

                            <Path 

                                HorizontalAlignment="Center"

                                VerticalAlignment="Center"

                                Fill="White"

                                Data="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}" />

 

                        </Border>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsMouseOver" Value="true">

                                <Setter TargetName="bd" Property="Background" Value="{StaticResource HighlightColor}"/>

                            </Trigger>

                            <Trigger Property="IsPressed" Value="true">

                                <Setter TargetName="bd" Property="Background" Value="{StaticResource PressedColor}"/>

                            </Trigger>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <Style x:Key="stScrollBtn" TargetType="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="RepeatButton">

                        <Border Background="Transparent" />

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <Style x:Key="stThumb" TargetType="{x:Type Thumb}">

            <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 Thumb}">

                        <Border Name="bd" Style="{StaticResource stBorder}"></Border>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsDragging" Value="true">

                                <Setter TargetName="bd" Property="Background" Value="{StaticResource PressedColor}"></Setter>

                            </Trigger>

                            <Trigger Property="IsMouseOver" Value="true">

                                <Setter TargetName="bd" Property="Background" Value="{StaticResource HighlightColor}"></Setter>

                            </Trigger>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">

            <Border Style="{StaticResource stBackBorder}">

                <Grid>

                    <Grid.RowDefinitions>

                        <RowDefinition/>

                        <RowDefinition MaxHeight="18"/>

                        <RowDefinition MaxHeight="18"/>

                    </Grid.RowDefinitions>

                    <Border

                      Grid.RowSpan="3"

                      CornerRadius="2" />

                    <RepeatButton 

                      Grid.Row="1"                           

                      Style="{StaticResource stRepeatBtn}"

                      Height="18"

                      Command="ScrollBar.LineUpCommand"

                      Content="M 0 4 L 8 4 L 4 0 Z" />

                    <Track 

                      Name="PART_Track"

                      Grid.Row="0"

                      IsDirectionReversed="true">

                        <Track.DecreaseRepeatButton>

                            <RepeatButton 

                              Style="{StaticResource stScrollBtn}"

                              Command="ScrollBar.PageUpCommand" />

                        </Track.DecreaseRepeatButton>

                        <Track.Thumb>

                            <Thumb 

                              Style="{StaticResource stThumb}" 

                              Margin="1,0,1,0"  />

                        </Track.Thumb>

                        <Track.IncreaseRepeatButton>

                            <RepeatButton 

                              Style="{StaticResource stScrollBtn}"

                              Command="ScrollBar.PageDownCommand" />

                        </Track.IncreaseRepeatButton>

                    </Track>

                    <RepeatButton 

                      Grid.Row="3" 

                      Style="{StaticResource stRepeatBtn}"

                      Height="18"

                      Command="ScrollBar.LineDownCommand"

                      Content="M 0 0 L 4 4 L 8 0 Z"/>

                </Grid>

            </Border>

        </ControlTemplate>

        <ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">

            <Border Style="{StaticResource stBackBorder}">

                <Grid >

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition/>

                        <ColumnDefinition MaxWidth="18"/>

                        <ColumnDefinition MaxWidth="18"/>

                    </Grid.ColumnDefinitions>

                    <Border

                      Grid.ColumnSpan="3"

                      CornerRadius="2"  />

                    <RepeatButton 

                      Grid.Column="1"                           

                      Style="{StaticResource stRepeatBtn}"

                      Width="18"

                      Command="ScrollBar.LineLeftCommand"

                      Content="M 4 0 L 4 8 L 0 4 Z" />

                    <Track 

                      Name="PART_Track"

                      Grid.Column="0"

                      IsDirectionReversed="False">

                        <Track.DecreaseRepeatButton>

                            <RepeatButton 

                              Style="{StaticResource stScrollBtn}"

                              Command="ScrollBar.PageLeftCommand" />

                        </Track.DecreaseRepeatButton>

                        <Track.Thumb>

                            <Thumb 

                              Style="{StaticResource stThumb}" 

                              Margin="0,1,0,1"   />

                        </Track.Thumb>

                        <Track.IncreaseRepeatButton>

                            <RepeatButton 

                              Style="{StaticResource stScrollBtn}"

                              Command="ScrollBar.PageRightCommand" />

                        </Track.IncreaseRepeatButton>

                    </Track>

                    <RepeatButton 

                      Grid.Column="2" 

                      Style="{StaticResource stRepeatBtn}"

                      Width="18"

                      Command="ScrollBar.LineRightCommand"

                      Content="M 0 0 L 4 4 L 0 8 Z"/>

                </Grid>

            </Border>

        </ControlTemplate>

        <Style TargetType="{x:Type ScrollViewer}">

            <Setter Property="OverridesDefaultStyle" Value="True"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type ScrollViewer}">

                        <Grid Background="{StaticResource BackColor}">

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition/>

                                <ColumnDefinition Width="Auto"/>

                            </Grid.ColumnDefinitions>

                            <Grid.RowDefinitions>

                                <RowDefinition/>

                                <RowDefinition Height="Auto"/>

                            </Grid.RowDefinitions>

                            <ScrollContentPresenter/>

                            <ScrollBar  Name="PART_VerticalScrollBar"

                                        Grid.Column="1"

                                        Value="{TemplateBinding VerticalOffset}"

                                        Maximum="{TemplateBinding ScrollableHeight}"

                                        ViewportSize="{TemplateBinding ViewportHeight}"

                                        Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"

                                        Template="{StaticResource VerticalScrollBar}"/>

                            <ScrollBar  Name="PART_HorizontalScrollBar"

                                        Orientation="Horizontal"

                                        Grid.Row="1"

                                        Value="{TemplateBinding HorizontalOffset}"

                                        Maximum="{TemplateBinding ScrollableWidth}"

                                        ViewportSize="{TemplateBinding ViewportWidth}"

                                        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"

                                        Template="{StaticResource HorizontalScrollBar}"/>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </Window.Resources>

    <ScrollViewer HorizontalScrollBarVisibility="Auto" >

        <Grid>

            <Border Width="500" 

                    Height="500">

                <Border.Background>

                    <VisualBrush ViewportUnits="Absolute"

                                 Viewport="0 0 50 30"

                                 TileMode="FlipXY">

                        <VisualBrush.Visual>

                            <Button Margin="5" Width="50" Height="30">ASD</Button>

                        </VisualBrush.Visual>

                    </VisualBrush>

                </Border.Background>

            </Border>

        </Grid>

    </ScrollViewer>

本文来自_Mgen的博客,原文地址:http://www.cnblogs.com/mgen/archive/2011/06/24/2088834.html


分享给朋友:
您可能感兴趣的文章:
随机阅读: