Направете ScrollBar на ScrollViewer винаги видим чрез отмяна или стилизиране

Опитвам се да направя ScrollBar за ScrollViewer винаги видим, така че да не се появява само когато се опитам да превъртя текстовия изглед и така потребителят да знае, че има още нещо за виждане. Отначало по някаква причина си помислих, че просто трябва да сменя цвета, който се нуждаеше от замяна на четката, но в действителност ScrollBar избледнява и изчезва, така че или шаблонът на ScrollViewer, или на ScrollBar трябва да се промени.

Намерих шаблона на ScrollViewer, който току-що поставих в секцията App.Resources, но не знам как да го редактирам, така че лентата за превъртане да се вижда през цялото време:

<Style TargetType="ScrollViewer">
    <Setter Property="HorizontalScrollMode" Value="Enabled" />
    <Setter Property="VerticalScrollMode" Value="Enabled" />
    <Setter Property="IsHorizontalRailEnabled" Value="True" />
    <Setter Property="IsVerticalRailEnabled" Value="True" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="ZoomMode" Value="Enabled" />
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="VerticalScrollBarVisibility" Value="Visible"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ScrollViewer">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ScrollingIndicatorStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="MouseIndicator" To="NoIndicator">
                                    <Storyboard>
                                        <FadeOutThemeAnimation TargetName="ScrollBarSeparator" BeginTime="0:0:3" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
                                                                   Storyboard.TargetProperty="IndicatorMode">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:3">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
                                                                   Storyboard.TargetProperty="IndicatorMode">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:3">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualTransition>
                                <VisualTransition From="TouchIndicator" To="NoIndicator">
                                    <Storyboard>
                                        <FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
                                                                   Storyboard.TargetProperty="IndicatorMode">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
                                                                   Storyboard.TargetProperty="IndicatorMode">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <ScrollingIndicatorMode>None</ScrollingIndicatorMode>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualTransition>
                            </VisualStateGroup.Transitions>

                            <VisualState x:Name="NoIndicator">
                                <Storyboard>
                                    <FadeOutThemeAnimation TargetName="ScrollBarSeparator" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="TouchIndicator">
                                <Storyboard>
                                                                            <FadeInThemeAnimation TargetName="ScrollBarSeparator" />

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
                                                               Storyboard.TargetProperty="IndicatorMode"
                                                               Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
                                                               Storyboard.TargetProperty="IndicatorMode"
                                                               Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <ScrollingIndicatorMode>TouchIndicator</ScrollingIndicatorMode>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MouseIndicator">
                                <Storyboard>
                                    <FadeInThemeAnimation TargetName="ScrollBarSeparator" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalScrollBar"
                                                               Storyboard.TargetProperty="IndicatorMode"
                                                               Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalScrollBar"
                                                               Storyboard.TargetProperty="IndicatorMode"
                                                               Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <ScrollingIndicatorMode>MouseIndicator</ScrollingIndicatorMode>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <ScrollContentPresenter x:Name="ScrollContentPresenter"
                                            Grid.RowSpan="2"
                                            Grid.ColumnSpan="2"
                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                            Margin="{TemplateBinding Padding}" />
                        <ScrollBar x:Name="VerticalScrollBar"
                               Grid.Column="1"
                               IsTabStop="False"
                               Maximum="{TemplateBinding ScrollableHeight}"
                               Orientation="Vertical"
                               Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                               Value="{TemplateBinding VerticalOffset}"
                               ViewportSize="{TemplateBinding ViewportHeight}"
                               HorizontalAlignment="Right"/>
                        <ScrollBar x:Name="HorizontalScrollBar"
                               IsTabStop="False"
                               Maximum="{TemplateBinding ScrollableWidth}"
                               Orientation="Horizontal"
                               Grid.Row="1"
                               Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                               Value="{TemplateBinding HorizontalOffset}"
                               ViewportSize="{TemplateBinding ViewportWidth}" />
                        <!-- Change the opacity below, to zero. otherwise, the right and bottom border end up showing up as a single pixel lit on the screen even if the scroll is disabled. -->
                        <Border x:Name="ScrollBarSeparator"
                            Grid.Row="1"
                            Grid.Column="1"
                            Opacity="0"
                            BorderThickness="0,0,1,1"
                            Background="{StaticResource ScrollBarTrackBackgroundThemeBrush}"
                            BorderBrush="{StaticResource ScrollBarTrackBorderThemeBrush}" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Опитах се да изтрия различни части от кода, но в резултат скролбарът просто изчезва напълно.

Искам лентата за превъртане да се показва през цялото време, без да избледнява по този начин.


windows-runtime windows-8.1 windows-phone-8.1
person Druvis Cukurs    schedule 31.07.2014    source източник
comment
Моля, добавете моментна снимка за вашия въпрос.   -  person Heena Patil    schedule 31.07.2014
comment
Както беше поискано, добавих изображение.   -  person Druvis Cukurs    schedule 31.07.2014

Отговори (2)


arrow_upward
3
arrow_downward

За да постигнете очаквания резултат, трябва да промените стила на Scrollbar, тъй като scrollviewer е направен от лента за превъртане.

Работеща лента за превъртане

 <x:Double x:Key="ScrollBarMinThemeWidth">7</x:Double>
    <x:Double x:Key="ScrollBarMinThemeHeight">7</x:Double>
    <x:Double x:Key="ScrollBarPanningThumbThemeHeight">2.4</x:Double>
    <x:Double x:Key="ScrollBarPanningThumbThemeWidth">2.4</x:Double>
    <Style  TargetType="ScrollBar">
        <Setter Property="MinWidth" Value="{ThemeResource ScrollBarMinThemeWidth}"/>
        <Setter Property="MinHeight" Value="{ThemeResource ScrollBarMinThemeHeight}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ScrollBar">
                    <Grid x:Name="Root" Background="Red">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ScrollingIndicatorStates">
                                <VisualState x:Name="TouchIndicator">
                                    <!--<Storyboard>
                                        <FadeInThemeAnimation Storyboard.TargetName="HorizontalPanningRoot"/>
                                        <FadeInThemeAnimation Storyboard.TargetName="VerticalPanningRoot"/>
                                    </Storyboard>-->
                                </VisualState>
                                <VisualState x:Name="MouseIndicator"/>
                                <VisualState x:Name="NoIndicator">
                                    <!--<Storyboard>
                                        <FadeOutThemeAnimation BeginTime="0" Storyboard.TargetName="HorizontalPanningRoot"/>
                                        <FadeOutThemeAnimation BeginTime="0" Storyboard.TargetName="VerticalPanningRoot"/>
                                    </Storyboard>-->
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid x:Name="HorizontalPanningRoot" MinWidth="53">
                            <Rectangle x:Name="HorizontalPanningThumb" AutomationProperties.AccessibilityView="Raw" Fill="{ThemeResource ScrollBarPanningBackgroundThemeBrush}" HorizontalAlignment="Left" Height="{ThemeResource ScrollBarPanningThumbThemeHeight}" MinWidth="{ThemeResource ScrollBarMinThemeWidth}"/>
                        </Grid>
                        <Grid x:Name="VerticalPanningRoot" MinHeight="53">
                            <Rectangle x:Name="VerticalPanningThumb" AutomationProperties.AccessibilityView="Raw" Fill="{ThemeResource ScrollBarPanningBackgroundThemeBrush}" MinHeight="{ThemeResource ScrollBarMinThemeHeight}" VerticalAlignment="Top" Width="{ThemeResource ScrollBarPanningThumbThemeWidth}"/>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

<ScrollViewer Height="300" Margin="30" ScrollViewer.VerticalScrollMode="Enabled"  ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible">
    <TextBlock FontSize="20" TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum."/>      
</ScrollViewer>

Резултат

въведете описание на изображението тук

person Heena Patil    schedule 31.07.2014

arrow_upward
4
arrow_downward

Защо просто не зададете VerticalScrollBarVisibility и/или HorizontalScrollBarVisibility на вашето копие на ScrollViewer на Visible, вместо да премахнете поведението на избледняване от стила?

<ScrollViewer VerticalScrollBarVisibility="Visible">
     <!-- ScrollViewer Content -->
</ScrollViewer>

РЕДАКТИРАНЕ СЛЕД КОМЕНТАР:

Мисля, че измислих "решение". Не съм сигурен дали това е най-добрият начин за постигане на това, но изглежда дава резултата, който искате.

Създайте персонализиран стил за theScrollViewer, след това направете един за самия вертикален/хоризонтален ScrollBar (използвайки Blend, което предположих, че сте направили преди). След като имате копие на стила по подразбиране, редактирайте следните редове:

<VisualState x:Name="NoIndicator">
    <Storyboard>
        <FadeOutThemeAnimation BeginTime="0" TargetName="HorizontalPanningRoot"/>
        <FadeOutThemeAnimation BeginTime="0" TargetName="VerticalPanningRoot"/>
        <Fade**In**ThemeAnimation BeginTime="0" TargetName="HorizontalRoot"/>
        <Fade**In**ThemeAnimation BeginTime="0" TargetName="VerticalRoot"/>
    </Storyboard>
</VisualState>

Предполагам, че това буквално кара ScrollBar да избледнява, когато не се взаимодейства с него, което означава, че винаги ще бъде видимо.

Ето съответния XAML на ScrollViewer (не мога да побера всичко в отговора). Забележете, че ScrollViewer е настроен да използва моя персонализиран стил ScrollViewerStyle1, след което в рамките на този стил VerticalScrollBar е зададен на моя ScrollBar персонализиран стил ScrollBarCustomStyle1, където NoIndicator VisualState е модифициран. Можете да направите същото с хоризонталната лента за превъртане, ако е необходимо.

Стил на ScrollViewer:

<ScrollContentPresenter x:Name="ScrollContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" Grid.RowSpan="2"/>
<ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" HorizontalAlignment="Right" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{StaticResource ScrollBarStyle1}"/>
<ScrollBar x:Name="HorizontalScrollBar" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}"/>
<Border x:Name="ScrollBarSeparator" BorderBrush="{ThemeResource ScrollBarTrackBorderThemeBrush}" BorderThickness="0,0,1,1" Background="{ThemeResource ScrollBarTrackBackgroundThemeBrush}" Grid.Column="1" Grid.Row="1"/>
person J.B    schedule 31.07.2014
comment
Съжалявам, че забравих да спомена, че вече го опитах/потърсих в Google. Не работи така: тук има малко пропусклива абстракция, където Visible не означава същото нещо за ScrollViewer, както за човек, който чете. С VerticalScrollBarVisibility, зададен на Visible, ScrollBar винаги е там и е видим, що се отнася до ScrollViewer. В рамките на самата лента за превъртане обаче лентата за превъртане и палецът рисуват само ако са в режим MouseIndicator: стиловете на лентата за превъртане по подразбиране не се показват, ако потребителят не взаимодейства с тях с мишката. tinyurl.com/och8xrz - person Druvis Cukurs; 31.07.2014
comment
Редактиран отговор, вижте по-горе - person J.B; 31.07.2014
comment
Като използвате стила по подразбиране от тук (msdn.microsoft. com/en-us/library/windows/apps/xaml/), получавам 4 грешки ThemeBrush и ThemeThickness (ресурсът не може да бъде разрешен). Бихте ли предоставили стила по подразбиране, който използвате? Преди се опитах да разреша избледняването на влизане и излизане чрез състоянията на Blend ScrollViewer, но изглежда нямам инсталирано нещо. - person Druvis Cukurs; 31.07.2014
comment
Актуализиран. Също така промених малко оригиналните си инструкции, така че проверете и тях отново. - person J.B; 31.07.2014
comment
Мисля, че част от отговора липсва или сте забравили връзката. :) - person Druvis Cukurs; 31.07.2014
comment
Току-що коментирах редовете на VisualState NoIndicator и сега изглежда, че работи. - person arame3333; 03.02.2017