滚动条相遇的恼人广场答案

【问题标题】：Annoying Square Where Scrollbars Meet滚动条相遇的恼人广场
【发布时间】：2012-09-11 15:33:34
【问题描述】：

我有一个带有 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>

【问题讨论】：

如何让滚动条上色？
我绝不是 WPF 方面的专家，我不能说我完全了解所有内容，但据我所知，它来自此控件模板
可能不是什么破坏了它，但 Grid.Column="3" 超出了范围。
感谢您指出 Blam，但正如您所说，这对问题没有帮助。我不敢相信这么简单的事情会这么烦人！！！
Can't fully style a ListBox/Scrollviewer in WPF的可能重复

标签： .net wpf

【解决方案1】：

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

Can't fully style a ListBox/Scrollviewer in WPF

虽然那个解决方案确实在正方形的位置放置了一些东西，但它是在 ControlTemplate（ScrollViewer，而不是 ScrollBar）中完成的而不是通过一些修补泡泡糖的方法将某些东西放在 ScrollViewer 控件之上。

但是，我发现只要完全省略该模板中的 Rectangle 定义，烦人的角方块就会消失 - 即该区域采用 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>

【讨论】：

如果您在答案中包含多行代码块以供将来参考，如果您选择它并单击带有{} 的按钮以将代码格式应用于整个阻止而不是使用反引号，因为反引号的格式不那么好
这让我快疯了！感谢 d7samurai 完美解决了我的问题。我现在又要晚上睡觉了！

【解决方案2】：

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

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

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

Rectangle Fill 属性在默认模板中设置为 SystemColors.ControlBrushKey

【讨论】：

谢谢，这就是 2020 年真正需要的一切。另一个答案导致 ScrollViewer 有时不再滚动。
@Daryll 只是想确认覆盖富文本框的 ScrollViewer 样式确实会破坏垂直滚动。我没有找到解决办法。上面的例子确实可以规避这一点。

【解决方案3】：

如果您想删除空白，请使用以下代码：

<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" Grid.ColumnSpan="2" Value="{TemplateBinding HorizontalOffset}" Maximum="{TemplateBinding ScrollableWidth}" ViewportSize="{TemplateBinding ViewportWidth}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【讨论】：

您的答案与 2 年前发布的已接受答案有何不同？
在我的回答中，我使用 ColumnSpan 作为水平滚动条。这就是空白消失的原因。如果您想用垂直滚动条填充它，只需删除 ColumnSpan 并在垂直滚动条上添加 RowSpan。
干杯，我会试一试的。

【解决方案4】：

标记的答案不适合我。这个做到了。

<Style TargetType="{x:Type ScrollViewer}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                <Grid Background="{TemplateBinding Panel.Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <!--<Rectangle Grid.Column="1" Grid.Row="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />-->
                    <ScrollContentPresenter Grid.Column="0" Grid.Row="0" Margin="{TemplateBinding Control.Padding}" Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}" />
                    <ScrollBar Grid.Column="1" Grid.Row="0" Minimum="0" Maximum="{TemplateBinding ScrollViewer.ScrollableHeight}" ViewportSize="{TemplateBinding ScrollViewer.ViewportHeight}" Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" Visibility="{TemplateBinding ScrollViewer.ComputedVerticalScrollBarVisibility}" Cursor="Arrow" AutomationProperties.AutomationId="VerticalScrollBar" />
                    <ScrollBar Orientation="Horizontal" Grid.Column="0" Grid.Row="1" Minimum="0" Maximum="{TemplateBinding ScrollViewer.ScrollableWidth}" ViewportSize="{TemplateBinding ScrollViewer.ViewportWidth}" Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" Visibility="{TemplateBinding ScrollViewer.ComputedHorizontalScrollBarVisibility}" Cursor="Arrow" AutomationProperties.AutomationId="HorizontalScrollBar" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【讨论】：