Silverlight ProgressBar with custom image Bricks

I need a开发者_运维知识库 progressbar style which uses an image as each of its progress bricks. Any idea?

EDIT: my answer is for a Slider control, it could be adapted quite easily to a ProgressBar control, using as said in the original post either DataBinding or ElementBinding + a Converter.

Not the perfect solution, but I've used a Binding + a custom Converter to achieve that, for a volume bar. My volume bar is made of eight bricks, in my case using rectangles which have two colors, one for inactive, one for active. You could replace that by images and a converter which toggle the visibilities.

<Grid>
    <StackPanel Orientation="Horizontal">
        <Rectangle Fill="{Binding Volume, ConverterParameter=0.0, Converter={StaticResource VolumeToColor}}" />
        <Rectangle Fill="{Binding Volume, ConverterParameter=0.125, Converter={StaticResource VolumeToColor}}" />
        <Rectangle Fill="{Binding Volume, ConverterParameter=0.25, Converter={StaticResource VolumeToColor}}" />
        <Rectangle Fill="{Binding Volume, ConverterParameter=0.375, Converter={StaticResource VolumeToColor}}" />
        <Rectangle Fill="{Binding Volume, ConverterParameter=0.5, Converter={StaticResource VolumeToColor}}" />
        <Rectangle Fill="{Binding Volume, ConverterParameter=0.625, Converter={StaticResource VolumeToColor}}" />
        <Rectangle Fill="{Binding Volume, ConverterParameter=0.75, Converter={StaticResource VolumeToColor}}" />
        <Rectangle Fill="{Binding Volume, ConverterParameter=0.875, Converter={StaticResource VolumeToColor}}" />
    </StackPanel>
    <Slider Maximum="1" LargeChange="0.25" SmallChange="0.1" Value="{Binding Volume, Mode=TwoWay}" Opacity="0" Height="10" />
</Grid>

I'm sure you could do much better using Blend, copying the default Slider template and using TemplateBinding on the slider's Value.

BTW, If you don't use data binding for the Slider's value, you can use ElementBinding to grab its value for the elements of the bar.