Before I start explaining, let me show you the problem I was trying to solve,
As it can be seen from the image above, to scroll a single line of statement, real-estate required is twice that of actual data itself. 50% of the space has gone waste!
So came up with this,
It did save space, though not 50%!. Some amount of space has been lost to the scroll button themselves.
Then I was inspired by scroll bar provided VS for browsing options on right click of project file, where the scroll buttons are removed/collapsed if it can't be scrolled any further. Specifically in the image above the left scroll button doesn't make sense, since we are already at leftmost position, same applies to right scroll button when we have reached end.
This is what I achieved at the end.
I have written below the style I used for scrollviewer. (In case if you need further clarifications feel free to contact me.)
As it can be seen from the image above, to scroll a single line of statement, real-estate required is twice that of actual data itself. 50% of the space has gone waste!
So came up with this,
It did save space, though not 50%!. Some amount of space has been lost to the scroll button themselves.
Then I was inspired by scroll bar provided VS for browsing options on right click of project file, where the scroll buttons are removed/collapsed if it can't be scrolled any further. Specifically in the image above the left scroll button doesn't make sense, since we are already at leftmost position, same applies to right scroll button when we have reached end.
This is what I achieved at the end.
I have written below the style I used for scrollviewer. (In case if you need further clarifications feel free to contact me.)
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:CustomScroller.Controls"> <Style TargetType="{x:Type local:CustomScrollViewer}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:CustomScrollViewer}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition /> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <RepeatButton x:Name="PART_LeftRepeatButton" Grid.Row="1" Grid.Column="0" Command="ScrollBar.LineLeftCommand"> <Path Fill="#FF444444" Stroke="#FF444444" Data="M 0,5 L 5,0 L 5,10 Z"/> </RepeatButton> <RepeatButton x:Name="PART_UpRepeatButton" Grid.Row="0" Grid.Column="1" Command="ScrollBar.LineUpCommand"> <Path Fill="#FF444444" Stroke="#FF444444" Data="M 0,5 L 5,0 L 10,5 Z"/> </RepeatButton> <ScrollContentPresenter Grid.Row="1" Grid.Column="1" /> <RepeatButton x:Name="PART_RightRepeatButton" Grid.Row="1" Grid.Column="2" Command="ScrollBar.LineRightCommand"> <Path Fill="#FF444444" Stroke="#FF444444" Data="M 0,0 L 5,5 L 0,10 Z"/> </RepeatButton> <RepeatButton x:Name="PART_DownRepeatButton" Grid.Row="2" Grid.Column="1" Command="ScrollBar.LineDownCommand"> <Path Fill="#FF444444" Stroke="#FF444444" Data="M 0,0 L 10,0 L 5,5 Z"/> </RepeatButton> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary>
Here is the part of the code that decides when to show which repeat buttons.
//Updates the visiblity of Left and Right Repeat buttons.
leftRepeatButton.Visibility = ComputedHorizontalScrollBarVisibility;
rightRepeatButton.Visibility = ComputedHorizontalScrollBarVisibility;
if (ContentHorizontalOffset == 0) { leftRepeatButton.Visibility = Visibility.Collapsed; } if (ContentHorizontalOffset == ExtentWidth - ViewportWidth) { rightRepeatButton.Visibility = Visibility.Collapsed; }
//Updates the visiblity of Up and Down Repeat buttons.
upRepeatButton.Visibility = ComputedVerticalScrollBarVisibility;
downRepeatButton.Visibility = ComputedVerticalScrollBarVisibility;
if (ContentVerticalOffset == 0) { upRepeatButton.Visibility = Visibility.Collapsed; } if (ContentVerticalOffset == ExtentHeight - ViewportHeight) { downRepeatButton.Visibility = Visibility.Collapsed; }
No comments:
Post a Comment