From window, to wind

趣味のゲームとJavaプログラムなどについて 適当に書き綴るブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

WMPっぽいスライダー作成

こんな感じになりました。
通常時はThumbを隠して、
Sliderにマウスオーバーした時にThumbを表示、
Thumbにマウスオーバーした時に明るいブラシに変更。
customslider.png

スライダーのデフォルトのスタイルだと
Thumbの左右にあるRepeatButtonが
Thumbと重ならないようになっているので苦労した。

前回作った(偶然できた)TriSliderのコードを見直したところ、
Marginが重要だということが分かったので、
Marginの設定でRepeatButtonの左右をThumbの半分の幅ピクセルだけずらし(片側+のマージン反対側-のマージン)、
背景もMarginの設定で同じ幅だけ左右を削ることにした。

なんでRepeatButtonのマージンの設定がThumb側へのマイナスマージンだけじゃないかというと、
これだけだとValueが最小でもThumbの半分の幅だけバーが表示され、
最大でもThumbの半分の幅だけバーの余白が出来るからです。
このためRepeatButtonを平行にずらして、
背景の描画をそれに合わせています。

もっとうまい方法があったら教えてください。

リソースディクショナリーのコードは続きからどうぞ。
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c="clr-namespace:BindingDependencyProperty">
<c:SliderPow x:Key="dataConverter"/>
<LinearGradientBrush x:Key="ThumbBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#C5CDEB" Offset="0.0"/>
<GradientStop Color="#C5CDEB" Offset="0.125"/>
<GradientStop Color="#7D98D6" Offset="0.25"/>
<GradientStop Color="#507CCB" Offset="0.375"/>
<GradientStop Color="#073FB1" Offset="0.5"/>
<GradientStop Color="#004CC7" Offset="0.625"/>
<GradientStop Color="#0A89EF" Offset="0.75"/>
<GradientStop Color="#6BE8FF" Offset="0.875"/>
<GradientStop Color="#6BE8FF" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="OverThumbBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#D1DEF7" Offset="0.0"/>
<GradientStop Color="#D1DEF7" Offset="0.125"/>
<GradientStop Color="#8DB2F1" Offset="0.25"/>
<GradientStop Color="#609CF5" Offset="0.375"/>
<GradientStop Color="#0E63F5" Offset="0.5"/>
<GradientStop Color="#1477F8" Offset="0.625"/>
<GradientStop Color="#3DBAFD" Offset="0.75"/>
<GradientStop Color="#A6FFFF" Offset="0.875"/>
<GradientStop Color="#A6FFFF" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<Style x:Key="leftRepeatButton" TargetType="{x:Type RepeatButton}">
<Setter Property="Height" Value="3" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle RadiusX="1" RadiusY="1" Fill="#0F41CD" Stroke="#84C5FF" StrokeThickness="1" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="rightRepeatButton" TargetType="{x:Type RepeatButton}">
<Setter Property="Height" Value="3" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="WMPThumb" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Visibility" Value="Hidden"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Rectangle Name="rectThumb" Width="16" Height="9" RadiusX="4" RadiusY="4" Fill="{StaticResource ThumbBrush}" Stroke="#3F66A0" StrokeThickness="1" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="rectThumb" Property="Fill" Value="{StaticResource OverThumbBrush}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="rectThumb" Property="Fill" Value="Cyan"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="WMPSlider" TargetType="{x:Type Slider}">
<Setter Property="Height" Value="6" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Border Background="Transparent">
<Grid>
<Rectangle RadiusX="3" RadiusY="3" Margin="7,0,7,0" Fill="#0C2032" Height="6" Width="Auto" Stroke="#54616F" StrokeThickness="1"/>
<Track x:Name="PART_Track" >
<Track.DecreaseRepeatButton>
<RepeatButton Margin="8,1,-8,0" Style="{StaticResource leftRepeatButton}" Command="{x:Static Slider.DecreaseLarge}"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Margin="8,1,8,0" Style="{StaticResource rightRepeatButton}" Command="{x:Static Slider.IncreaseLarge}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Style="{StaticResource WMPThumb}" />
</Track.Thumb>
</Track>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Thumb" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
スポンサーサイト

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://kagenyan.blog69.fc2.com/tb.php/140-d0dfbb74
この記事にトラックバックする(FC2ブログユーザー)

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。