Slider Control Styling

Does any body have a control template / style overridden for Slider
control?
My intension is to draw a small rectangle from the left side to the
Thumb point while user changes Slider value. The background will be
another rectangular area,
When I use my Arrow keys I am getting the ValueChange Event from the
following code. I wanted to have the mouse click ability also on the
slider.

<Style TargetType="{x:Type Slider}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Canvas Name="Canvas" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}"
MinWidth="{TemplateBinding MinWidth}"
MinHeight="{TemplateBinding MinHeight}"
MaxHeight="{TemplateBinding MaxHeight}">
</Canvas>
<ControlTemplate.Triggers>
<Trigger Property="Slider.IsMouseOver" Value="True">
<Setter Property = "Background" Value="Green"/>
<Setter Property = "TickPlacement" Value ="TopLeft"/>
<Setter Property = "IsMoveToPointEnabled" Value
="True"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Hi guys,
I just finished the styling of slider as I wanted using the
information from MSDN at
http://windowssdk.msdn.microsoft.com...56(VS.80).aspx

Here is my slider code.

<Window.Resources>
<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type
Slider}">
<Canvas>
<Canvas.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="0,0">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Black" Offset="0.03"/>
<GradientStop Color="AliceBlue" Offset="0.4"/>
<GradientStop Color="DarkSlateGray" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Canvas.Background>
<Track x:Name="PART_Track" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<Track.DecreaseRepeatButton>
<RepeatButton Command="Slider.DecreaseLarge" Opacity="0.9">
<RepeatButton.BitmapEffect>
<BevelBitmapEffect BevelWidth="2"
EdgeProfile="CurvedIn" LightAngle="3" />
</RepeatButton.BitmapEffect>
<RepeatButton.Background>
<LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.1" Color="Black"/>
<GradientStop Offset="0.7" Color="AliceBlue"/>
<GradientStop Offset="1" Color="DarkSlateGray"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</RepeatButton.Background>
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Height="{TemplateBinding Height}"
Width="0"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="Slider.IncreaseLarge" Opacity="0"/>
</Track.IncreaseRepeatButton>
</Track>
</Canvas>
</ControlTemplate>

</Window.Resources>
<Slider Template="{StaticResource HorizontalSlider}" Value="3"
Height="33" Width="300" Name="Slider" Minimum="0"
Maximum="10" SmallChange="1" Background="Blue"
ToolTipService.Placement="MousePoint" ToolTip="{Binding
ElementName=Slider,Path=Value}"
IsMoveToPointEnabled="True" VerticalAlignment="Top"
Margin="16,27,21,0" Grid.ColumnSpan="1"/>





On Oct 13, 2:39 pm, "Jobi Joy" <jobi....@gmail.com> wrote:
> Does any body have a control template / style overridden for Slider
> control?
> My intension is to draw a small rectangle from the left side to the
> Thumb point while user changes Slider value. The background will be
> another rectangular area,
> When I use my Arrow keys I am getting the ValueChange Event from the
> following code. I wanted to have the mouse click ability also on the
> slider.
>
> <Style TargetType="{x:Type Slider}">
> <Setter Property="Template">
> <Setter.Value>
> <ControlTemplate TargetType="{x:Type Slider}">
> <Canvas Name="Canvas" Width="{TemplateBinding Width}"
> Height="{TemplateBinding Height}"
> Background="{TemplateBinding Background}"
> MinWidth="{TemplateBinding MinWidth}"
> MinHeight="{TemplateBinding MinHeight}"
> MaxHeight="{TemplateBinding MaxHeight}">
> </Canvas>
> <ControlTemplate.Triggers>
> <Trigger Property="Slider.IsMouseOver" Value="True">
> <Setter Property = "Background" Value="Green"/>
> <Setter Property = "TickPlacement" Value ="TopLeft"/>
> <Setter Property = "IsMoveToPointEnabled" Value
> ="True"/>
> </Trigger>
> </ControlTemplate.Triggers>
> </ControlTemplate>
> </Setter.Value>
> </Setter>
> </Style>