The scroll bars are placed in the tables

0 Answers 180 Views
GridView Styling
Asem
Top achievements
Rank 1
Asem asked on 27 Apr 2022, 05:05 PM | edited on 27 Apr 2022, 11:28 PM

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

QUESTION : How can show Horizontal scrollbar correctly like : 

CAUSE & SOLUTION plz?

Martin Ivanov
Telerik team
commented on 28 Apr 2022, 01:18 PM

Note that the RadGridView control has built-in scrollbars. From the attached picture it seems that the vertical one comes from the GridView. The horizontal scrollbar probably comes from a ScrollViewer control that is wrapping the GridView. If this is the case, then I recommend you to remove the parent ScrollViewer from your view and leave the GridView to use its scrollbars. If this doesn't help I suggest you to attach a small sample showing the exact issue.
Asem
Top achievements
Rank 1
commented on 28 Apr 2022, 02:59 PM

I don't have any ScrollViewer in my view :(

Asem
Top achievements
Rank 1
commented on 28 Apr 2022, 03:06 PM | edited

<!--Overrides Default RadGridView Style-->

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


Asem
Top achievements
Rank 1
commented on 28 Apr 2022, 03:22 PM


<!--Overrides Default Scrollbars Styles-->
<ControlTemplate x:Key="ScrollBarVerticalControlTemplate" TargetType="{x:Type ScrollBar}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition MaxHeight="12"/>
                <RowDefinition Height="1*"/>
                <RowDefinition MaxHeight="12"/>
            </Grid.RowDefinitions>
            <Border Grid.RowSpan="3" BorderThickness="{TemplateBinding BorderThickness}" 
                    BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"/>
            <RepeatButton x:Name="TopHandle" 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>
                    <Thumb Style="{StaticResource ThumbVerticalStyle}"/>
                </Track.Thumb>
            </Track>
            <RepeatButton x:Name="BottomHandle" Style="{StaticResource RepeatButtonLineDownStyle}" Grid.Row="2" Command="{x:Static ScrollBar.LineDownCommand}"/>
        </Grid>
    </ControlTemplate>

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

Martin Ivanov
Telerik team
commented on 03 May 2022, 09:30 AM

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?

Asem
Top achievements
Rank 1
commented on 04 May 2022, 09:03 PM

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

Martin Ivanov
Telerik team
commented on 09 May 2022, 11:55 AM

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.

Asem
Top achievements
Rank 1
commented on 10 May 2022, 07:06 AM

Sorry n but I still have the same problem :(
Martin Ivanov
Telerik team
commented on 12 May 2022, 08:58 AM

Do you reproduce this with the attached project? If so, can you tell me which dlls do you reference and how exactly the issue reproduces? If the issue doesn't happen in the previous project, can you modify it and send it over so I can check it?
Martin
Top achievements
Rank 2
Iron
Iron
Iron
commented on 13 Jul 2022, 10:41 AM

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. 

Stenly
Telerik team
commented on 18 Jul 2022, 09:58 AM

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?

No answers yet. Maybe you can help?

Tags
GridView Styling
Asked by
Asem
Top achievements
Rank 1
Share this question
or