Vertical and Horizontal Scrollbar overlapping DataGrid-Content

[Boon]

Hi there!

As soon as the size of the window is small enough for the scrollbars to be displayed over the DataGrid, the content is visually overlaid. This means that content can be seen above and below the scroll bars.

When mouseover, the content of the grid is correctly hidden.

Find my example attached.

Thanks in advance.

Greetings :-)

Attachment: WpfApp1_66d9bdec.zip

[Santhosh Govindasamy]

Hi Boon,

We have checked the mentioned problem of 'Vertical and Horizontal Scrollbars overlapping DataGrid content.' The scrollbar overlapping the content is the default behavior of the 'Windows11Light' theme. We are currently checking the feasibility of unhiding the content from the scrollbar. We will need some time to validate it and will provide an update on or before November 07, 2023.

Regards,
Santhosh.G

[Santhosh Govindasamy]

Boon,

We are currently checking the feasibility of overriding the scrollbar and grid placement style. We will need some time to validate it and will provide an update on or before November 09, 2023."

[Santhosh Govindasamy]

Boon,

Your requirement, "Restrict the scrollbar overlap to the DataGrid content," can be achieved by overriding the scroll viewer style.

Here we have attached modified sample. Please have a look at this. If you are still facing the reported issue, modify the attached sample based on your scenario. It will be helpful for us to proceed further.

Please refer the code snippet

<Style x:Key="WPFScrollViewerStyle" TargetType="{x:Type ScrollViewer}">

    <Setter Property="OverridesDefaultStyle" Value="True"/>

    <Setter Property="Background" Value="Transparent"/>

  

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="{x:Type ScrollViewer}">

                <Grid x:Name="Grid" Background="{TemplateBinding Background}">

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="*"/>

                        <ColumnDefinition Width="Auto"/>

                        <ColumnDefinition Width="Auto"/>

                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>

                        <RowDefinition Height="*"/>

                        <RowDefinition Height="Auto"/>

                        <RowDefinition Height="Auto"/>

                    </Grid.RowDefinitions>

                    <Rectangle x:Name="Corner"

                       Grid.Column="1"

                       Grid.Row="1"

                       Fill="Transparent" />

                    <ScrollContentPresenter Margin="{TemplateBinding Padding}"

                                    x:Name="PART_ScrollContentPresenter"

                                    Grid.Column="0"

                                    Grid.Row="0"

                                    Content="{TemplateBinding Content}"

                                    ContentTemplate="{TemplateBinding ContentTemplate}"

                                    CanContentScroll="{TemplateBinding CanContentScroll}"

                                    CanHorizontallyScroll="False"

                                    CanVerticallyScroll="False"/>

                    <ScrollBar x:Name="PART_VerticalScrollBar"                                  

                       Grid.Column="2"

                       Grid.Row="0"

                       Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"

                       Cursor="Arrow" 

                       ViewportSize="{TemplateBinding ViewportHeight}"

                       Maximum="{TemplateBinding ScrollableHeight}"

                       Minimum="0"

                       Width="12"

                       Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"

                       AutomationProperties.AutomationId="VerticalScrollBar"/>

                    <ScrollBar x:Name="PART_HorizontalScrollBar"                                   

                       Grid.Column="0"

                       Grid.Row="2"

                       Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"

                       Cursor="Arrow"

                       Orientation="Horizontal"

                       ViewportSize="{TemplateBinding ViewportWidth}"

                       Maximum="{TemplateBinding ScrollableWidth}"

                       Minimum="0"

                       Height="12"

                       Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"

                       AutomationProperties.AutomationId="HorizontalScrollBar"/>

                </Grid>

                <ControlTemplate.Triggers>

                    <Trigger Property="sfskin:SkinManagerHelper.ScrollBarMode" Value="Compact">

                        <Setter Property="Grid.ColumnSpan" TargetName="PART_ScrollContentPresenter" Value="2"/>

                        <Setter Property="Grid.RowSpan" TargetName="PART_ScrollContentPresenter" Value="2"/>

                    </Trigger>

                </ControlTemplate.Triggers>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

    <Style.Triggers>

        <Trigger Property="IsEnabled" Value="False">

            <Setter Property="Background" Value="Transparent"/>

            <Setter Property="BorderBrush" Value="Transparent"/>

        </Trigger>

    </Style.Triggers>

</Style>

<Style BasedOn="{StaticResource WPFScrollViewerStyle}" TargetType="{x:Type ScrollViewer}"/>

 

Please Refer the output:

Attachment: WpfApp1_66d9bdec_e4d3a506.zip