WPF : 24. ScrollBar 커스터마이징(Template)

ScrollBar Template 정의

• ScrollBar의 Template을 이미지처럼 두 개의 RepeatButton과 Track으로 구성한다.
• Template을 구성하는 Control의 Template과 Style을 변경하여 외형을 수정한다.
• ScrollBar의 기존 동작을 가져오기 위해서, Track은 ScrollBar의 TemplatePart에 지정된 이름을 명시하고, 각 Button은 ScroolBar에 정의된 Command를 연결한다.

<!-- ScrollBar Template 정의 -->
<ControlTemplate x:Key="VerticalScrollBar"
                 TargetType="{x:Type ScrollBar}">
    <Grid Background="LightGray">
        <Grid.RowDefinitions>
            <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}" />
            <RowDefinition Height="0.00001*" />
            <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}" />
        </Grid.RowDefinitions>
        <RepeatButton Content="▲"
                      Style="{StaticResource LineButtonStyle}"
                      Command="ScrollBar.LineUpCommand" />
        <Track Grid.Row="1"
               x:Name="PART_Track"
               IsDirectionReversed="True">
            <Track.DecreaseRepeatButton>
                <RepeatButton Command="ScrollBar.PageUpCommand"
                              Style="{StaticResource PageButtonStyle}" />
            </Track.DecreaseRepeatButton>
            <Track.Thumb>
                <Thumb Background="SkyBlue" />
            </Track.Thumb>
            <Track.IncreaseRepeatButton>
                <RepeatButton Command="ScrollBar.PageDownCommand"
                              Style="{StaticResource PageButtonStyle}" />
            </Track.IncreaseRepeatButton>
        </Track>
        <RepeatButton Grid.Row="2"
                      Content="▼"
                      Style="{StaticResource LineButtonStyle}"
                      Command="ScrollBar.LineDownCommand" />
    </Grid>
</ControlTemplate>

<!-- Track의 RepeatButton Template 정의 -->
<Style TargetType="{x:Type RepeatButton}" x:Key="PageButtonStyle">
    <Setter Property="Focusable"
            Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <Border Background="Transparent" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- 최상단,하단의 RepeatButton Template 정의 -->
<Style TargetType="{x:Type RepeatButton}"
       x:Key="LineButtonStyle">
    <Setter Property="Focusable"
            Value="False" />
    <Setter Property="TextElement.Foreground"
            Value="Blue" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <Border Background="SkyBlue"
                        BorderBrush="Black"
                        BorderThickness="1"
                        CornerRadius="3">
                    <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type ScrollBar}">
    <Style.Triggers>
        <Trigger Property="Orientation"
                 Value="Vertical">
            <Setter Property="Width"
                    Value="18" />
            <Setter Property="Height"
                    Value="Auto" />
            <Setter Property="Template"
                    Value="{StaticResource VerticalScrollBar}" />
        </Trigger>
    </Style.Triggers>
</Style>

<Border BorderBrush="Black"
        BorderThickness="1">
    <ScrollViewer>
        <Grid Height="5000"/>
    </ScrollViewer>
</Border>

💡 <RowDefinition Height="0.00001*" />를 지정한 이유

https://stackoverflow.com/questions/31124249/odd-row-column-dimensions-in-scrollbar-template