How to Remove WPF ScrollViewer Border

2.3k views Asked by At

In the WPF application I'm developing, every ScrollViewer control puts a white border around the content it's displaying, and I need this border removed. The border is present with and without my custom styles.
The only time it doesn't show is when I enable AllowTransparency for my window, but AllowTransparency must remain disabled - the window is borderless with no chrome, and the way I'm applying a necessary drop shadow requires AllowTransparency to be false.

What it looks like: enter image description here

Here is a closeup of the top-right corner: enter image description here



That obnoxious white border ruins the look of my application, and needs to go. I don't believe it is the background of another element showing through, as I've set just about every parent element's background to non-white or transparent colors and it still shows. How can I remove the offending border while keeping AllowTransparency disabled and retaining my chrome-less window?



Code for clarification: This UserControl contains an afflicted ScrollViewer: hastebin.com/okudoyubal.xml and is a child in this UserControl: hastebin.com/esiregapem.xml
Using slightly modified Metro theme: http://www.mediafire.com/file/xjawcacw3gzk435/ModMetroTheme.zip
and here are the specific ScrollViewer styles: https://hastebin.com/uvulihekex.xml

2

There are 2 answers

0
TiberiumFusion On

I've learned some more and found a workaround. The white border between cells is the ScrollViewer's grid's background showing through. Or rather, the lack of a background. While it's set to be transparent, it decides to act non-transparent instead, which can be cheaply solved by changing the grid's background color. However, this is klutzy to do, as either every ScrollViewer and other Grid-using elements now have that solid background, or each one must be set manually (potentially ruining grids for which the cell border doesn't show anyways).

While the following workaround does not work in every place in my application, it works in some:

<Style x:Key="ScrollViewerStyle" TargetType="{x:Type ScrollViewer}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                <Grid Background="{x:Null}" SnapsToDevicePixels="True" UseLayoutRounding="True">
                    <Grid.Effect>
                        <BlurEffect KernelType="Box" Radius="0"/>
                    </Grid.Effect>

                    // Content

                </Grid>
            ...

Setting the background to transparent, snapping to pixels, using layout rounding, and applying the box blur of 0 removes the see-through margins between cells. Additionally, there is no noticeable performance loss from the effect - as far as I can tell.

Perhaps the blur effect inherently requires transparency, and its introduction tricks the confused Grid into actually having a transparent cell border.


If anyone has a solution to removing this cell border altogether, that'd still be very great to hear!

0
Youngjae On

It could be vary by controls, but I could achieve with BorderThinkness="0" in ScrollViewer contained contol.

Note: I wrote this answer because this approach seems not tried. The op's hastbin.com links are not accessible now.