Change width of Radcombobox dropdown scrollbar

5 posts, 0 answers
  1. Paul
    Paul avatar
    7 posts
    Member since:
    Aug 2010

    Posted 07 Nov 2013 Link to this post

    hi, 

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

    thanks in advance,

    Paul
  2. Masha
    Admin
    Masha avatar
    355 posts

    Posted 12 Nov 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Joel
    Joel avatar
    14 posts
    Member since:
    Aug 2010

    Posted 13 Nov 2013 Link to this post

    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
  5. Joel
    Joel avatar
    14 posts
    Member since:
    Aug 2010

    Posted 13 Nov 2013 Link to this post

    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>
  6. Masha
    Admin
    Masha avatar
    355 posts

    Posted 14 Nov 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top
UI for WPF is Visual Studio 2017 Ready