自定義WPF滾動條(ScrollViewer):仿蘋果系統規劃
阿新 • • 發佈:2019-02-20
<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>