的Silverlight的ScrollViewer - 淡入\出滚动条

Question

我有一个ScrollViewer中，我想动画显示的垂直滚动条的方式。滚动条设置为AUTO，所以我希望它在需要时淡入淡出，不需要时淡出。 我知道如何钻入模板并更改颜色和外观，但是我可以进行如下更改吗？

Answer 1

这是一个有趣的问题。由于Scrollbar和ScrollViewer被封闭，这是一个挑战。 （我想使用Reflector制作一个ScrollViewer的副本，但这里只有一个XAML解决方案）。

当我听到动画，我觉得状态。如果ScrollViewer使用状态来实现，那将会很不错，但不幸的是，它不是。通过使用DataStateBehavior，我们可以创建一个属性 - 在这种情况下，为ComputedVerticalScrollBarVisibility属性声明状态。出于某种原因，使用TemplateBinding无法将DataStateBehavior绑定到ScrollViewer的ComputedVerticalScrollBarVisibility。 （谁知道为什么？）我是能够绑定到VerticalScrollbar可见性属性，但我决定不： 为了使淡出的工作，我不想VerticalScrollbar.Visibility仍然被绑定到ComputedVerticalScrollBarVisibility因为如果是这样的话，那么滚动条会在物业发生变化时立即消失。相反，我使用VerticalScrollbar标签属性来保存ComputedVerticalScrollBarVisibility并将DataStateBehavior绑定到VerticalScrollbar标签。

现在的状态很到位，这是一件容易的事情来设置每个状态的不透明度和状态转换时间和瞧！你在ScrollViewer中淡入。

<UserControl 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="SilverlightApplication5.MainPage" 
    mc:Ignorable="d" 
    d:DesignHeight="300" d:DesignWidth="400"> 
    <UserControl.Resources> 
     <Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer"> 
      <Setter Property="HorizontalContentAlignment" Value="Left"/> 
      <Setter Property="VerticalContentAlignment" Value="Top"/> 
      <Setter Property="VerticalScrollBarVisibility" Value="Visible"/> 
      <Setter Property="Padding" Value="4"/> 
      <Setter Property="BorderThickness" Value="1"/> 
      <Setter Property="BorderBrush"> 
       <Setter.Value> 
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
         <GradientStop Color="#FFA3AEB9" Offset="0"/> 
         <GradientStop Color="#FF8399A9" Offset="0.375"/> 
         <GradientStop Color="#FF718597" Offset="0.375"/> 
         <GradientStop Color="#FF617584" Offset="1"/> 
        </LinearGradientBrush> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ScrollViewer"> 
         <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="VisualStateGroup"> 
            <VisualStateGroup.Transitions> 
             <VisualTransition GeneratedDuration="0:0:0.5"/> 
            </VisualStateGroup.Transitions> 
            <VisualState x:Name="VerticalVisible"> 
             <Storyboard> 
              <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="VerticalScrollBar" d:IsOptimized="True"/> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="VerticleHidden"> 
             <Storyboard> 
              <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="VerticalScrollBar" d:IsOptimized="True"/> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Grid Background="{TemplateBinding Background}"> 
           <i:Interaction.Behaviors> 
            <ei:DataStateBehavior Binding="{Binding Tag, ElementName=VerticalScrollBar}" Value="Visible" TrueState="VerticalVisible" FalseState="VerticleHidden"/> 
           </i:Interaction.Behaviors> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="*"/> 
            <ColumnDefinition Width="Auto"/> 
           </Grid.ColumnDefinitions> 
           <Grid.RowDefinitions> 
            <RowDefinition Height="*"/> 
            <RowDefinition Height="Auto"/> 
           </Grid.RowDefinitions> 
           <ScrollContentPresenter x:Name="ScrollContentPresenter" Cursor="{TemplateBinding Cursor}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}"/> 
           <Rectangle Grid.Column="1" Fill="#FFE9EEF4" Grid.Row="1"/> 

           <ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Margin="0,-1,-1,-1" Minimum="0" Orientation="Vertical" Grid.Row="0" Tag="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" Width="18"/> 
           <ScrollBar x:Name="HorizontalScrollBar" Grid.Column="0" Height="18" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Margin="-1,0,-1,-1" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}"/> 
          </Grid> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </UserControl.Resources> 

    <Grid x:Name="LayoutRoot" Background="Beige"> 
     <ScrollViewer VerticalScrollBarVisibility="Auto" Style="{StaticResource ScrollViewerStyle1}"> 
      <Rectangle Margin="10" Fill="LightBlue" MinHeight="300" /> 
     </ScrollViewer> 
    </Grid> 
</UserControl> 

要运行此操作，请运行此代码并缩小浏览器窗口。滚动条将淡入视图。