How to override default styles for ScrollBar and Thumb?

Post Reply
 
timashev
Topic Author
Posts: 28
Joined: 22 Jan 2014, 00:47

How to override default styles for ScrollBar and Thumb?

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:
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>
UI.xaml:
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>
Am I doing something wrong? What should I do to override the default styling of Thumb and ScrollBar, and to apply my own styling?
Attachments
unity.png
In Unity 4.6 with NoesisGUI 1.1.13
unity.png (1.63 KiB) Viewed 6701 times
blend.png
In Blend 2013
blend.png (1.54 KiB) Viewed 6701 times
Top
 
MrHayato
Posts: 36
Joined: 19 Sep 2014, 21:29

Re: How to override default styles for ScrollBar and Thumb?

15 Dec 2014, 06:33

It might be that the ScrollBar isn't being targeted properly. In my case, the scrollviewer has an overridden template, and the scrollbar points to the scrollbar style directly. Here's the one I use:

https://gist.github.com/MrHayato/c0006965757ed430bd3e

I don't have the triggers for horizontal scrollbars because in my case, it'll never be horizontal so I took it out. I should be easily re-added.
Top
 
timashev
Topic Author
Posts: 28
Joined: 22 Jan 2014, 00:47

Re: How to override default styles for ScrollBar and Thumb?

15 Dec 2014, 10:53

Thanks a lot! Adding a style for ScrollViewer helped!

This is the working code:

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="ScrollBarStyle" 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 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>

	<!-- ScrollViewer -->
	<Style x:Key="ScrollViewerStyle" TargetType="{x:Type ScrollViewer}">
		<Setter Property="OverridesDefaultStyle" Value="True"/>
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type ScrollViewer}">
					<Grid>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="16"/>
							<ColumnDefinition />
							<ColumnDefinition Width="16"/>
						</Grid.ColumnDefinitions>
						<Grid.RowDefinitions>
							<RowDefinition />
						</Grid.RowDefinitions>
						<ScrollContentPresenter Grid.ColumnSpan="3" />
						<ScrollBar x:Name="PART_VerticalScrollBar" Grid.Column="2" Value="{TemplateBinding VerticalOffset}" Maximum="{TemplateBinding ScrollableHeight}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource ScrollBarStyle}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
</ResourceDictionary>
Usage:
Code: Select all
<ScrollViewer ... Style="{StaticResource ScrollViewerStyle}">...</ScrollViewer>
Top
 
User avatar
sfernandez
Site Admin
Posts: 3222
Joined: 22 Dec 2011, 19:20

Re: How to override default styles for ScrollBar and Thumb?

15 Dec 2014, 14:40

It's nice to see how people is helping each other :D

As you have noticed, you need to override ScrollViewer template because our default style is assigning the template of its scrollbars explicitly. We have to change this in a future release so only by setting ScrollBar and ScrollBar Thumb styles will be enough to modify ScrollViewer's appearance.

Thanks for reporting.
Top
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Google [Bot] and 3 guests