【Sliderのデザイン】

Question

windows8.1 ストアアプリを、visualstudio2015、OSはWindows10で開発しております。

画像のような、スライダーを作成したいのですが、
自分の力では実装できませんでした。

今のところ、コードは下記です。

 <Border Background="Green" BorderBrush="Green " CornerRadius="5" Height="20" Width ="500" />

プログラムの部分はいったん置いておくとして、
xamlでのデザインはどのようにすればよろしいでしょうか？

調べた限りでは、プログレスバー？スライダー？Thumb？を使えそうというところまでしかわかりませんでした。
いろいろ試してみましたが、つまみ(Thumb )のデザインの変更の仕方がわかりません。

ご存知の方いらっしゃいますでしょうか。

宜しくお願い致します。

Answer 1

こんにちは。

直接の回答ではありませんが、
おそらく仕組みをご理解されていないかと思いましたので、
以下を参考にされると良いかと思います。
スライダーの追加 (XAML)

Comments

[b1ackc0ffee]

daichanさん

こんにちは、お世話になります。

リンクありがとうございました。
自分ではたどり着くことができなかったので助かりました。
【Slider スタイルとテンプレート】ページは特に参考になりました。

VisualStudioでの、テンプレートの出し方も新たに習得することができました。
便利なんですね！！
Rectangle、TickBar 、Thumb などさらに細かく調べていきたいと思います。
ありがとうございました★

Answer 2

こんにちは。

こんな感じでしょうか。
つまみの中はパスツールか何かで描いてあげてください。

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style x:Key="SliderStyle1" TargetType="Slider">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Slider">
                        <Grid Margin="{TemplateBinding Padding}">
                            <Grid.Resources>
                                <Style x:Key="SliderThumbStyle" TargetType="Thumb">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="Thumb">
                                                <!--これが「つまみ」部分-->
                                                <!--<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>-->
                                                <Ellipse Fill="White" Width="20" Height="20" Margin="-5,-8,-5,-5" Stroke="LimeGreen" />
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </Grid.Resources>
                            <Grid x:Name="SliderContainer" Background="Transparent">
                                <Grid x:Name="HorizontalTemplate">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>

                                    <!--これが満たされてない部分のバー-->
                                    <Rectangle x:Name="HorizontalTrackRect" RadiusX="5" RadiusY="5" Grid.ColumnSpan="3" Fill="Silver" Grid.Row="1" Margin="0,0,0,3"/>
                                    <!--これが満たされている部分のバー-->
                                    <Rectangle x:Name="HorizontalDecreaseRect" RadiusX="5" RadiusY="5" Fill="LimeGreen" Grid.Row="1" Margin="0,0,0,3" />
                                    <Thumb x:Name="HorizontalThumb" AutomationProperties.AccessibilityView="Raw" Grid.Row="1" Grid.Column="1" DataContext="{TemplateBinding Value}" 
                                           Background="{ThemeResource SliderThumbBackgroundThemeBrush}" 
                                           Height="{ThemeResource SliderTrackThemeHeight}" 
                                           Width="{ThemeResource SliderTrackThemeHeight}"
                                           Style="{StaticResource SliderThumbStyle}" />
                                </Grid>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Slider HorizontalAlignment="Center" Value="30" VerticalAlignment="Center" Width="200" Style="{StaticResource SliderStyle1}" />
    </Grid>
</Page>

---

Comments

[Tak1wa]

見づらいですね…。折り返さずに横スクロールとか出てくれれば良いのに…。
エディタ等に張り付けてみてください。

[b1ackc0ffee]

Tak1waさん
お世話になっております。
コードまで書いていただいて。。。＞＜嬉涙
<Page.Resources>の中に、Gridがあったり、Gridの中に<Grid.Resources>があったりと初めて見た書き方で勉強になりました。
切り出しやすいからでしょうか？

早速試し、アレンジしてみました。
・。・。・。・。・。・。・。・。・。・。・。・。・。・。・。・。・。・。

<Page.Resources>
<Style x:Key="SliderStyle1" TargetType="Slider">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">

<Grid Margin="{TemplateBinding Padding}">

<Grid.Resources>
<Style x:Key="SliderThumbStyle" TargetType="Thumb">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<!--これが「つまみ」部分-->
<Image Source="ms-appx:/Assets/Slider.png" Height="37" Width="37" Stretch="Uniform" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>

<Grid x:Name="SliderContainer" Background="Transparent">
<Grid x:Name="HorizontalTemplate">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="11"/>
<RowDefinition/>
</Grid.RowDefinitions>

<!--これが満たされてない部分のバー-->
<Rectangle x:Name="HorizontalTrackRect" RadiusX="5" RadiusY="5" Grid.ColumnSpan="3" Fill="Silver" Grid.Row="1" Margin="0,0,0,3"/>
<!--これが満たされている部分のバー-->
<Rectangle x:Name="HorizontalDecreaseRect" RadiusX="5" RadiusY="5" Fill="LimeGreen" Grid.Row="1" Margin="0,0,0,3" />
<Thumb x:Name="HorizontalThumb" AutomationProperties.AccessibilityView="Raw" Grid.Row="0" Grid.RowSpan="3" Grid.Column="1" DataContext="{TemplateBinding Value}"
Background="{ThemeResource SliderThumbBackgroundThemeBrush}"
Height="Auto"
Width="Auto"
Style="{StaticResource SliderThumbStyle}" />
</Grid>
</Grid>

</Grid>

</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Slider HorizontalAlignment="Center" Value="30" Width="700" Style="{StaticResource SliderStyle1}" TickPlacement="Inline" TickFrequency="10" />
</Grid>
・。・。・。・。・。・。・。・。・。・。・。・。・。・。・。・。・。・。
パス？ではなく、画像をつまみ部分にしています。
つまみ部分をバーよりも大きく突き出すために、RowDefinitionを追加しております。
期待通りの結果を得ることができ、感謝しております。

今度は、メモリの表示と、満たされている部分のバーの右側と、つまみの間に少し余白が出ているように見えてしまうのを解決中です。
Gridを分けているので、しょうがないのですが、何か良い方法はありますでしょうか？
宜しくお願いいたします。

[b1ackc0ffee]

>>>見づらいですね…。折り返さずに横スクロールとか出てくれれば良いのに…。

いろいろな方法があるのですね。
横スクロールは印刷や、全選択の際にコピーできなかったりしますが、
見やすいなど利点もあって、楽しいですね★

[Tak1wa]

>今度は、メモリの表示と、満たされている部分のバーの右側と、つまみの間に少し余白が出ているように見えてしまうのを解決中です。

HorizontalDecreaseRectのMarginを"0,0,-15,3"とか調整してあげてはどうでしょう。その結果他の問題も発生するかもしれませんが…。その際はまた質問して頂ければ。

[b1ackc0ffee]

ほおお～！！できました★
助かりました、ありがとうございます。

[b1ackc0ffee]

あ！他の問題が発生しました。

HorizontalDecreaseRectのMarginを"0,0,-15,3"
の部分ですが、-15としたことで、スライドが右端までいかなくなってしまいました。
ちょうど15くらい余白があいてしまいます。
全体の長さが決まっていて、左側と右側を足して計算しているせいでしょうか？
ちなみに、3は何の3でしょうか？
お手数ですが、宜しくお願いいたします！

[b1ackc0ffee]

下記で解決したので、取り急ぎシェアします
<!--これが満たされている部分のバー-->
<Rectangle x:Name="HorizontalDecreaseRect" RadiusX="5" RadiusY="5" Fill="#5CBC3F" Grid.Row="1" Margin="0,0,0,3" Opacity="0"/>
<TickBar x:Name="HorizontalInlineTickBar" Grid.ColumnSpan="3" Fill="#CCCCCC" Width="5" Height="5" Grid.Row="1" Visibility="Collapsed"/>
<Border Grid.Row="1" CornerRadius="5 0 0 5" Width="{Binding ElementName=HorizontalDecreaseRect, Path=ActualWidth}" Height="{Binding ElementName=HorizontalDecreaseRect, Path=ActualHeight}" Background="#5CBC3F" Margin="0 0 -10 0"/>
<Thumb x:Name="HorizontalThumb" AutomationProperties.AccessibilityView="Raw" Grid.Row="0" Grid.RowSpan="3" Grid.Column="1" DataContext="{TemplateBinding Value}"
Height="Auto"
Width="Auto"
Style="{StaticResource SliderThumbStyle}" />
</Grid>
</Grid>

</Grid>

</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Slider Grid.Row="0" Grid.Column="3" Value="30" Width="700" Style="{StaticResource SliderStyle1}" TickPlacement="Inline" TickFrequency="175" />
</Grid>

結局borderを使うという。。。ｗ
あとは、メモリを丸くするだけです＾＾