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

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

ただいまの
回答率

91.36%

  • C#

    4774questions

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

  • teratail

    357questions

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

  • .NET Framework

    349questions

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

  • Visual Studio 2013

    279questions

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

  • XAML

    183questions

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

【Sliderのデザイン】

解決済

回答 2

投稿 2015/09/28 16:51

  • 評価
  • クリップ 1
  • VIEW 2,937

b1ackc0ffee

score 197

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

画像のような、スライダーを作成したいのですが、
自分の力では実装できませんでした。
イメージ説明
今のところ、コードは下記です。
 <Border Background="Green" BorderBrush="Green " CornerRadius="5" Height="20" Width ="500" />

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

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

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

宜しくお願い致します。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

こんにちは。

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

<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>


イメージ説明

投稿 2015/09/28 17:27

編集 2015/09/28 17:30

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/28 17:28

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

    キャンセル

  • 2015/09/29 13: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を分けているので、しょうがないのですが、何か良い方法はありますでしょうか?
    宜しくお願いいたします。

    キャンセル

  • 2015/09/29 13:38

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

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

    キャンセル

  • 2015/09/29 13:44

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

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

    キャンセル

  • 2015/09/29 15:23

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

    キャンセル

  • 2015/09/29 16:19 編集

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

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

    キャンセル

  • 2015/09/29 17: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
    あとは、メモリを丸くするだけです^^

    キャンセル

+1

こんにちは。

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

投稿 2015/09/28 17:50

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/29 13:42

    daichanさん

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

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

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

    キャンセル

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

ただいまの回答率

91.36%

関連した質問

同じタグがついた質問を見る

  • C#

    4774questions

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

  • teratail

    357questions

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

  • .NET Framework

    349questions

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

  • Visual Studio 2013

    279questions

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

  • XAML

    183questions

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