回答編集履歴

1 画像

Tak1wa

Tak1wa score 4392

2015/09/28 17:30  投稿

こんにちは。
こんな感じでしょうか。
つまみの中はパスツールか何かで描いてあげてください。
```XML
<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>
```
```
---
![イメージ説明](d6d9dd67bc7818da175f38ef96909693.png)

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る