【Sliderのデザイン】

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

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

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

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

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

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

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

宜しくお願い致します。

行動規範の内容に同意します

回答2件

こんにちは。

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

投稿2015/09/28 08:50

daichan

総合スコア225

b1ackc0ffee

2015/09/29 04:42

daichanさんこんにちは、お世話になります。リンクありがとうございました。自分ではたどり着くことができなかったので助かりました。【Slider スタイルとテンプレート】ページは特に参考になりました。 VisualStudioでの、テンプレートの出し方も新たに習得することができました。便利なんですね！！ Rectangle、TickBar 、Thumb などさらに細かく調べていきたいと思います。ありがとうございました★

行動規範の内容に同意します

ベストアンサー

こんにちは。

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

XML
1<Page
2    x:Class="App1.MainPage"
3    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5    xmlns:local="using:App1"
6    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8    mc:Ignorable="d">
9    <Page.Resources>
10        <Style x:Key="SliderStyle1" TargetType="Slider">
11            <Setter Property="Template">
12                <Setter.Value>
13                    <ControlTemplate TargetType="Slider">
14                        <Grid Margin="{TemplateBinding Padding}">
15                            <Grid.Resources>
16                                <Style x:Key="SliderThumbStyle" TargetType="Thumb">
17                                    <Setter Property="Template">
18                                        <Setter.Value>
19                                            <ControlTemplate TargetType="Thumb">
20                                                <!--これが「つまみ」部分-->
21                                                <!--<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>-->
22                                                <Ellipse Fill="White" Width="20" Height="20" Margin="-5,-8,-5,-5" Stroke="LimeGreen" />
23                                            </ControlTemplate>
24                                        </Setter.Value>
25                                    </Setter>
26                                </Style>
27                            </Grid.Resources>
28                            <Grid x:Name="SliderContainer" Background="Transparent">
29                                <Grid x:Name="HorizontalTemplate">
30                                    <Grid.ColumnDefinitions>
31                                        <ColumnDefinition Width="Auto"/>
32                                        <ColumnDefinition Width="Auto"/>
33                                        <ColumnDefinition Width="*"/>
34                                    </Grid.ColumnDefinitions>
35
36                                    <!--これが満たされてない部分のバー-->
37                                    <Rectangle x:Name="HorizontalTrackRect" RadiusX="5" RadiusY="5" Grid.ColumnSpan="3" Fill="Silver" Grid.Row="1" Margin="0,0,0,3"/>
38                                    <!--これが満たされている部分のバー-->
39                                    <Rectangle x:Name="HorizontalDecreaseRect" RadiusX="5" RadiusY="5" Fill="LimeGreen" Grid.Row="1" Margin="0,0,0,3" />
40                                    <Thumb x:Name="HorizontalThumb" AutomationProperties.AccessibilityView="Raw" Grid.Row="1" Grid.Column="1" DataContext="{TemplateBinding Value}" 
41                                           Background="{ThemeResource SliderThumbBackgroundThemeBrush}" 
42                                           Height="{ThemeResource SliderTrackThemeHeight}" 
43                                           Width="{ThemeResource SliderTrackThemeHeight}"
44                                           Style="{StaticResource SliderThumbStyle}" />
45                                </Grid>
46                            </Grid>
47                        </Grid>
48                    </ControlTemplate>
49                </Setter.Value>
50            </Setter>
51        </Style>
52    </Page.Resources>
53    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
54        <Slider HorizontalAlignment="Center" Value="30" VerticalAlignment="Center" Width="200" Style="{StaticResource SliderStyle1}" />
55    </Grid>
56</Page>

投稿2015/09/28 08:27

編集2015/09/28 08:30

Tak1wa

総合スコア4791

Tak1wa

2015/09/28 08:28

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

b1ackc0ffee

2015/09/29 04:36

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

2015/09/29 04:38

>>>見づらいですね…。折り返さずに横スクロールとか出てくれれば良いのに…。いろいろな方法があるのですね。横スクロールは印刷や、全選択の際にコピーできなかったりしますが、見やすいなど利点もあって、楽しいですね★

Tak1wa

2015/09/29 04:44

>今度は、メモリの表示と、満たされている部分のバーの右側と、つまみの間に少し余白が出ているように見えてしまうのを解決中です。 HorizontalDecreaseRectのMarginを"0,0,-15,3"とか調整してあげてはどうでしょう。その結果他の問題も発生するかもしれませんが…。その際はまた質問して頂ければ。

b1ackc0ffee

2015/09/29 06:23

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

b1ackc0ffee

2015/09/29 07:19 編集

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

b1ackc0ffee

2015/09/29 08:03

下記で解決したので、取り急ぎシェアします  <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を使うという。。。ｗあとは、メモリを丸くするだけです＾＾

行動規範の内容に同意します

あなたの回答