如何制作这个定制的 ListBox

Question

I need to customise my ListBox in wpf xaml. Below is what it should look like:

As you could see, I mark the key points.

Point 1: the scroll bar should be thinner than normal. For example, width of it is set 6

Point 2: the gap between the scrollbar and the main body of ListBox, eg set 5.

I know one way is to modify the copied template of ListBox, like below: but I don't know which ones correspond to above two points I mentioned.

Thanks for any advise!

    <Window.Resources>
    <SolidColorBrush x:Key="ListBox.Static.Background" Color="#FFFFFFFF"/>
    <SolidColorBrush x:Key="ListBox.Static.Border" Color="#FFABADB3"/>
    <SolidColorBrush x:Key="ListBox.Disabled.Background" Color="#FFFFFFFF"/>
    <SolidColorBrush x:Key="ListBox.Disabled.Border" Color="#FFD9D9D9"/>
    <Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBox}">
        <Setter Property="Background" Value="{StaticResource ListBox.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ListBox.Static.Border}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
        <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="true">
                        <ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </ScrollViewer>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource ListBox.Disabled.Background}"/>
                            <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ListBox.Disabled.Border}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsGrouping" Value="true"/>
                                <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

Answer 1

You have to override default template for the ScrollBar . Then you can set it as implicit style for the ScrollBar (I didn't modified all places, but you will definitely be able to find appropriate places, I also set some comments there).

<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<Color x:Key="ControlPressedColor">#FF211AA9</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>
                
<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">
                    <Border.BorderBrush>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <LinearGradientBrush.GradientStops>
                                <GradientStopCollection>
                                    <GradientStop Color="YellowGreen" Offset="0.0" />
                                    <GradientStop Color="Green" Offset="1.0" />
                                </GradientStopCollection>
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <LinearGradientBrush.GradientStops>
                                <GradientStopCollection>
                                    <GradientStop Color="YellowGreen"/>
                                    <GradientStop Color="Green" Offset="1.0" />
                                </GradientStopCollection>
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Border.Background>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver" />
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                        <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColor}" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                        <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColor}" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Path x:Name="Arrow" HorizontalAlignment="Center" VerticalAlignment="Center" Data="{Binding Content,  RelativeSource={RelativeSource TemplatedParent}}" >
                        <Path.Fill>
                            <SolidColorBrush Color="DarkGray"/>
                        </Path.Fill>
                    </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="Width" Value="10" /> <!--Thumb width-->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Border CornerRadius="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="ScrollBar">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate  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="#F0F0F0" />
                    <RepeatButton Grid.Row="0" Style="{StaticResource ScrollBarLineButton}" Height="18" Command="ScrollBar.LineUpCommand" Content="M 0 4 L 8 4 L 4 0 Z" /> <!-- Button, you can set a Margin here-->
                    <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="1,0,1,0"> 
                                <Thumb.BorderBrush>
                                    <SolidColorBrush Color="Yellow"/>

                                </Thumb.BorderBrush>
                                <Thumb.Background>
                                    <SolidColorBrush Color="Green"/>
                                </Thumb.Background>
                            </Thumb>
                        </Track.Thumb>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageDownCommand" />
                        </Track.IncreaseRepeatButton>
                    </Track>
                    <RepeatButton Grid.Row="2" Style="{StaticResource ScrollBarLineButton}" Height="18" Command="ScrollBar.LineDownCommand" Content="M 0 0 L 4 4 L 8 0 Z" /> <!-- Button, you can set a Margin here -->
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>