ScrollBarStyle

4 posts, 1 answers
  1. George
    George avatar
    6 posts
    Member since:
    Jun 2010

    Posted 03 May 2011 Link to this post

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

    My JumpList is on a white background.

    TIA,
    George
  2. Answer
    Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 04 May 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. DevCraft banner
  4. George
    George avatar
    6 posts
    Member since:
    Jun 2010

    Posted 04 May 2011 Link to this post

    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!
  5. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 05 May 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
Back to Top