How to override default styles for ScrollBar and Thumb?
Posted: 15 Dec 2014, 00:32
Hi,
I'm trying to override the style of ScrollViewer component to make the scroll bar look like it looks on iOS as described here: http://stackoverflow.com/questions/1096 ... ollbar-wpf
In Blend I see exactly what is expected, but when I run it in Unity with NoesisGUI, it's obvious that styles are ignored (see attached screenshots).
DefaultStyles.xaml:
UI.xaml:
Am I doing something wrong? What should I do to override the default styling of Thumb and ScrollBar, and to apply my own styling?
I'm trying to override the style of ScrollViewer component to make the scroll bar look like it looks on iOS as described here: http://stackoverflow.com/questions/1096 ... ollbar-wpf
In Blend I see exactly what is expected, but when I run it in Unity with NoesisGUI, it's obvious that styles are ignored (see attached screenshots).
DefaultStyles.xaml:
Code: Select all
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!--Scrollbar Thumbs-->
<Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid x:Name="Grid">
<Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Fill="Transparent"/>
<Border x:Name="Rectangle1" CornerRadius="5" 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>
<!--ScrollBars-->
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
<Setter Property="Foreground" Value="#8C8C8C"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Width" Value="8"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="GridRoot" Width="8" Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="0.00001*"/>
</Grid.RowDefinitions>
<Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="true" Focusable="false">
<Track.Thumb>
<Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}" Style="{StaticResource ScrollThumbs}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="false"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="false"/>
</Track.DecreaseRepeatButton>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Thumb" Property="IsMouseOver" Value="true">
<Setter Value="{DynamicResource ButtonSelectBrush}" TargetName="Thumb" Property="Background"/>
</Trigger>
<Trigger SourceName="Thumb" Property="IsDragging" Value="true">
<Setter Value="{DynamicResource DarkBrush}" 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="8"/>
<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>Code: Select all
<Grid
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:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
x:Name="rootPanel"
Margin="0"
d:DesignWidth="720" d:DesignHeight="1280">
<Grid.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="DefaultStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Grid.Resources>
<ScrollViewer x:Name="ContentScrollViewver" Grid.Row="4" VerticalScrollBarVisibility="Auto" IsManipulationEnabled="True" PanningMode="VerticalOnly" Background="White">
<Viewbox x:Name="ContentViewbox" VerticalAlignment="Top">
<StackPanel Width="600">
<TextBlock x:Name="Content_Text_1" TextWrapping="Wrap" Text="{DynamicResource Text_1}" FontSize="20"/>
</StackPanel>
</Viewbox>
</ScrollViewer>
</Grid>
