回答編集履歴

1 画像

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>

```

```

---