LoginSignup
0
2

More than 3 years have passed since last update.

XAMLでスクロールバーをカスタマイズ時のResourcesDictionary

Posted at

リソースディクショナリーで使うときは、下記を追加でsysが使えたのでメモ

xmlns:sys="clr-namespace:System;assembly=mscorlib"

Resourcesは参考サイトのコピペ、自分メモ用に拝借です

        <!-- スクロールバーの幅 -->
        <sys:Double x:Key="ScrollBarSize">12</sys:Double>
        <!-- ボタンの長さ -->
        <sys:Double x:Key="ScrollBarRepeatButtonSize">16</sys:Double>
        <!-- スクロールバーのマージン -->
        <sys:Double x:Key="ScrollBarMarginSize">5</sys:Double>
        <!-- スクロールバーの色-->
        <SolidColorBrush x:Key="ScrollBarColorBrush" Color="#66ffffff" />
        <!-- ボーダーの色 -->
        <SolidColorBrush x:Key="ScrollBarBorderBrush" Color="#66ffffff" />
        <!-- トラック(レーン)の色 -->
        <SolidColorBrush x:Key="ScrollBarTrackBrush" Color="#33ffffff" />
        <!-- 三角の色 -->
        <SolidColorBrush x:Key="ScrollBarHilightBrush" Color="#ccffffff" />
        <!-- ボタンを押した時の色 -->
        <SolidColorBrush x:Key="ScrollBarPressedBrush" Color="#99ffffff" />
        <!-- 使用不可の色 -->
        <SolidColorBrush x:Key="ScrollBarDisabledBrush" Color="#44ffffff" />

        <!-- 終端の三角ボタンのスタイル -->
        <Style x:Key="ScrollBarRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border x:Name="Border" Margin="0" CornerRadius="0"  Background="{StaticResource ScrollBarColorBrush}" BorderBrush="{StaticResource ScrollBarBorderBrush}" BorderThickness="1">
                            <Path HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{StaticResource ScrollBarHilightBrush}" Data="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="{StaticResource ScrollBarPressedBrush}" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{StaticResource ScrollBarDisabledBrush}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- トラック(レーン)のスタイル -->
        <Style x:Key="ScrollBarTrackStyle" TargetType="{x:Type RepeatButton}">
            <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="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border CornerRadius="0"  Background="{StaticResource ScrollBarColorBrush}" BorderBrush="{StaticResource ScrollBarBorderBrush}" BorderThickness="1" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- カスタムスクロールバーのスタイル -->
        <Style x:Key="CustomScrollBarStyle" TargetType="{x:Type ScrollBar}">
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Style.Triggers>
                <!-- 縦向きのスクロールバー -->
                <Trigger Property="Orientation" Value="Vertical">
                    <Setter Property="Width" Value="{StaticResource ScrollBarSize}"/>
                    <Setter Property="Height" Value="Auto" />
                    <Setter Property="Margin">
                        <Setter.Value>
                            <Thickness Left="0" Top="{StaticResource ScrollBarMarginSize}" Right="{StaticResource ScrollBarMarginSize}" Bottom="{StaticResource ScrollBarMarginSize}" />
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition MaxHeight="{StaticResource ScrollBarRepeatButtonSize}"/>
                                        <RowDefinition/>
                                        <RowDefinition MaxHeight="{StaticResource ScrollBarRepeatButtonSize}"/>
                                    </Grid.RowDefinitions>
                                    <Border Grid.RowSpan="3" CornerRadius="0" Background="{StaticResource ScrollBarTrackBrush}" />
                                    <RepeatButton Grid.Row="0" Style="{StaticResource ScrollBarRepeatButtonStyle}" Height="{StaticResource ScrollBarRepeatButtonSize}" 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 ScrollBarTrackStyle}"  Command="ScrollBar.PageUpCommand" />
                                        </Track.DecreaseRepeatButton>
                                        <Track.Thumb>
                                            <Thumb Style="{StaticResource ScrollBarThumbStyle}"  Margin="0,1,0,1"/>
                                        </Track.Thumb>
                                        <Track.IncreaseRepeatButton>
                                            <RepeatButton Style="{StaticResource ScrollBarTrackStyle}" Command="ScrollBar.PageDownCommand" />
                                        </Track.IncreaseRepeatButton>
                                    </Track>
                                    <RepeatButton Grid.Row="2" Style="{StaticResource ScrollBarRepeatButtonStyle}" Height="{StaticResource ScrollBarRepeatButtonSize}"  Command="ScrollBar.LineDownCommand"  Content="M 0 0 L 4 4 L 8 0 Z"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <!-- 横向きのスクロールバー -->
                <Trigger Property="Orientation" Value="Horizontal">
                    <Setter Property="Width" Value="Auto"/>
                    <Setter Property="Height" Value="{StaticResource ScrollBarSize}" />
                    <Setter Property="Margin">
                        <Setter.Value>
                            <Thickness Left="{StaticResource ScrollBarMarginSize}" Top="0" Right="{StaticResource ScrollBarMarginSize}" Bottom="{StaticResource ScrollBarMarginSize}" />
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition MaxWidth="{StaticResource ScrollBarRepeatButtonSize}"/>
                                        <ColumnDefinition/>
                                        <ColumnDefinition MaxWidth="{StaticResource ScrollBarRepeatButtonSize}"/>
                                    </Grid.ColumnDefinitions>
                                    <Border Grid.ColumnSpan="3" CornerRadius="0" Background="{StaticResource ScrollBarTrackBrush}" />
                                    <RepeatButton Grid.Column="0" Style="{StaticResource ScrollBarRepeatButtonStyle}" Width="{StaticResource ScrollBarRepeatButtonSize}" 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 ScrollBarTrackStyle}"  Command="ScrollBar.PageLeftCommand" />
                                        </Track.DecreaseRepeatButton>
                                        <Track.Thumb>
                                            <Thumb Style="{StaticResource ScrollBarThumbStyle}"  Margin="1,0,1,0"/>
                                        </Track.Thumb>
                                        <Track.IncreaseRepeatButton>
                                            <RepeatButton Style="{StaticResource ScrollBarTrackStyle}" Command="ScrollBar.PageRightCommand" />
                                        </Track.IncreaseRepeatButton>
                                    </Track>
                                    <RepeatButton Grid.Column="2" Style="{StaticResource ScrollBarRepeatButtonStyle}" Width="{StaticResource ScrollBarRepeatButtonSize}" Command="ScrollBar.LineRightCommand" Content="M 0 0 L 4 4 L 0 8 Z"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

参考サイト

XAML:StaticResourceとStyleの利用
https://qiita.com/code0327/items/e1eeaec9687fa5acef80

[WPF] WPF でスクロールバーのデザインをカスタマイズ
http://gootara.org/library/2016/06/wpf-scb.html

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2