转自:http://www.cnblogs.com/yoainet/archive/2012/02/17/2356181.html
window phone7中的 listbox或scrollviewer提供丰富绚丽的效果,当然包括滚动条在使用时自动显示,在停止滚动时自动隐藏(这点和ios差不多),但是在很多情况下我们需要自定义滚动条的样式,我遇到的问题是重写scrollviewer控件模板,因为listbox其实是有scrollviewer提供滚动的,但是在【用户滚动时显示滚动条,停止滚动时隐藏滚动条】上遇到了麻烦,后从stack overflow看到了解决办法,收藏在这里了..代码
code如下
scrollviewer style
< 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
<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>
运行效果如下