2011-08-10 52 views
0

任何人都知道在Web上出現的WPF滾動條樣式,我可以使用它代替自己滾動,基本上像Blend滾動條會很酷。如果我不必從頭開始,這將節省很多時間。我知道這個http://sachabarber.net/?p=122,但它不夠接近我想要的。就像我說過的,我可以推出自己的產品,但如果有預先製作的例子,它會節省時間。WPF的滾動條樣式

+0

你到底想達到什麼目的?你在示例中包含的鏈接確實確定了滾動條的樣式,但它不符合美學上的要求,而且您希望獲得更好的內容,或者希望獲得幫助理解鏈接中的代碼,以便您可以更好地實現自己的目標? – evasilchenko

+0

我正在尋找一些看起來更像滾動條風格的東西,基本上我說的是我很懶,不想從頭開始形式劃痕。這不是理解它的問題。這是試圖節省時間的問題。 – Kenn

回答

2

我創建了滾動條樣式的資源字典,突出顯示顏色。有了這個,我很快適應新的風格。下面的示例模仿MS Outlook 2013滾動條。

enter image description here

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:system="clr-namespace:System;assembly=mscorlib"> 

    <!-- this should better reside in a separate color resource dictionary--> 
    <Color x:Key="White">#FFFFFFFF</Color> 
    <Color x:Key="GrayUltraLight">#FFF2F2F2</Color> 
    <Color x:Key="GrayLight">#FFD4D4D4</Color> 
    <Color x:Key="GrayMedium">#FFAAAAAA</Color> 
    <Color x:Key="GrayMediumDark">#FF777777</Color> 
    <SolidColorBrush x:Key="WhiteBrush" Color="{StaticResource White}" /> 
    <SolidColorBrush x:Key="GrayUltraLightBrush" Color="{StaticResource GrayUltraLight}" /> 
    <SolidColorBrush x:Key="GrayLightBrush" Color="{StaticResource GrayLight}" /> 
    <SolidColorBrush x:Key="GrayMediumBrush" Color="{StaticResource GrayMedium}" /> 
    <SolidColorBrush x:Key="GrayMediumDarkBrush" Color="{StaticResource GrayMediumDark}" /> 

    <!-- changing height/width of scrollbar --> 
    <system:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">15</system:Double> 
    <system:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarHeightKey}">15</system:Double> 
    <system:Double x:Key="{x:Static SystemParameters.VerticalScrollBarButtonHeightKey}">15</system:Double> 
    <system:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}">15</system:Double> 

    <!-- routing to base colors, but using new names in order to make changes easy --> 
    <SolidColorBrush x:Key="VerticalScrollBarBackground" Color="{Binding Color, Source={StaticResource GrayUltraLightBrush}}" /> 
    <SolidColorBrush x:Key="HorizontalScrollBarBackground" Color="{Binding Color, Source={StaticResource VerticalScrollBarBackground}}" /> 
    <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="{Binding Color, Source={StaticResource GrayUltraLightBrush}}" /> 

    <SolidColorBrush x:Key="ThumbBackground" Color="{Binding Color, Source={StaticResource WhiteBrush}}" /> 
    <SolidColorBrush x:Key="ThumbMouseOverBrush" Color="{Binding Color, Source={StaticResource GrayUltraLightBrush}}" /> 
    <SolidColorBrush x:Key="ThumbPressedBrush" Color="{Binding Color, Source={StaticResource GrayUltraLightBrush}}" /> 
    <Thickness x:Key="ThumbBorderThickness">1</Thickness> 
    <SolidColorBrush x:Key="ThumbBorderBrush" Color="{Binding Color, Source={StaticResource GrayMediumBrush}}" /> 
    <SolidColorBrush x:Key="ThumbMouseOverBorderBrush" Color="{Binding Color, Source={StaticResource GrayMediumBrush}}" /> 
    <SolidColorBrush x:Key="ThumbPressedBorderBrush" Color="{Binding Color, Source={StaticResource GrayMediumDarkBrush}}" /> 

    <SolidColorBrush x:Key="ButtonBackground" Color="{Binding Color, Source={StaticResource WhiteBrush}}" /> 
    <SolidColorBrush x:Key="ButtonMouseOverBrush" Color="{Binding Color, Source={StaticResource WhiteBrush}}" /> 
    <SolidColorBrush x:Key="ButtonPressedBrush" Color="{Binding Color, Source={StaticResource GrayUltraLightBrush}}" /> 
    <Thickness x:Key="ButtonBorderThickness">1</Thickness> 
    <SolidColorBrush x:Key="ButtonBorderBrush" Color="{Binding Color, Source={StaticResource GrayMediumBrush}}" /> 
    <SolidColorBrush x:Key="ButtonMouseOverBorderBrush" Color="{Binding Color, Source={StaticResource GrayMediumDarkBrush}}" /> 
    <SolidColorBrush x:Key="ButtonPressedBorderBrush" Color="{Binding Color, Source={StaticResource GrayMediumDarkBrush}}" /> 

    <SolidColorBrush x:Key="ArrowBrush" Color="{Binding Color, Source={StaticResource GrayMediumDarkBrush}}"/> 
    <SolidColorBrush x:Key="ArrowMouseOverBrush" Color="{Binding Color, Source={StaticResource GrayMediumDarkBrush}}"/> 
    <SolidColorBrush x:Key="ArrowPressedBrush" Color="{Binding Color, Source={StaticResource GrayMediumDarkBrush}}"/> 


    <!-- ScrollViewer (implicit style) --> 
    <Style x:Key="{x:Type ScrollViewer}" TargetType="{x:Type ScrollViewer}"> 
     <Setter Property="Template" > 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ScrollViewer}"> 
        <Grid x:Name="Grid" Background="{TemplateBinding Background}"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*"/> 
          <ColumnDefinition Width="Auto"/> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="*"/> 
          <RowDefinition Height="Auto"/> 
         </Grid.RowDefinitions> 
         <Rectangle x:Name="Corner" Grid.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1"/> 
         <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/> 
         <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource ScrollBarStyle1}"/> 
         <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Style="{DynamicResource ScrollBarStyle1}"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
      <Trigger Property="IsEnabled" Value="false"> 
       <Setter Property="Foreground" Value="White"/> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

    <!-- Buttons (with arrows) --> 
    <Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}"> 
     <Setter Property="OverridesDefaultStyle" Value="true"/> 
     <Setter Property="Focusable" Value="false"/> 
     <Setter Property="IsTabStop" Value="false"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type RepeatButton}"> 
        <Grid x:Name="Root" Margin="0"> 
         <Border x:Name="BackgroundBorder" Background="{StaticResource ButtonBackground}" BorderBrush="{StaticResource ButtonBorderBrush}" BorderThickness="{StaticResource ButtonBorderThickness}"/> 
         <Path x:Name="Arrow" Stretch="None" Data="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" Fill="{StaticResource ArrowBrush}" HorizontalAlignment="Center" VerticalAlignment="Center" SnapsToDevicePixels="True"/> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter TargetName="BackgroundBorder" Property="Background" Value="{StaticResource ButtonMouseOverBrush}"/> 
          <Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="{StaticResource ButtonMouseOverBorderBrush}"/> 
          <Setter TargetName="Arrow" Property="Fill" Value="{StaticResource ArrowMouseOverBrush}"/> 
         </Trigger> 
         <Trigger Property="IsPressed" Value="True"> 
          <Setter TargetName="BackgroundBorder" Property="Background" Value="{StaticResource ButtonPressedBrush}"/> 
          <Setter TargetName="BackgroundBorder" Property="BorderBrush" Value="{StaticResource ButtonPressedBorderBrush}"/> 
          <Setter TargetName="Arrow" Property="Fill" Value="{StaticResource ArrowPressedBrush}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

    <!-- PageButtons --> 
    <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}"> 
     <Setter Property="OverridesDefaultStyle" Value="true"/> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="Focusable" Value="false"/> 
     <Setter Property="IsTabStop" Value="false"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type RepeatButton}"> 
        <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}"> 
     <Setter Property="OverridesDefaultStyle" Value="true"/> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="Focusable" Value="false"/> 
     <Setter Property="IsTabStop" Value="false"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type RepeatButton}"> 
        <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

    <!-- Thumb --> 
    <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}"> 
     <Setter Property="SnapsToDevicePixels" Value="True"/> 
     <Setter Property="IsTabStop" Value="false"/> 
     <Setter Property="Focusable" Value="false"/> 
     <Setter Property="Background" Value="{StaticResource ThumbBackground}"/> 
     <Setter Property="BorderBrush" Value="{StaticResource ThumbBorderBrush}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Thumb}"> 
        <Grid Background="Transparent"> 
         <Border Background="{TemplateBinding Background}" Margin="{TemplateBinding Padding}" 
           BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{StaticResource ThumbBorderThickness}" /> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter Property="Background" Value="{StaticResource ThumbMouseOverBrush}"/> 
          <Setter Property="BorderBrush" Value="{StaticResource ThumbMouseOverBorderBrush}"/> 
         </Trigger> 
         <Trigger Property="IsDragging" Value="True"> 
          <Setter Property="Background" Value="{StaticResource ThumbPressedBrush}"/> 
          <Setter Property="BorderBrush" Value="{StaticResource ThumbPressedBorderBrush}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

    <!-- ScrollBar --> 
    <Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}"> 
     <Setter Property="Background" Value="{StaticResource VerticalScrollBarBackground}"/> 
     <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/> 
     <Setter Property="Stylus.IsFlicksEnabled" Value="false"/> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
     <Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/> 
     <Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ScrollBar}"> 
        <Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"> 
         <Grid.RowDefinitions> 
          <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/> 
          <RowDefinition Height="0.00001*"/> 
          <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/> 
         </Grid.RowDefinitions> 
         <RepeatButton Command="{x:Static ScrollBar.LineUpCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Content="M 0 3.5 L 3.5 0 L 7 3.5 Z" /> 
         <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1"> 
          <Track.DecreaseRepeatButton> 
           <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/> 
          </Track.DecreaseRepeatButton> 
          <Track.IncreaseRepeatButton> 
           <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/> 
          </Track.IncreaseRepeatButton> 
          <Track.Thumb> 
           <Thumb Style="{StaticResource ScrollBarThumb}" /> 
          </Track.Thumb> 
         </Track> 
         <RepeatButton Command="{x:Static ScrollBar.LineDownCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2" Style="{StaticResource ScrollBarButton}" Content="M 0 0 L 7 0 L 3.5 3.5 Z" /> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
      <Trigger Property="Orientation" Value="Horizontal"> 
       <Setter Property="Width" Value="Auto"/> 
       <Setter Property="MinWidth" Value="0"/> 
       <Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/> 
       <Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/> 
       <Setter Property="Background" Value="{StaticResource HorizontalScrollBarBackground}"/> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="{x:Type ScrollBar}"> 
          <Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/> 
            <ColumnDefinition Width="0.00001*"/> 
            <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/> 
           </Grid.ColumnDefinitions> 
           <RepeatButton Command="{x:Static ScrollBar.LineLeftCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Content="M 3.5 0 L 3.5 7 L 0 3.5 Z"/> 
           <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}"> 
            <Track.DecreaseRepeatButton> 
             <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/> 
            </Track.DecreaseRepeatButton> 
            <Track.IncreaseRepeatButton> 
             <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/> 
            </Track.IncreaseRepeatButton> 
            <Track.Thumb> 
             <Thumb Style="{StaticResource ScrollBarThumb}" /> 
            </Track.Thumb> 
           </Track> 
           <RepeatButton Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Content="M 0 0 L 3.5 3.5 L 0 7 Z" /> 
          </Grid> 
          <ControlTemplate.Triggers> 
           <Trigger Property="IsEnabled" Value="false"> 
            <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/> 
           </Trigger> 
          </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

</ResourceDictionary>