質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

.NET Framework

.NET Framework は、Microsoft Windowsのオペレーティングシステムのために開発されたソフトウェア開発環境/実行環境です。多くのプログラミング言語をサポートしています。

teratail

teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

Visual Studio 2013

Microsoft Visual Studio 2013は、Microsoftによる統合開発環境(IDE)であり、多種多様なプログラミング言語に対応しています。 Visual Studio 2012の次のバージョンです

Q&A

解決済

2回答

11820閲覧

【Sliderのデザイン】

b1ackc0ffee

総合スコア267

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

XAML

XAML(Extensible Application Markup Language)はWPF、Silverlight、Windows PhoneそしてWindows Store appsでユーザーインターフェースを定義するために使われるXML言語です。

.NET Framework

.NET Framework は、Microsoft Windowsのオペレーティングシステムのために開発されたソフトウェア開発環境/実行環境です。多くのプログラミング言語をサポートしています。

teratail

teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

Visual Studio 2013

Microsoft Visual Studio 2013は、Microsoftによる統合開発環境(IDE)であり、多種多様なプログラミング言語に対応しています。 Visual Studio 2012の次のバージョンです

0グッド

1クリップ

投稿2015/09/28 07:51

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

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

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

xaml

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

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

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

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

宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

こんにちは。

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

投稿2015/09/28 08:50

daichan

総合スコア225

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

b1ackc0ffee

2015/09/29 04:42

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

0

ベストアンサー

こんにちは。

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

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を使うという。。。w あとは、メモリを丸くするだけです^^
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問