The scroll bars are placed in the tables
PROBLEM
When you have a WPF RadGridView based on Table of many columns, consequently the Horizontal Scrollbar appear in Last row's as shown below. As the user scrolls to the bottom, it is look like the last row is not fully visible, its content has been cut.
Note : Theme Setting Mechanisms
Using Implicit Styles In this case use NoXaml dlls.
QUESTION : How can show Horizontal scrollbar correctly like :
CAUSE & SOLUTION plz?
I don't have any ScrollViewer in my view :(
<ControlTemplate x:Key="CustomRadGridViewTemplate" TargetType="{x:Type telerik:RadGridView}"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="GroupPanelVisibility"> <VisualState x:Name="GroupPanelVisible"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_GroupPanel" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="GroupPanelCollapsed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_GroupPanel" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="0" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <grid:GridViewSearchPanel x:Name="PART_SearchPanel" Grid.ColumnSpan="4" Background="{TemplateBinding SearchPanelBackground}" Foreground="{TemplateBinding SearchPanelForeground}" Visibility="{Binding ShowSearchPanel , RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}" /> <grid:GridViewGroupPanel x:Name="PART_GroupPanel" Grid.Row="1" Grid.ColumnSpan="4" Background="{TemplateBinding GroupPanelBackground}" Foreground="{TemplateBinding GroupPanelForeground}" /> <telerik1:RadDropDownButton x:Name="PART_GridViewColumnsSelectionButton" Grid.Column="4" Grid.Row="1" VerticalAlignment="Center" DropDownIndicatorVisibility="Collapsed" BorderThickness="0" Padding="0" IsTabStop="false" Style="{StaticResource ControlPanelItem_DropDownButtonStyle}" MinWidth="26" MinHeight="26" Visibility="{Binding ColumnsSelectionButtonVisibility , RelativeSource={RelativeSource TemplatedParent}}" > <telerik1:RadDropDownButton.DropDownContent> <telerik1:RadListBox BorderThickness="0" Padding="4 1" MaxWidth="200" MaxHeight="250" ItemsSource="{Binding Columns}"> <telerik1:RadListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel /> </ItemsPanelTemplate> </telerik1:RadListBox.ItemsPanel> <telerik1:RadListBox.ItemContainerStyle> <Style TargetType="{x:Type telerik1:RadListBoxItem}"> <Setter Property="Padding" Value="5 3 3 3" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type telerik1:RadListBoxItem}"> <CheckBox Padding="{TemplateBinding Padding}" Content="{Binding Converter={StaticResource ColumnHeaderConverter}}" IsChecked="{Binding IsSelected , Mode=TwoWay}" /> </ControlTemplate> </Setter.Value> </Setter> </Style> </telerik1:RadListBox.ItemContainerStyle> </telerik1:RadListBox> </telerik1:RadDropDownButton.DropDownContent> </telerik1:RadDropDownButton> <Border x:Name="PART_MasterGridContainer" Grid.Row="2" Grid.ColumnSpan="4" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" /> <ItemsControl x:Name="PART_ControlPanelItemsControl" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Right" ItemsSource="{TemplateBinding ControlPanelItems}" IsTabStop="false"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <grid:ControlPanelItemControl/> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> <grid:GridViewScrollViewer x:Name="PART_ItemsScrollViewer" Grid.Row="2" Grid.RowSpan="2" Grid.ColumnSpan="4" Margin="1" CanContentScroll="true"> <grid:GridViewScrollViewer.FooterRow> <telerik:GridViewFooterRow x:Name="PART_FooterRow" IndentLevel="{TemplateBinding GroupCount}"> <telerik:StyleManager.Theme> <telerik:Office_BlackTheme/> </telerik:StyleManager.Theme> </telerik:GridViewFooterRow> </grid:GridViewScrollViewer.FooterRow> <grid:GridViewScrollViewer.HeaderRow> <telerik:GridViewHeaderRow x:Name="PART_HeaderRow" Grid.ColumnSpan="3" IsTabStop="False" IndentLevel="{TemplateBinding GroupCount}"> <telerik:StyleManager.Theme> <telerik:Office_BlackTheme/> </telerik:StyleManager.Theme> </telerik:GridViewHeaderRow> </grid:GridViewScrollViewer.HeaderRow> <grid:GridViewScrollViewer.NewRow> <telerik:GridViewNewRow x:Name="PART_AddNewRow" IsTabStop="False" IndentLevel="{TemplateBinding GroupCount}"> <telerik:StyleManager.Theme> <telerik:Office_BlackTheme/> </telerik:StyleManager.Theme> </telerik:GridViewNewRow> </grid:GridViewScrollViewer.NewRow> <grid:GridViewVirtualizingPanel Name="PART_GridViewVirtualizingPanel" /> </grid:GridViewScrollViewer> <grid:ScrollPositionIndicator x:Name="PART_ScrollPositionIndicator" IsHitTestVisible="false" HorizontalAlignment="Right" Grid.Row="3" Grid.ColumnSpan="4" Margin="0 0 28 0" ContentTemplate="{TemplateBinding ScrollPositionIndicatorTemplate}" Visibility="{Binding IsScrolling , Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}" /> <Border x:Name="PART_FrozenColumnsPreview" Grid.Row="3" Grid.RowSpan="3" Width="5" Opacity="0.3" Visibility="Collapsed" HorizontalAlignment="Left" VerticalAlignment="Stretch" Background="{telerik1:FluentResource ResourceKey=AccentFocusedBrush}"> <Border BorderThickness="1 0 0 0" HorizontalAlignment="Right" Width="5" BorderBrush="{telerik1:FluentResource ResourceKey=AccentFocusedBrush}" /> </Border> <Border x:Name="PART_FrozenColumnsPreviewRight" Grid.Row="3" Grid.RowSpan="3" Width="5" Opacity="0.3" Visibility="Collapsed" HorizontalAlignment="Left" VerticalAlignment="Stretch" Background="{telerik1:FluentResource ResourceKey=AccentFocusedBrush}" /> <grid:GridViewLoadingIndicator x:Name="PART_GridViewLoadingIndicator" Grid.RowSpan="4" Grid.ColumnSpan="4" Visibility="Collapsed" IsBusy="{TemplateBinding IsBusy}" ProgressValue="{Binding BusyIndicatorProgressValue , RelativeSource={RelativeSource TemplatedParent}}" IsIndeterminate="{Binding BusyIndicatorIsIndeterminate , RelativeSource={RelativeSource TemplatedParent}}" BusyContent="{Binding BusyIndicatorContent , RelativeSource={RelativeSource TemplatedParent}}" BusyContentTemplate="{Binding BusyIndicatorContentTemplate , RelativeSource={RelativeSource TemplatedParent}}" /> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsBusy" Value="true"> <Setter TargetName="PART_GridViewLoadingIndicator" Property="Visibility" Value="Visible" /> </Trigger> <Trigger Property="ShowColumnFooters" Value="false"> <Setter TargetName="PART_FooterRow" Property="Visibility" Value="Collapsed" /> </Trigger> <Trigger Property="ShowColumnHeaders" Value="false"> <Setter TargetName="PART_HeaderRow" Property="Visibility" Value="Collapsed" /> </Trigger> <Trigger Property="NewRowPosition" Value="None"> <Setter TargetName="PART_AddNewRow" Property="Visibility" Value="Collapsed" /> </Trigger> <Trigger SourceName="PART_ControlPanelItemsControl" Property="HasItems" Value="true"> <Setter TargetName="PART_ControlPanelItemsControl" Property="MinHeight" Value="36" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> <Style x:Key="CustomRadGridView" TargetType="telerik:RadGridView" BasedOn="{StaticResource RadGridViewStyle}"> <Setter Property="CanUserFreezeColumns" Value="False"/> <Setter Property="AutoGenerateColumns" Value="False"/> <Setter Property="RowIndicatorVisibility" Value="Collapsed"/> <Setter Property="ShowGroupPanel" Value="False"/> <Setter Property="GroupRenderMode" Value="Flat"/> <Setter Property="IsPropertyChangedAggregationEnabled" Value="False"/> <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True"/> <Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Recycling"/> <Setter Property="ScrollMode" Value="RealTime"/> <Setter Property="ValidatesOnDataErrors" Value="None"/> <Setter Property="EnableRowVirtualization" Value="True"/> <Setter Property="EnableLostFocusSelectedState" Value="False"/> <Setter Property="RowHeight" Value="45" /> <Setter Property="GridLinesVisibility" Value="Horizontal" /> <Setter Property="SelectionUnit" Value="FullRow" /> <Setter Property="HorizontalContentAlignment" Value="Left" /> <Setter Property="Template" Value="{StaticResource CustomRadGridViewTemplate}" /> </Style> <Style TargetType="telerik:RadGridView" BasedOn="{StaticResource CustomRadGridView}"/><!--Overrides Default Scrollbars Styles-->
<ControlTemplate x:Key="ScrollBarHorizontalControlTemplate" TargetType="{x:Type ScrollBar}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition MaxWidth="16"/> <ColumnDefinition Width="1*"/> <ColumnDefinition MaxWidth="16"/> </Grid.ColumnDefinitions> <Border Grid.ColumnSpan="3" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="0 -1 0 0"/> <RepeatButton x:Name="LeftHandle" Style="{StaticResource RepeatButtonLineLeftStyle}" Command="{x:Static ScrollBar.LineLeftCommand}" Opacity="0"/> <Track Name="PART_Track" Grid.Column="1" Orientation="Horizontal"> <!--<Track.Resources> <sys:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}">16</sys:Double> </Track.Resources>--> <Track.DecreaseRepeatButton> <RepeatButton Style="{StaticResource RepeatButtonBlankStyle}" Command="{x:Static ScrollBar.PageLeftCommand}"/> </Track.DecreaseRepeatButton> <Track.IncreaseRepeatButton> <RepeatButton Style="{StaticResource RepeatButtonBlankStyle}" Command="{x:Static ScrollBar.PageRightCommand}"/> </Track.IncreaseRepeatButton> <Track.Thumb> <Thumb x:Name="Thumb" Style="{StaticResource ThumbHorizontalStyle}" RenderTransformOrigin=".5 1"> <Thumb.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY=".25"/> <TranslateTransform Y="-2"/> </TransformGroup> </Thumb.RenderTransform> </Thumb> </Track.Thumb> </Track> <RepeatButton x:Name="RightHandle" Style="{StaticResource RepeatButtonLineRightStyle}" Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" Opacity="0"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="False"> <Setter Property="Background" Value="Transparent"/> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="LeftHandle" Property="Opacity" Value="1"/> <Setter TargetName="RightHandle" Property="Opacity" Value="1"/> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation To="1" Storyboard.TargetName="Thumb" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" Duration="0:0:0.140"/> <DoubleAnimation To="0" Storyboard.TargetName="Thumb" Storyboard.TargetProperty="RenderTransform.Children[1].Y" Duration="0:0:0.100"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation To=".25" Storyboard.TargetName="Thumb" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" Duration="0:0:0.140"/> <DoubleAnimation To="-2" Storyboard.TargetName="Thumb" Storyboard.TargetProperty="RenderTransform.Children[1].Y" Duration="0:0:0.100"/> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> <Style TargetType="{x:Type ScrollBar}" BasedOn="{StaticResource ScrollBarStyle}"> <Setter Property="OverridesDefaultStyle" Value="true"/> <Setter Property="Template" Value="{StaticResource ScrollBarVerticalControlTemplate}"/> <Style.Triggers> <Trigger Property="Orientation" Value="Horizontal"> <Setter Property="Template" Value="{StaticResource ScrollBarHorizontalControlTemplate}"/> </Trigger> </Style.Triggers> </Style>
I've tested your code, but couldn't recreate the issue. Can you check the attached project and tell me if I am missing anything?
Hello Martin Ivanov, thank you for your attention :)
I run the project in local but couldn't find
VerticalDecrementStyle
HorizontalDecrementStyle
ScrollViewerRepeatButtonStyle
VerticalIncrementStyle
HorizontalIncrementStyle
HorizontalThumbStyle
VerticalThumbStyle
Can you fill the missing for me please? thx a lot
The Styles you are looking for are located in the System.Windows.xaml file that is merged in App.xaml. You can't access the file in the project, because it is compiled to baml and embedded in the theme dll, but you can see how to get the original file in the Editing Control Template files.
Note that those are the default styles used with the elements of the ScrollViewer. I've used them instead of your custom styles, because I didn't have your styles. You can replace them with your styles if you prefer.
Hi
I just want to pitch in and say that i have the same issue.
The horizontal scrollbar of GridView is overlapping the bottom row.
I have replied to the forum thread that was opened regarding this behavior.
Horizontal scrollbar is overlapping the last row of data. in UI for WPF | Telerik Forums
Would it be possible to continue our conversation there, so that the communication is kept in one place?