[Solved] Thumb in Horizontal Scrollbar is not visible with Windows8 theme

[Olivier]

Hello

I have problem with Windows8 Theme and Horizontal Scrollbar control.

Thumb in Hozirontal Scrollbar is not visible and Vertical Scrollbar work fine.

I am in production with 2015.2.728.1050 and I tested with 2016.1.112.1050.

Have you a solution ?

Thank in advance.

MainWindow.xaml

<Grid x:Name="MainGrid" Background="#FFA6A6A6">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0">
            <ScrollBar Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Stretch"/>
        </Grid>
        <Grid Grid.Row="1">
            <ScrollBar Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Center"/>
        </Grid>
    </Grid>

App.xaml

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/System.Windows.xaml"/>
                <ResourceDictionary Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

[Masha]

Hello Arnaud,

Thank you for bringing this to our attention!

We will provide a fix for this issue in our next internal build which is next Monday. As a workaround you can use the provided ScrollBarControlTemplate:

<ControlTemplate x:Key="ScrollBarControlTemplate" TargetType="ScrollBar">
    <Grid x:Name="Root">
        <Grid x:Name="HorizontalRoot">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Border Grid.ColumnSpan="5" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"/>
            <RepeatButton x:Name="HorizontalSmallDecrease" Grid.Column="0" Interval="50" Style="{StaticResource RepeatButtonLineLeftStyle}" Width="12"/>
            <RepeatButton x:Name="HorizontalLargeDecrease" Grid.Column="1" Interval="50" Style="{StaticResource RepeatButtonBlankStyle}"/>
            <Thumb x:Name="HorizontalThumb" Grid.Column="2" Style="{StaticResource ThumbHorizontalStyle}" MinWidth="16"/>
            <RepeatButton x:Name="HorizontalLargeIncrease" Grid.Column="3" Interval="50" Style="{StaticResource RepeatButtonBlankStyle}"/>
            <RepeatButton x:Name="HorizontalSmallIncrease" Grid.Column="4" Interval="50" Style="{StaticResource RepeatButtonLineRightStyle}" Width="12"/>
        </Grid>
        <Grid x:Name="VerticalRoot" Visibility="Collapsed">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Border Grid.RowSpan="5" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"/>
            <RepeatButton x:Name="VerticalSmallDecrease" Interval="50" Style="{StaticResource RepeatButtonLineUpStyle}" Height="12"/>
            <RepeatButton x:Name="VerticalLargeDecrease" Grid.Row="1" Interval="50" Style="{StaticResource RepeatButtonBlankStyle}"/>
            <Thumb x:Name="VerticalThumb" Grid.Row="2" Style="{StaticResource ThumbVerticalStyle}" MinHeight="16"/>
            <RepeatButton x:Name="VerticalLargeIncrease" Grid.Row="3" Interval="50" Style="{StaticResource RepeatButtonBlankStyle}"/>
            <RepeatButton x:Name="VerticalSmallIncrease" Grid.Row="4" Interval="50" Style="{StaticResource RepeatButtonLineDownStyle}" Height="12"/>
        </Grid>
    </Grid>
</ControlTemplate>

I apologize for the inconvenience. I have updated your Telerik points for your involvement. 

Regards,
Masha
Telerik

[Olivier]

Hello Masha

Good news :)

Thanks