Change width of Radcombobox dropdown scrollbar

[Paul]

hi, 

how do I change the width of the Radcombobox dropdown vertical scrollbar? I don't have Blend as well.

thanks in advance,

Paul

[Masha]

Hi Paul,

I suggest you use Implicit Styles to achieve the described approach. This is the most efficient way of
customizing the Telerik themes. The xaml file of desired theme can be found inside Theme.Implicit subfolder of your local RadControls installation folder.

In order to change the size of Width of the ScrollViewer you have to edit the template of the control. I have attached a sample project with the change, just search for a comment starting with "Note:".

Hope this helps. Let me know if you have further questions.

Regards,
Masha
Telerik

[Joel]

Hi Masha,

I wanted to acheive the same result as Paul and I tried your solution and it works for the scroll bar.  Now I'm having another problem.  Including the Windows8 Theme like in your example:

    <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 Source="/Telerik.Windows.Themes.Windows8;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
    </ResourceDictionary.MergedDictionaries> 

is chaging most of my existing layout and appearance.  Is there a way to make the scroll bar wider for combo boxes AND not change anything else?  I don't want to have to re-style 95%+ of my app.

I've included a screen capture of before and after.  This is the least affected screen of the app.  I would have to re-style practically all input fields and probably 50% of the layout as well.

Thanks for your help!

Joel

[Joel]

Found the solution.  Here it is:

1- Only use this merge discionnary:

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Telerik.Windows.Themes.MetroTouch;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
    </ResourceDictionary.MergedDictionaries>

2 - Use these styles:

<Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
   
        <Setter Property="MinWidth" Value="12"/>
        <Setter Property="MinHeight" Value="12"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate  TargetType="{x:Type ScrollBar}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition MaxHeight="12"/>
                            <RowDefinition Height="0.00001*"/>
                            <RowDefinition MaxHeight="12"/>
                        </Grid.RowDefinitions>
                        <Border Grid.RowSpan="3" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"/>
                        <RepeatButton Style="{StaticResource RepeatButtonLineUpStyle}" Content="Up" Command="{x:Static ScrollBar.LineUpCommand}"/>
                        <Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="True">
                            <Track.Resources>
                                <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarButtonHeightKey}">32</sys:Double>
                            </Track.Resources>
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Style="{StaticResource RepeatButtonBlankStyle}" Command="{x:Static ScrollBar.PageUpCommand}"/>
                            </Track.DecreaseRepeatButton>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Style="{StaticResource RepeatButtonBlankStyle}" Command="{x:Static ScrollBar.PageDownCommand}"/>
                            </Track.IncreaseRepeatButton>
                            <Track.Thumb>
                                <!-- Note:Change the Width of the following Thumb-->
                                <Thumb Style="{StaticResource ThumbVerticalStyle}" Width="38" Background="#AFBFA2"/>
                            </Track.Thumb>
                        </Track>
                        <RepeatButton Style="{StaticResource RepeatButtonLineDownStyle}" Grid.Row="2" Command="{x:Static ScrollBar.LineDownCommand}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>
    
    
    <ControlTemplate x:Key="ScrollViewerControlTempalte" TargetType="{x:Type ScrollViewer}">
        <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
                        CanContentScroll="{TemplateBinding CanContentScroll}"
                        CanHorizontallyScroll="False"
                        CanVerticallyScroll="False"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        Content="{TemplateBinding Content}"
                        Grid.Column="0"
                        Margin="{TemplateBinding Padding}"
                        Grid.Row="0" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>

                <!-- Note:Change the Width of the following Thumb-->
                <ScrollBar x:Name="PART_VerticalScrollBar"
                        Style="{StaticResource ScrollBarStyle1}"
                        AutomationProperties.AutomationId="VerticalScrollBar"
                        Cursor="Arrow"  Width="38"
                        Grid.Column="1"
                        Maximum="{TemplateBinding ScrollableHeight}"
                        Minimum="0"
                        Grid.Row="0"
                        Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                        Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                        ViewportSize="{TemplateBinding ViewportHeight}"/>
                <ScrollBar x:Name="PART_HorizontalScrollBar"
                        Style="{StaticResource ScrollBarStyle}"
                        AutomationProperties.AutomationId="HorizontalScrollBar"
                        Cursor="Arrow"
                        Grid.Column="0"
                        Maximum="{TemplateBinding ScrollableWidth}"
                        Minimum="0"
                        Orientation="Horizontal"
                        Grid.Row="1"
                        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                        Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                        ViewportSize="{TemplateBinding ViewportWidth}"/>
            </Grid>
        </Border>
    </ControlTemplate>

    <Style TargetType="{x:Type ScrollViewer}" BasedOn="{StaticResource ScrollViewerStyle}" x:Key="CustomScrolLViewer">
        <Setter Property="Template" Value="{StaticResource ScrollViewerControlTempalte}"/>
    </Style>
    
    <ControlTemplate x:Key="NonEditableComboBox" TargetType="telerik:RadComboBox">
        <Grid x:Name="VisualRoot">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver"/>
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundBorder" Storyboard.TargetProperty="Opacity" To="0"/>
                            <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledBorder" Storyboard.TargetProperty="Opacity" To="0.5"/>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="DropDownOpen">
                        <Storyboard>
                            <DoubleAnimation Duration="0" Storyboard.TargetName="FocusBorder" Storyboard.TargetProperty="Opacity" To="0"/>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                    <VisualState x:Name="Focused">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="FocusBorder">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Unfocused"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Border x:Name="BackgroundBorder" IsHitTestVisible="False" Background="{TemplateBinding Background}"/>
            <Border x:Name="DisabledBorder" IsHitTestVisible="False" Background="{TemplateBinding Background}" Opacity="0"/>
            <telerik:RadToggleButton x:Name="PART_DropDownButton"
                    IsTabStop="False"
                    Padding="{TemplateBinding Padding}"
                    ClickMode="Press"
                    Foreground="{TemplateBinding Foreground}"
                    Content="{TemplateBinding SelectionBoxItem}"
                    ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    Style="{StaticResource NonEditableComboToggleButtonStyle}"
                    FontFamily="{TemplateBinding FontFamily}"
                    FontSize="{TemplateBinding FontSize}"/>
            <Border x:Name="FocusBorder"
                    IsHitTestVisible="False"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Visibility="Collapsed"
                    Background="Transparent"
                    BorderBrush="{telerik:Windows8Resource ResourceKey=StrongBrush}"
                    Opacity="0.2"/>
            <Popup x:Name="PART_Popup" Margin="0 1" VerticalOffset="1">
                <Grid x:Name="PopupRoot">
                    <Border
                            BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            MinWidth="{TemplateBinding MinDropDownWidth}"
                            MaxHeight="{TemplateBinding MaxDropDownHeight}"
                            Background="{telerik:Windows8Resource ResourceKey=MainBrush}"
                            x:Name="PART_ResizeBorder">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <telerik:RadButton x:Name="PART_ClearButton"
                                    Grid.Row="0"
                                    Margin="-1 -1 -1 0"
                                    Visibility="{TemplateBinding ClearSelectionButtonVisibility}"
                                    Content="{TemplateBinding ClearSelectionButtonContent}"/>
                            <ScrollViewer x:Name="PART_ScrollViewer"
                                    Grid.Row="1" Style="{StaticResource CustomScrolLViewer}"
                                    BorderThickness="0" 
                                    VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                    HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                    Foreground="{TemplateBinding Foreground}"
                                    CanContentScroll="True">
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </Grid>
                    </Border>
                </Grid>
            </Popup>
        </Grid>
    </ControlTemplate>
   
    <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto" />
                <Setter Property="Height" Value="60" />
                <Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
            </Trigger>
            <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="Width" Value="32" />
                <Setter Property="Height" Value="Auto" />
                <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
            </Trigger>
        </Style.Triggers>
    </Style>

[Masha]

Hi Joel,

Thank you for your feedback and I am happy to hear that you managed to do it by yourself. Please do not hesitate to contact us again if something else arise.


Regards,
Masha
Telerik