ScrollBarStyle

[George]

How do I change the color of the scrollbar to Red?  

My JumpList is on a white background.

TIA,
George

[Deyan]

Hello George,

Thanks for contacting us and for your question.

The only way to change the style of the scrollbar is to modify the control template of the RadJumpList control and set the properties of the scrollbar as you require. You can do this in Expression Blend.

Here is the Style of the RadJumpList control for your convenience. You can also modify it directly and apply it to the RadJumpList control in your project:

<Style TargetType="telerikDataControls:RadJumpList">
    <Setter Property="Background" Value="#00ffffff"/>
    <Setter Property="MinHeight" Value="100"/>
    <Setter Property="MinWidth" Value="100"/>
    <Setter Property="GroupHeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <Border Background="{StaticResource PhoneAccentBrush}" HorizontalAlignment="Stretch">
                    <TextBlock Text="{Binding}"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Bottom"
                               Margin="6"
                               FontSize="{StaticResource PhoneFontSizeExtraLarge}"
                               FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
                </Border>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="GroupPickerItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <Border Background="{StaticResource PhoneAccentBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="6">
                    <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}"
                               FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                               Text="{Binding}"
                               Margin="4"
                               VerticalAlignment="Stretch"
                               HorizontalAlignment="Left"/>
                </Border>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="GroupPickerOpenAnimation">
        <Setter.Value>
            <telerikCore:RadTileAnimation PerspectiveAngleY="0"
                                          IsTranslationEnabled="False"
                                          PerspectiveAngleX="90"
                                          InOutAnimationMode="In"
                                          SequentialMode="FirstToLast"
                                          SequentialItemDelay="0"
                                          InitialDelay="0:0:.08"
                                          Duration="0:00:.1">
            </telerikCore:RadTileAnimation>
        </Setter.Value>
    </Setter>
    <Setter Property="GroupPickerCloseAnimation">
        <Setter.Value>
            <telerikCore:RadTileAnimation PerspectiveAngleY="0"
                                          IsTranslationEnabled="False"
                                          PerspectiveAngleX="90"
                                          InOutAnimationMode="Out"
                                          SequentialMode="FirstToLast"
                                          SequentialItemDelay="0"
                                          InitialDelay="0:0:.05"
                                          Duration="0:00:.1">
            </telerikCore:RadTileAnimation>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerikDataControls:RadJumpList">
                <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                    <Grid x:Name="LayoutRoot">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Canvas x:Name="ItemsPanel" Grid.Column="0"/>
                        <ScrollBar x:Name="VerticalScrollbar" Grid.Column="1"/>

                        <telerikPrimitives:RadWindow x:Name="groupPickerWindow"
                                                     IsFullScreen="True"
                                                     OpenAnimation="{TemplateBinding GroupPickerOpenAnimation}"
                                                     CloseAnimation="{TemplateBinding GroupPickerCloseAnimation}">
                            <telerikPrimitives:RadWindow.Content>
                                <telerikDataControlsLocal:JumpListGroupPicker
                                    x:Name="groupPicker"
                                    Background="Transparent"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch"
                                    DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
                                    ItemTemplate="{TemplateBinding GroupPickerItemTemplate}"
                                    ItemsPanel="{TemplateBinding GroupPickerItemsPanel}"/>
                            </telerikPrimitives:RadWindow.Content>
                        </telerikPrimitives:RadWindow>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="telerikDataControlsLocal:JumpListGroupPicker">
    <Setter Property="Background" Value="#00ffffff"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerikDataControlsLocal:JumpListGroupPicker">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Margin="{TemplateBinding Padding}">
                    <ScrollViewer x:Name="ItemsScroller" Foreground="{TemplateBinding Foreground}" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                        <ItemsPresenter/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I hope this helps.

Do not hesitate to get back to us in case you have further questions or need assistance.

Regards,
Deyan
the Telerik team

[George]

Thanks Deyan... I figured as much but was a bit reluctant to go diving into the template unless I had to and was hoping for a property.  However, using Blend, I just created an app wide template from the original and simply modified the vertical scrollbar as you suggested... that was easy enough.  Thanks!

[Deyan]

Hi George,

You are welcome!

Do not hesitate to write back in case you need further assistance or have any feedback to share.

Greetings,
Deyan
the Telerik team