This is a migrated thread and some comments may be shown as answers.

Scroll Bar thumb size not re-sizing correctly

3 Answers 433 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

Brett asked on 12 Mar 2015, 02:55 PM

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.

<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="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>

<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>

<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="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"/>

</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>

3 Answers, 1 is accepted

answered on 13 Mar 2015, 08:59 AM

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

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.