Question

我有一个标准GridView和一个标准TreeView，没有实现样式/控件模板，只有一些基本的自定义（背景，前景等）。但是，我确实将Scrollbar样式设置为应用于所有滚动条{x:Type ScrollBar}。它工作得很好，但我在TreeView和Image上的滚动条之间的其他页面上有一个小白框。

他们全部托管在一个或两个边框的网格中 - 据我所知。我已尝试为页面上的每个控件设置边框，前景和背景颜色无效。如果可能的话，我真的不想定义TreeView样式，特别是如果这不能解决问题的话。

我需要做些什么才能格式化那个小小的白盒子？我的滚动条的代码如下 - 它是相当标准的。如有必要，我会自己发布XAML窗口。

GridView

TreeView

    <Style x:Key="ScrollBarLineButton"
           TargetType="{x:Type RepeatButton}">
        <Setter Property="SnapsToDevicePixels"
                Value="True" />
        <Setter Property="OverridesDefaultStyle"
                Value="true" />
        <Setter Property="Focusable"
                Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border x:Name="Border"
                            Margin="1"
                            CornerRadius="2"
                            BorderThickness="1"
                            BorderBrush="{StaticResource ControlBorderBrush}"
                            Background="{StaticResource BackgroundBrush}">
                        <Path x:Name="Arrow"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Data="{Binding Content, 
                              RelativeSource={RelativeSource TemplatedParent}}" 
                              Fill="White">
                        </Path>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarPageButton"
           TargetType="{x:Type RepeatButton}">
        <Setter Property="SnapsToDevicePixels"
      Value="True" />
        <Setter Property="OverridesDefaultStyle"
      Value="true" />
        <Setter Property="IsTabStop"
      Value="false" />
        <Setter Property="Focusable"
      Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border Background="Transparent" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarThumb"
           TargetType="{x:Type Thumb}">
        <Setter Property="SnapsToDevicePixels"
      Value="True" />
        <Setter Property="OverridesDefaultStyle"
      Value="true" />
        <Setter Property="IsTabStop"
      Value="false" />
        <Setter Property="Focusable"
      Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border CornerRadius="4"
                            Background="{StaticResource ProxyRadial}"
                            BorderThickness="1"
                            BorderBrush="{StaticResource BorderBrush}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="VerticalScrollBar"
                     TargetType="{x:Type ScrollBar}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition MaxHeight="18" />
                <RowDefinition Height="0.00001*" />
                <RowDefinition MaxHeight="18" />
            </Grid.RowDefinitions>
            <Border Grid.RowSpan="3"
                    CornerRadius="2"
                    Background="{StaticResource DarkBackgroundBrush}" />
            <RepeatButton Grid.Row="0"
                          Style="{StaticResource ScrollBarLineButton}"
                          Height="18"
                          Command="ScrollBar.LineUpCommand"
                          Content="M 0 4 L 8 4 L 4 0 Z" />
            <Track x:Name="PART_Track"
                   Grid.Row="1"
                   IsDirectionReversed="true">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="{StaticResource ScrollBarPageButton}"
                                  Command="ScrollBar.PageUpCommand" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource ScrollBarThumb}"
                           Margin="2,0"
                           Name="Thumb"/>
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="{StaticResource ScrollBarPageButton}"
                  Command="ScrollBar.PageDownCommand" />
                </Track.IncreaseRepeatButton>
            </Track>
            <RepeatButton Grid.Row="3"
                          Style="{StaticResource ScrollBarLineButton}"
                          Height="18"
                          Command="ScrollBar.LineDownCommand"
                          Content="M 0 0 L 4 4 L 8 0 Z" />
        </Grid>
    </ControlTemplate>

    <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="{StaticResource DarkBackgroundBrush}" />
            <RepeatButton Grid.Column="0"
              Style="{StaticResource ScrollBarLineButton}"
              Width="18"
              Command="ScrollBar.LineLeftCommand"
              Content="M 4 0 L 4 8 L 0 4 Z" />
            <Track x: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,2"/>
                </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>

    <Style x:Key="{x:Type ScrollBar}"
           TargetType="{x:Type ScrollBar}">
        <Setter Property="SnapsToDevicePixels"
                Value="True" />
        <Setter Property="OverridesDefaultStyle"
                Value="true" />
        <Style.Triggers>
            <Trigger Property="Orientation"
                     Value="Horizontal">
                <Setter Property="Width"
                        Value="Auto" />
                <Setter Property="Height"
                        Value="16" />
                <Setter Property="Template"
                        Value="{StaticResource HorizontalScrollBar}" />
            </Trigger>
            <Trigger Property="Orientation"
         Value="Vertical">
                <Setter Property="Width"
          Value="16" />
                <Setter Property="Height"
          Value="Auto" />
                <Setter Property="Template"
                        Value="{StaticResource VerticalScrollBar}" />
            </Trigger>
        </Style.Triggers>
    </Style>

Answer 1

如果你试图复制ScrollViewerTemplate，那么你会在里面看到这个

<ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}">
        <Grid x:Name="Grid" Background="{TemplateBinding Background}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="Corner" Grid.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1"/>
            <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
            <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/>
            <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"/>
        </Grid>
    </ControlTemplate>

关注这个

<Rectangle x:Name="Corner" Grid.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1"/>

只需更改 Fill 颜色

即可

WPF滚动条样式问题

1 个答案: