Articles in this section
Category / Section

How to show Horizontal and vertical scrollbars without overlapping

1 min read

In WinRT, ScrollBar is overlapped on content by default. You can overcome this behavior by customize the style of Scrollviewer and remove the rowspan and columnspan values respectively as below,

 

 XAML: 

<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="Disabled" />
                <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}">
                                <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.Row="0" Grid.Column="0"
                                                     Grid.RowSpan="2"
                                                Grid.ColumnSpan="2"
 
                                                ContentTemplate="{TemplateBinding ContentTemplate}" 
                                                Margin="{TemplateBinding Padding}" />
                                    <ScrollBar x:Name="VerticalScrollBar"
                                   Grid.Column="1"
                                           Grid.Row="0"
                                   IsTabStop="False"
                                   Maximum="{TemplateBinding ScrollableHeight}"
                                   Orientation="Vertical" IndicatorMode="MouseIndicator"
                                   Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                   Value="{TemplateBinding VerticalOffset}"
                                   ViewportSize="{TemplateBinding ViewportHeight}"
                                   HorizontalAlignment="Right"/>
                                    <ScrollBar x:Name="HorizontalScrollBar"
                                   IsTabStop="False"
                                   Maximum="{TemplateBinding ScrollableWidth}"
                                   Orientation="Horizontal" IndicatorMode="MouseIndicator"
                                   Grid.Row="1" Grid.Column="0" 
                                   Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                   Value="{TemplateBinding HorizontalOffset}"
                                   ViewportSize="{TemplateBinding ViewportWidth}" />
                                    <Border x:Name="ScrollBarSeparator"
                                Grid.Row="1"
                                Grid.Column="1"
                                BorderThickness="0,0,1,1"
                                Background="Gray"
                                BorderBrush="Gray" />
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

 

Note:

You can get the default ScrollViewer style through visual studio designer by right click on the ScrollViewer and navigate through the open context menu to the EditTemplate option. Afterwards just click on the Edit a Copy option.

 

Sample:

WinRTSample

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied