的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> 

要運行此操作，請運行此代碼並縮小瀏覽器窗口。滾動條將淡入視圖。