Blog

[WPF]スライダーバーのstyleを変更する

こんにちは。
ソリューションセクションのHです。

弊社、開発に際して結構いろいろな言語を使用しています。
私が使用した言語だけでもphp(laravel,cakePHP等)やC#、go言語と様々です。

現在C#でアプリケーションを開発中なのですが、UIフレームワークにWPFを使用しています。
WPFは何度か案件で使用しているのですが、windowsアプリケーションより自由度が高く細かいデザインができるのが特徴です。
ただ、自由度が高すぎて微妙にやりたいことができないとかあったりしますが、そこはgoogle先生にご教授いただきます。(いつもありがとうございます。)

今回はWPFでスライダーバーのスタイルを変更したい場面が出たときに詰まってしまったのでこんな風にしましたっていうのを参考程度にご紹介できればと思います。

まず標準のスライダーバーはこちら

Before

質素ですね
以下のパーツを使用してStyleを変更しましょう

スライダーバーのパーツ

最終的にこうなります

After

今回はスタイルをResourceDictionaryに分けました(画面のコードが長くなってしまうので・・・)
コードはこちら↓




<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


    <!-- スライダー関係のスタイル -->
    <!-- スライダー スライダー内ReeatButtonスタイル -->
    <Style x:Key="SliderButtonStyle" 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="LeftRoundButtonStyle" TargetType="RepeatButton">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Image Source="/Resources/left_right.png" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- スライダー 最右端ボタンスタイル -->
    <Style x:Key="RightRoundButtonStyle" TargetType="RepeatButton">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Image Source="/Resources/left_right.png" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- スライダー バースタイル -->
    <Style x:Key="SliderBarStyle" TargetType="Image">
        <Setter Property="Source" Value="/Resources/back.png" />
    </Style>
    <!-- スライダー つまみスタイル -->
    <Style x:Key="SliderThumbStyle" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Image Source="/Resources/maru.png" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- スライダー 本体スタイル -->
    <Style x:Key="CostomSliderStyle" TargetType="Slider">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Width" Value="300"/>
        <Setter Property="Height" Value="25"/>
        <Setter Property="Maximum" Value="5"/>
        <Setter Property="Minimum" Value="0"/>
        <Setter Property="Value" Value="0"/>
        <Setter Property="IsSnapToTickEnabled" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Slider">
                    <Grid>
                        <Grid.Background>
                            <ImageBrush ImageSource="/Resources/back01.png"/>
                        </Grid.Background>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="*" Name="row" />
                            <RowDefinition Height="auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="*" Name="column" />
                            <ColumnDefinition Width="auto" />
                        </Grid.ColumnDefinitions>

                        <RepeatButton Name="PART_DecreaseRepeatButton" 
                                  Grid.Row="1" Grid.Column="0" 
                                  Style="{StaticResource LeftRoundButtonStyle}"/>

                        <RepeatButton Name="PART_IncreaseRepeatButton" 
                                  Grid.Row="1" Grid.Column="2" 
                                  Style="{StaticResource RightRoundButtonStyle}"/>

                        <Image Grid.Row="1" Grid.Column="1"
                                   Style="{StaticResource SliderBarStyle}" />

                        <Track Name="PART_Track" 
                               HorizontalAlignment="Stretch" 
                               VerticalAlignment="Center"   
                               Grid.Row="1" Grid.Column="1"
                               Width="280" 
                               Height="{TemplateBinding Height}" >
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Command="Slider.DecreaseLarge" 
                                          Style="{StaticResource SliderButtonStyle}" />
                            </Track.DecreaseRepeatButton>

                            <!-- つまみ -->
                            <Track.Thumb>
                                <Thumb Style="{StaticResource SliderThumbStyle}" />
                            </Track.Thumb>

                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="Slider.IncreaseLarge" 
                                          Style="{StaticResource SliderButtonStyle}" />
                            </Track.IncreaseRepeatButton>
                        </Track>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

このstyleを画面側のXAMLで読み込んでスライダーバーを変更します!




<Window x:Class="WorkInstructionManager.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WorkInstructionManager"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" Background="Gray">
    <Window.Resources>
        <ResourceDictionary Source="/WorkInstructionManager;component/ResouceDictionary.xaml"/>
    </Window.Resources>
    <Grid>
        <Slider HorizontalAlignment="Left" Margin="104,135,0,0" VerticalAlignment="Top"  Style="{StaticResource CostomSliderStyle}"/>
    </Grid>
</Window>

これでStyleが変更できました!
WEBならCSSでもっと簡素化して書けそうですがXAMLでいろいろやろうとすると長くなってしまいますね・・・

今回はここまでです★