window phone7中自定义listbox或scrollviewer滚动条样式

window phone7中的 listbox或scrollviewer提供丰富绚丽的效果，当然包括滚动条在使用时自动显示，在停止滚动时自动隐藏(这点和ios差不多)，但是在很多情况下我们需要自定义滚动条的样式，我遇到的问题是重写scrollviewer控件模板，因为listbox其实是有scrollviewer提供滚动的，但是在【用户滚动时显示滚动条，停止滚动时隐藏滚动条】上遇到了麻烦，后从stack overflow看到了解决办法，收藏在这里了..代码

code如下

scrollviewer style

< Style  x:Key ="ScrollViewerStyleGray"  TargetType ="ScrollViewer" >
         < Setter  Property ="VerticalScrollBarVisibility"  Value ="Auto" />
         < Setter  Property ="HorizontalScrollBarVisibility"  Value ="Disabled" />
         < Setter  Property ="Background"  Value ="Transparent" />
         < Setter  Property ="Padding"  Value ="0" />
         < Setter  Property ="BorderThickness"  Value ="0" />
         < Setter  Property ="BorderBrush"  Value ="Transparent" />
         < Setter  Property ="Template" >
             < Setter.Value >
                 < ControlTemplate  TargetType ="ScrollViewer" >
                     < Border  BorderBrush =" {TemplateBinding BorderBrush} "  BorderThickness =" {TemplateBinding BorderThickness} "  Background =" {TemplateBinding Background} " >
                         < VisualStateManager.VisualStateGroups >
                             < VisualStateGroup  x:Name ="ScrollStates" >
                                 < VisualStateGroup.Transitions >
                                     < VisualTransition  GeneratedDuration ="00:00:00.5" />
                                 </ VisualStateGroup.Transitions >
                                 < VisualState  x:Name ="Scrolling" >
                                     < Storyboard >
                                         < DoubleAnimation  Duration ="0"  To ="1"  Storyboard.TargetProperty ="Opacity"  Storyboard.TargetName ="VerticalScrollBar" />
                                         < DoubleAnimation  Duration ="0"  To ="1"  Storyboard.TargetProperty ="Opacity"  Storyboard.TargetName ="HorizontalScrollBar" />
                                     </ Storyboard >
                                 </ VisualState >
                                 < VisualState  x:Name ="NotScrolling" />
                             </ VisualStateGroup >
                         </ VisualStateManager.VisualStateGroups >
                         < Grid  Margin =" {TemplateBinding Padding} " >
                             < ScrollContentPresenter  x:Name ="ScrollContentPresenter"  ContentTemplate =" {TemplateBinding ContentTemplate} "  Content =" {TemplateBinding Content} " />
                             < ScrollBar  x:Name ="VerticalScrollBar"  HorizontalAlignment ="Right"  Height ="Auto"  IsHitTestVisible ="False"  IsTabStop ="False"  Maximum =" {TemplateBinding ScrollableHeight} "  Minimum ="0"  Opacity ="0"  Orientation ="Vertical"  Visibility =" {TemplateBinding ComputedVerticalScrollBarVisibility} "  Value =" {TemplateBinding VerticalOffset} "  ViewportSize =" {TemplateBinding ViewportHeight} "  VerticalAlignment ="Stretch"  Width ="7"  Background ="#FF666565" />
                             < ScrollBar  x:Name ="HorizontalScrollBar"  HorizontalAlignment ="Stretch"  Height ="5"  IsHitTestVisible ="False"  IsTabStop ="False"  Maximum =" {TemplateBinding ScrollableWidth} "  Minimum ="0"  Opacity ="0"  Orientation ="Horizontal"  Visibility =" {TemplateBinding ComputedHorizontalScrollBarVisibility} "  Value =" {TemplateBinding HorizontalOffset} "  ViewportSize =" {TemplateBinding ViewportWidth} "  VerticalAlignment ="Bottom"  Width ="Auto" />
                         </ Grid >
                     </ Border >
                 </ ControlTemplate >
             </ Setter.Value >
         </ Setter >

</Style>  

   list box style

 

< Style  x:Key ="ListBoxStyleGray"  TargetType ="ListBox" >        

<Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" 
                              BorderThickness="{TemplateBinding BorderThickness}" 
                              Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}" Style="{StaticResource ScrollViewerStyleGray}" >

                        <ItemsPresenter/>
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 

 运行效果如下

 

 代码下载