Silverlight ScrollViewer - исчезнуть \ из полосы прокрутки - PullRequest
Новая
       31

Silverlight ScrollViewer - исчезнуть \ из полосы прокрутки

2 голосов
/ 19 марта 2011

У меня есть прокрутка, и я хочу анимировать способ отображения вертикальной полосы прокрутки. Полоса прокрутки установлена ​​на AUTO, поэтому я хочу, чтобы она появлялась, когда это необходимо, и исчезала, когда она не нужна. Я знаю, как детализировать шаблоны и изменять цвета и внешний вид, но могу ли я сделать такое изменение?

1 Ответ

5 голосов
/ 20 марта 2011

Это был забавный вопрос. Поскольку Scrollbar и ScrollViewer запечатаны, это было немного сложным. (Я думал о создании копии ScrollViewer с использованием Reflector, но вот решение только для XAML).

Когда я услышал анимацию, я подумал о состояниях. Было бы неплохо, если бы ScrollViewer был реализован с использованием состояний, но, к сожалению, это не так. Используя DataStateBehavior, мы можем создавать состояния из свойства - в этом случае состояния для свойства ComputedVerticalScrollBarVisibility. По какой-то причине не удалось связать DataStateBehavior с ComputedVerticalScrollBarVisibility ScrollViewer с помощью TemplateBinding. (Кто-нибудь знает почему?) Мне удалось привязать его к свойству VerticalScrollbar Visibility, но я решил не делать этого: Чтобы Fade out работал, я не хотел, чтобы 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>

Чтобы увидеть это в действии, запустите этот код и уменьшите окно браузера. Полоса прокрутки исчезнет.

...