c# - 使滚动条淡入/淡出

Question

当您不在 ScrollViewer 上方时，我将滚动条设置为隐藏，仅在您将鼠标悬停在上方时显示

这是我正在使用的代码 - 效果很好

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="False">
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
    </Trigger>

    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Visible"/>
    </Trigger>
</ControlTemplate.Triggers>

我的问题是，如何使滚动条淡入淡出，而不是立即显示/隐藏？

Answer 1

使用视觉状态（参见http://msdn.microsoft.com/en-us/library/system.windows.visualstatemanager.aspx）。这允许您直接从 xaml 制作动画

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="HideScrollbar">
        <VisualState x:Name="Invisible">                                    
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="scrollBar" Storyboard.TargetProperty="Opacity"                                              
                    To="0"
                    Duration="0:0:0.25"/>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Visible">
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="scrollBar" Storyboard.TargetProperty="Opacity" 
                        To="1"
                        Duration="0:0:0.25"/>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
   </VisualStateManager.VisualStateGroups>

将此与 xaml.cs 文件中的状态更改相结合

public void OnMouseOver(...)
{
    VisualStateManager.GoToState(this, "Visible", true);
}

public void OnMouseLeave(...)
{
    VisualStateManager.GoToState(this, "Invisible", true);
}