|
|
Are you using our default theme (NoesisTheme.DarkBlue) in Noesis Settings as Application Resources or your own?
Our new ScrollViewer style hides scroll bars until you move mouse over the control, showing a thin rectangle that animates to the actual ScrollBar when it is hovered. The effect is very similar to what you see in UWP applications.
Is that what you are seeing? |
|
|
ok, here is everything:
<UserControl.Resources>
<ResourceDictionary>
<Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="Grid">
<Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto"
Height="Auto" Fill="Transparent"/>
<Border x:Name="Rectangle1" CornerRadius="7 7 7 7" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Width="Auto" Height="Auto"
Background="{TemplateBinding Background}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Tag" Value="Horizontal">
<Setter TargetName="Rectangle1" Property="Width" Value="Auto"/>
<Setter TargetName="Rectangle1" Property="Height" Value="7"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
<Setter Property="Foreground" Value="#56CBFF"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Width" Value="10"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="GridRoot" Width="10" Background="{x:Null}">
<Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="true" Focusable="False">
<Track.Thumb>
<Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}"
Style="{DynamicResource ScrollThumbs}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp" Command="ScrollBar.PageDownCommand" Opacity="1" Focusable="False" Width="4" BorderBrush="Transparent" Background="#FFCDCDCD"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown" Command="ScrollBar.PageUpCommand" Opacity="1" Focusable="False" Width="4" BorderBrush="Transparent" Background="#FFCDCDCD"/>
</Track.DecreaseRepeatButton>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Thumb" Property="IsMouseOver" Value="true">
<Setter Value="#FF98D9F6"
TargetName="Thumb" Property="Background"/>
</Trigger>
<Trigger SourceName="Thumb" Property="IsDragging" Value="true">
<Setter Value="#FF98D9F6" TargetName="Thumb" Property="Background"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Thumb" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="Orientation" Value="Horizontal">
<Setter TargetName="GridRoot" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
<Setter TargetName="PART_Track" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Height" Value="10"/>
<Setter TargetName="Thumb" Property="Tag" Value="Horizontal"/>
<Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand"/>
<Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</UserControl.Resources>
.
.
.
<ScrollViewer x:Name="ScrollView" HorizontalAlignment="Stretch" BorderThickness="2" Margin="4,0" VerticalAlignment="Stretch" Background="#00000000"/> |
|
|
Our ScrollViewer template plays with MinWidth/MinHeight of its scroll bars to achieve some effects. You can add <Setter Property="MinWidth" Value="10"/> to your ScrollBar style to make them visible, but the ScrollViewer style still fades in/out the scroll bars, so my recomendation is you define your own style/template to get the result you want, something like this:
<ControlTemplate x:Key="Template.ScrollViewer" TargetType="ScrollViewer">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource Corner.Border0}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=""/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=""/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ScrollContentPresenter Grid.RowSpan="2" Grid.ColumnSpan="2" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" CanContentScroll="{TemplateBinding CanContentScroll}" Margin="{TemplateBinding Padding}"/>
<ScrollBar x:Name="PART_HorizontalScrollBar" Grid.Column="0" Grid.Row="1" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Minimum="0" Maximum="{TemplateBinding ScrollableWidth}"/>
<ScrollBar x:Name="PART_VerticalScrollBar" Grid.Column="1" Grid.Row="0" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Minimum="0" Maximum="{TemplateBinding ScrollableHeight}"/>
</Grid>
</Border>
</ControlTemplate>
<Style TargetType="ScrollViewer" BasedOn="{StaticResource {x:Type ContentControl}}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template" Value="{StaticResource Template.ScrollViewer}"/>
</Style>
|
