令人討厭的廣場滾動條滿足

Question

我有一個ScrollViewer應用程序。 2個滾動條相遇的地方是一個令人討厭的小方塊（見下面的img），我試圖擺脫。當我「窺探」應用程序時，我可以將其視爲「矩形」，但我認爲它是ScrollViewer的一部分？

我已經搜索和搜索有這方面的信息，但所有我能看到的是建議通過放置東西在它的頂部，以隱藏它：■

任何人都可以點我在正確的方向進行排序呢？

<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

我只是有完全相同的問題，卻發現這裏堆棧這個答案來解決這個問題對我來說：

Can't fully style a ListBox/Scrollviewer in WPF

雖然是解決方案做將東西放在方形的位置，它在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

如果你想刪除空空間的使用下面的代碼：

<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> 

Answer 3

的顯着答案沒有做到這一點適合我。這一個。

<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>