Question

我创建了一个自定义滚动条模板（用于WPF 4项目），用于为项目中的所有滚动条设置样式。我遇到的问题是我已将滚动条滑块设置为矩形对象，现在虚拟化（根据列表框中的记录数量重新调整大小）不再有效，如果我尝试，矩形会被切断设置明确的高度。

这是我用来创建自定义模板的xaml。

<!-- CUSTOM SCROLL BAR ELEMENTS -->
<Style x:Key="ScrollBarLineButtonStyleUp" TargetType="{x:Type RepeatButton}">
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Margin" Value="1,0,1,4" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <Grid Margin="1">
                    <Path Name="UpButton" Fill="{StaticResource ScrollBarGray}" Data="M 0 6 L 12 6 L 6 0 Z"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="UpButton" Property="Fill" Value="{StaticResource SelectedGray}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ScrollBarLineButtonStyleDown" TargetType="{x:Type RepeatButton}">
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Margin" Value="1,4,1,0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <Grid Margin="1">
                    <Path Name="UpButton" Fill="{StaticResource ScrollBarGray}" Data="M 0 0 L 6 6 L 12 0 Z"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="UpButton" Property="Fill" Value="{StaticResource SelectedGray}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="ScrollBarPageButtonStyle" TargetType="{x:Type RepeatButton}">
    <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="ScrollBarThumbStyle" TargetType="{x:Type Thumb}">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Margin" Value="3,0,4,0" />

    <Setter Property="Background" Value="{x:Null}" />
    <Setter Property="BorderBrush" Value="{x:Null}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Rectangle Fill="{StaticResource ScrollBarGray}" RadiusX="4" RadiusY="4" Width="8" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="stuff" TargetType="{x:Type ScrollBar}">
    <Setter Property="ViewportSize" Value="10"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollBar}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition MaxHeight="14"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition MaxHeight="14"/>
                    </Grid.RowDefinitions>
                    <RepeatButton Grid.Row="0" Style="{StaticResource ScrollBarLineButtonStyleUp}" Command="ScrollBar.LineUpCommand" />
                    <Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="True" ViewportSize="0">
                        <Track.DecreaseRepeatButton>
                            <RepeatButton Command="ScrollBar.PageUpCommand" Style="{StaticResource ScrollBarPageButtonStyle}"/>
                        </Track.DecreaseRepeatButton>
                        <Track.Thumb>
                            <Thumb Style="{StaticResource ScrollBarThumbStyle}"/>
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton Command="ScrollBar.PageDownCommand" Style="{StaticResource ScrollBarPageButtonStyle}"/>
                        </Track.IncreaseRepeatButton>
                    </Track>
                    <RepeatButton Grid.Row="3"  Style="{StaticResource ScrollBarLineButtonStyleDown}" Command="ScrollBar.LineDownCommand"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value> 
    </Setter> 

</Style>

如果有人能帮我恢复滚动条拇指的虚拟化，我将不胜感激

JK

Answer 1

从来没有找到答案，所以我使用了另一个通过codeproject提供的模板，并将其定制为我想要的。以下是我用作新滚动条基础的文章。我还会包含成品滚动条的图像，但我没有足够的声誉点。

http://www.codeproject.com/Articles/41787/Creating-a-Blend-like-Scrollbar

Answer 2

如上所述： https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/how-to-customize-the-thumb-size-on-a-scrollbar

您需要将“轨迹视口大小”设置为NaN，然后您可以根据需要自由设置“拇指高度”（或“宽度”）。

<Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="True" ViewportSize="NaN">
   <Thumb Height="20"> <!--Or set the height in the style-->

WPF自定义滚动条切断拇指

2 个答案: