Question

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

Answer 1

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

当我听到动画时，我想到了状态。如果使用状态实现ScrollViewer会很好，但不幸的是，事实并非如此。通过使用DataStateBehavior，我们可以从属性中创建状态 - 在本例中，是ComputedVerticalScrollBarVisibility属性的状态。出于某种原因，使用TemplateBinding将DataStateBehavior绑定到ScrollViewer的ComputedVerticalScrollBarVisibility无效。（任何人都知道为什么？）我能够将它绑定到VerticalScrollbar Visibility属性，但我决定不：为了使淡出效果起作用，我不希望VerticalScrollbar.Visibility仍然绑定到ComputedVerticalScrollBarVisibility，因为如果是，则当属性发生更改时，滚动条会立即消失。相反，我使用VerticalScrollbar Tag属性来保存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>

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

Silverlight ScrollViewer - 淡出滚动条

1 个答案: