Scroll Bar thumb size not re-sizing correctly

[Brett]

I am using the RadComboBox for an autocomplete selector in my WPF project. My available list of items is well over 200, and has the potential to be well over 1000 at any given time. When I an in edit mode for the combo box, it filters correctly based on the list items but I have run into a problem that I don't know how to fix with it. If the list goes from really large (all the items) to say like 30-40 items, the scroll bar thumb acts a bit weird. If I use the mouse wheel to scroll, it acts as if the entire list is still there, until it gets to a certain point. Once it reaches this point, the thumb of the scroll bar becomes the correct, larger size. But if I scroll up, it once again becomes the small size like it thinks the whole list is there. How can I fix this? I have posted my XMAL for what I have done below.

    <!-- Styles for the telerik RadComboBox -->
    <Style x:Key="RadComboBoxStyle" TargetType="{x:Type telerik:RadComboBox}">
        <Setter Property="FontFamily" Value="Segoe UI" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="Padding" Value="5,0,5,0"/>
        <Setter Property="Foreground" Value="#1A1A1A"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="MinWidth" Value="140" />
        <!--<Setter Property="DropDownWidth" Value="*" />-->
        <Setter Property="MinHeight" Value="24"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadComboBox}">
                            <Border x:Name="OuterBd" CornerRadius="4" Padding="1" BorderBrush="Black" BorderThickness="0">
                                <Border.Effect>
                                    <DropShadowEffect Direction="270" ShadowDepth="0.5" BlurRadius="0.5" Opacity="0.25"/>
                                </Border.Effect>
                                <Border x:Name="InnerBd" Background="{StaticResource BaseInnerBorderBrush}" BorderThickness="0" CornerRadius="3" Padding="1">
                                    <Border Background="{TemplateBinding Background}" BorderThickness="0" CornerRadius="2">
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
                                            </Grid.ColumnDefinitions>

                                        </Grid>
                                    </Border>
                                </Border>
                            </Border>
                            <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="true">
                            <Setter Property="BorderBrush"  Value="{StaticResource FocusedBrush}"  />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="{StaticResource BaseButtonMouseOverBrush}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter Property="Background" Value="Transparent"/>
                            <Setter Property="BorderBrush" Value="Black" />
                            <Setter Property="BorderThickness" Value="1" />

                        </Trigger>
                        <Trigger Property="IsDropDownOpen" Value="true">
                            <Setter Property="Background" Value="{StaticResource PressedBrush}"/>
                            <Setter Property="BorderBrush" Value="#BCBCBC"/>
                            <Setter TargetName="OuterBd" Property="Effect" Value="{x:Null}"/>
                            <Setter Property="Foreground" Value="#FFFFFF"/>
                        </Trigger>
                        <Trigger Property="ToggleButton.IsChecked" Value="true"/>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" Value="#E6E7E8"/>
                            <Setter Property="BorderBrush" Value="#A7A9AC"/>
                            <Setter TargetName="OuterBd" Property="Effect" Value="{x:Null}"/>
                            <Setter TargetName="InnerBd" Property="Background" Value="#E6E7E8"/>
                            <Setter Property="Foreground" Value="#6D6E71"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Styles for the telerik RadComboBoxItem -->
    <Style TargetType="{x:Type telerik:RadComboBoxItem}">
        <Setter Property="Padding" Value="5,0,5,0"/>
        <Setter Property="Foreground" Value="#1A1A1A"/>
        <Setter Property="Background" Value="#FFF2F2F2"/>
        <Setter Property="MinWidth" Value="140" />
        <Setter Property="MinHeight" Value="24"/>
        <Setter Property="BorderThickness" Value="0,0,0,0" />
        <!--<Setter Property="BorderBrush" Value="#6D6E71"/>-->
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadComboBoxItem}">
                    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

                        </ContentPresenter>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsHighlighted" Value="true">
                            <Setter Property="Foreground" Value="White" />
                            <Setter Property="Background" Value="#499ACF" />
                        </Trigger>
                        <Trigger Property="IsHighlighted" Value="False">
                            <Setter Property="Background" Value="#F2F2F2" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#939598"/>
                            <Setter Property="Background" Value="#FFF4F4F4"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocusWithin" Value="true">
                            <Setter Property="Foreground" Value="Black"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Border Style="{StaticResource DialogContentBorderStyle}" Grid.Row="1">
        <DockPanel Margin="16,10,0,0">
            <Grid Margin="0,10,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="LabelColumn" MinWidth="60" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="70" />
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Row="0" Grid.Column="0" Text="Select Item"
                            Style="{StaticResource LabelTextBlock}" CoreExt:TextBoxExtension.IsRequired="True" Visibility="{Binding Request, Converter={StaticResource BoolVisibilityConverter}}"/>

                <telerik:RadComboBox Name="RadComboBox" Grid.Row="0" Grid.Column="1" Margin="{StaticResource ModalRowMargin}" ItemsSource="{Binding Available}"SelectedItem="{Binding Selected, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True, Mode=TwoWay}" Visibility="{Binding RequestCase, Converter={StaticResource BoolVisibilityConverter}}"TextSearchMode="Contains" Text="{Binding Text, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" IsFilteringEnabled="True" OpenDropDownOnFocus="True" Style="{StaticResource RadComboBoxStyle}" IsEditable="True" behaviors:RadComboBoxBehaviors.OverrideRadDefaults="True" StaysOpenOnEdit="True" >
                    <telerik:RadComboBox.ItemContainerStyle>
                        <Style TargetType="{x:Type telerik:RadComboBoxItem}" BasedOn="{StaticResource {x:Type telerik:RadComboBoxItem}}">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding CaseId}" Value="-1">
                                    <Setter Property="IsEnabled" Value="False" />
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="{x:Type telerik:RadComboBoxItem}">
                                                <Border Background="#F4F4F4">
                                                    <Separator HorizontalAlignment="Stretch" Foreground="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" Height="1"/>
                                                </Border>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </telerik:RadComboBox.ItemContainerStyle>
                    <telerik:RadComboBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock TextTrimming="WordEllipsis" ToolTip="{Binding}" Text="{Binding}" MaxWidth="250"></TextBlock>
                        </DataTemplate>
                    </telerik:RadComboBox.ItemTemplate>

                </telerik:RadComboBox>
            </Grid>
        </DockPanel>
    </Border>
</Grid>

[Brett]

Also, small addition to my question....

The "arrow" on the RadToggleButton attached the the ButtonChrome for opening the drop down list, how can I make that larger? It's really small and doesn't follow the style of any of the Microsoft combo box controls for their "drop down arrow"....

[Brett]

[quote]Brett said:Also, small addition to my question....

The "arrow" on the RadToggleButton attached the the ButtonChrome for opening the drop down list, how can I make that larger? It's really small and doesn't follow the style of any of the Microsoft combo box controls for their "drop down arrow"....[/quote]


I have figured this out, my main question about the scroll bar thumb size still holds though.

[Masha]

Hello Brett,

I'm glad you've managed to resolve the RadToggleButton arrow issue by yourself.

Regarding the Scrolling problem we already have logged this issue in our Feedback Portal and you can track its progress at the following link:
http://feedback.telerik.com/Project/143/Feedback/Details/113723-radcombobox-vertical-scrollbar-with-filtered-results-is-wrong

I'm afraid there is no workaround for that at the moment.

Please excuse us for any inconvenience caused. 


Regards,
Masha
Telerik