CODEWITHSUNDEEP
silverlightwindows-phone-7slidercustom-controls
askquestion
askquestion

Reputation: 169

change slider UI with custom image. windows phone

I want to add image for slider control is that possible if yes how can i do?

My current screen is like this.

enter image description here

And i want to achieve something like this.

Instead of slider default ui i want place my image.

enter image description here

Upvotes: 0

Views: 215

Answers (1)

Anton Sizikov
Anton Sizikov

Reputation: 9230

Since we don't have much details I would recommend you to have a look at this page: http://www.geekchamp.com/articles/customizing-wp7-slider-in-different-ways

You can find some customization examples there.

I guess you want to put an image here:

<ControlTemplate x:Key="ThumbControlTemplate1" TargetType="Thumb">
    <Image Source="path to your img" Height="60" Width="50" />
</ControlTemplate>

upd

In the article on geekchamp you can see the full control template.

Go to HorisontalTemplate

There is an element called HorisontalTrack. It is a Rectagle now

 <Rectangle x:Name="HorizontalTrack" 
           Grid.ColumnSpan="3" 
           Fill="{TemplateBinding Background}" 
           Height="12" 
           IsHitTestVisible="False" Margin="0,22,0,50" Opacity="0.2"/>

Replace it with Image. Also you don't need HorizontalFill, so make it transparent.

An use a bubble image for the Thumb. Basically that's it.

Upvotes: 1

Related Questions