滚动条遇见恼人的广场

Question

我有一个带有ScrollViewer的应用程序.2个滚动条相遇的地方是一个讨厌的小方块(见下面的img)我试图摆脱它.当我"窥探"应用程序时,我可以将其视为"矩形",但我认为它是ScrollViewer的一部分？

我搜索并搜索了有关此内容的任何信息,但我发现的所有内容都是通过在顶部放置内容来隐藏它的建议:s

任何人都可以指出我正确的方向来排序这个？

<ControlTemplate x:Key="HorizontalScrollBar" 
        TargetType="{x:Type ScrollBar}">
        <Grid >
            <Grid.ColumnDefinitions>
                <ColumnDefinition MaxWidth="18"/>
                <ColumnDefinition Width="0.00001*"/>
                <ColumnDefinition MaxWidth="18"/>
            </Grid.ColumnDefinitions>
            <Border
                Grid.ColumnSpan="3"
                CornerRadius="2" 
                Background="Transparent"   />
            <RepeatButton 
                Grid.Column="0"                           
                Style="{StaticResource ScrollBarLineButton}"
                Width="18"
                Command="ScrollBar.LineLeftCommand"
                Content="M 4 0 L 4 8 L 0 4 Z" />
            <Track 
                Name="PART_Track"
                Grid.Column="1"
                IsDirectionReversed="False">
                <Track.DecreaseRepeatButton>
                    <RepeatButton 
                        Style="{StaticResource ScrollBarPageButton}"
                        Command="ScrollBar.PageLeftCommand" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb 
                        Style="{StaticResource ScrollBarThumb}" 
                        Margin="0,1,0,1"  
                        Background="{DynamicResource NormalBrush}"
                        BorderBrush="{DynamicResource NormalBorderBrush}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton 
                        Style="{StaticResource ScrollBarPageButton}"
                        Command="ScrollBar.PageRightCommand" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton 
                Grid.Column="3" 
                Style="{StaticResource ScrollBarLineButton}"
                Width="18"
                Command="ScrollBar.LineRightCommand"
                Content="M 0 0 L 4 4 L 0 8 Z"/>
        </Grid>
    </ControlTemplate>

Answer 1

我只是遇到了完全相同的问题,但在Stack上找到了这个答案来解决它:

无法在WPF中完全设置ListBox/Scrollviewer的样式

虽然这个解决方案确实取代了正方形,但它是在ControlTemplate(ScrollViewer,而不是ScrollBar)中完成的,而不是通过一些泡泡树修补方法在ScrollViewer 控件上放置一些东西.

然而,我发现只要完全省略该模板中的矩形定义,烦人的角落正方形就会消失 - 即该区域呈现ScrollViewer的任何背景颜色(在给出的示例中,它是透明的 - 并且我很好.如果你想设置ScrollViewer背景的颜色,只需设置Grid的Background属性.

所以尝试将此添加到您的资源:

<Style TargetType="{x:Type ScrollViewer}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <ScrollContentPresenter Grid.Column="0" />
                    <ScrollBar x:Name="PART_VerticalScrollBar" Grid.Row="0" Grid.Column="1" Value="{TemplateBinding VerticalOffset}" Maximum="{TemplateBinding ScrollableHeight}" ViewportSize="{TemplateBinding ViewportHeight}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
                    <ScrollBar x:Name="PART_HorizontalScrollBar" Orientation="Horizontal" Grid.Row="1" Grid.Column="0" Value="{TemplateBinding HorizontalOffset}" Maximum="{TemplateBinding ScrollableWidth}" ViewportSize="{TemplateBinding ViewportWidth}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                    <!--<Rectangle Grid.Row="1" Grid.Column="1" Fill="Red"/>-->
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

我有一个需要 ScrollViewer 的 ViewportWidth 和 ViewportHeight 的自定义控件。但是回答的覆盖样式打破了那部分。

所以也许是一个简单的方法。

<Style TargetType="{x:Type ScrollViewer}">
        <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
        </Style.Resources>
</Style>

矩形填充属性在默认模板中设置为 SystemColors.ControlBrushKey