logo标签列表

令人烦恼的方块，滚动条相交处

.netwpf
19
我有一个带有ScrollViewer的应用程序。在两个滚动条相遇的地方，有一个令人烦恼的小正方形（请参见下面的图像）。我正在尝试摆脱它。当我使用"Snoop"应用程序时，我可以将其识别为"Rectangle"，但我认为它是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>
你是如何让滚动条变色的？ - paparazzo
我绝对不是WPF的专家，也不能说我完全理解所有内容，但据我所见，它来自于这个控件模板。 - Fred
可能不是导致错误的原因，但 Grid.Column="3" 超出了范围。 - paparazzo
谢谢你指出这个问题，Blam，但正如你所说，它并没有解决问题。我简直不敢相信一个如此简单的问题会如此令人烦恼！！！ - Fred
可能是无法在WPF中完全样式化ListBox/ScrollViewer的重复问题。 - Arkane
4个回答
19

我之前也遇到了同样的问题，但在Stack上找到了这个回答:

无法完全样式化WPF中的ListBox/ScrollViewer

虽然那个解决方案确实把一个东西放在了正方形的位置上，但它是在ScrollViewer的控制模板中完成的，而不是通过将一个东西放在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>
1
为了以后参考，如果您有一个多行代码块要包含在答案中，最好选择它并单击带有 {} 的按钮，将代码格式应用于整个块，而不是使用反引号，因为反引号的格式不太好看。 - RobV
这让我疯了！谢谢d7samurai，这完美地解决了我的问题。现在我又可以安心睡觉了！ - Fred
5
我有一个自定义控件需要获取ScrollViewer的ViewportWidth和ViewportHeight，但是修改后的样式改变了这个部分。也许有一种简单的方法。
<Style TargetType="{x:Type ScrollViewer}">
        <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
        </Style.Resources>
</Style>

默认模板中，矩形填充属性被设置为SystemColors.ControlBrushKey。
谢谢，这是2020年真正需要的全部内容。另一个答案有时会导致ScrollViewer无法滚动。 - Daryll
@Daryll 只是想确认一下，覆盖 richtextbox 的 ScrollViewer 样式确实会破坏垂直滚动。我没有找到解决方法。上面的示例确实可以解决这个问题。 - Krythic
0
如果您想要删除空格，请使用以下代码：

<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年前发布的被接受的答案有何不同？ - Fred
1
在我的答案中，我使用了ColumnSpan来实现水平滚动条。这就是为什么空白处会消失的原因。如果您想要用垂直滚动条填充它，只需删除ColumnSpan并在垂直滚动条上添加RowSpan即可。 - dzwonu
好的，我会试一下。 - Fred
-1

被标记的答案对我来说做得不对。这个才是正确的。

<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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接