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

<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>