设置宽度滚动条等于拇指宽度WPF [英] Set width scrollbar equal thumb width WPF

问题描述

我在链接后创建滚动条：

如何在WPF中创建类似Scrollbar的Apple MacOS这个Dot Life [ ^ ]

我想删除所有外部拇指部分，如图像的跟随红色部分：

sample.png - Google云端硬盘 [ ^ ]



我尝试过：



请告诉我这个问题的任何解决方案。谢谢

I create scrollbar following link:
How to create Apple MacOS like Scrollbar in WPF | This Dot Life[^]
And I want to remove all outside thumb part like followwing red part of image:
sample.png - Google Drive[^]

What I have tried:

Please tell me any solution for this problem.Thanks

推荐答案

尝试将样式更改为：

<Style x:Key="ScrollBarTrackThumb"

        TargetType="{x:Type Thumb}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Thumb}">
            <Grid x:Name="Grid">
              <Rectangle HorizontalAlignment="Stretch"

                                VerticalAlignment="Stretch"

                                Width="Auto"

                                Height="Auto"

                                Fill="Transparent" />
              <Border x:Name="CornerScrollBarRectangle"

                            CornerRadius="8"

                            HorizontalAlignment="Stretch"

                            VerticalAlignment="Stretch"

                            Width="Auto"

                            Height="Auto"

                            Margin="0,1,0,1"

                            Background="{TemplateBinding Background}" />
            </Grid>
            <ControlTemplate.Triggers>
              <Trigger Property="Tag"

                                Value="Horizontal">
                <Setter TargetName="CornerScrollBarRectangle"

                                Property="Width"

                                Value="Auto" />
                <Setter TargetName="CornerScrollBarRectangle"

                                Property="Height"

                                Value="6" />
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
<Style TargetType="{x:Type ScrollBar}">
  <Setter Property="Width" Value="4" />
  <Setter Property="Stylus.IsFlicksEnabled"

        Value="false" />
  <Setter Property="Foreground"

        Value="#ADABAB" />
  <Setter Property="Background"

        Value="Transparent" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ScrollBar}">
        <Grid x:Name="GridRoot"

                    Background="{TemplateBinding Background}">
          <Grid.RowDefinitions>
            <RowDefinition Height="0.00001*" />
          </Grid.RowDefinitions>
          <Track x:Name="PART_Track"

                        Grid.Row="0"

                        IsDirectionReversed="true"

                        Focusable="false">
            <Track.Thumb>
              <Thumb x:Name="Thumb"

                                Background="{TemplateBinding Foreground}"

                                Style="{DynamicResource ScrollBarTrackThumb}" />
            </Track.Thumb>
            <Track.IncreaseRepeatButton>
              <RepeatButton x:Name="PageUp"

                                        Command="ScrollBar.PageDownCommand"

                                        Opacity="0"

                                        Focusable="false" />
            </Track.IncreaseRepeatButton>
            <Track.DecreaseRepeatButton>
              <RepeatButton x:Name="PageDown"

                                        Command="ScrollBar.PageUpCommand"

                                        Opacity="0"

                                        Focusable="false" />
            </Track.DecreaseRepeatButton>
          </Track>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger SourceName="Thumb"

                            Property="IsMouseOver"

                            Value="true">
            <Setter Value="{DynamicResource ButtonSelectBrush}"

                            TargetName="Thumb"

                            Property="Background" />
          </Trigger>
          <Trigger SourceName="Thumb"

                            Property="IsDragging"

                            Value="true">
            <Setter Value="{DynamicResource DarkBrush}"

                            TargetName="Thumb"

                            Property="Background" />
          </Trigger>

          <Trigger Property="IsEnabled"

                            Value="false">
            <Setter TargetName="Thumb"

                            Property="Visibility"

                            Value="Collapsed" />
          </Trigger>
          <Trigger Property="Orientation"

                            Value="Horizontal">
            <Setter TargetName="GridRoot"

                            Property="LayoutTransform">
              <Setter.Value>
                <RotateTransform Angle="-90" />
              </Setter.Value>
            </Setter>
            <Setter TargetName="PART_Track"

                            Property="LayoutTransform">
              <Setter.Value>
                <RotateTransform Angle="-90" />
              </Setter.Value>
            </Setter>
            <Setter Property="Width"

                            Value="Auto" />
            <Setter Property="Height"

                            Value="6" />
            <Setter TargetName="Thumb"

                            Property="Tag"

                            Value="Horizontal" />
            <Setter TargetName="PageDown"

                            Property="Command"

                            Value="ScrollBar.PageLeftCommand" />
            <Setter TargetName="PageUp"

                            Property="Command"

                            Value="ScrollBar.PageRightCommand" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

That should do it.

That should do it.

这篇关于设置宽度滚动条等于拇指宽度WPF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！