WPF – how to bind ScaleTransform to Slider, percentage style!

Whilst working on an image view I needed the ability to bind the value of a Slider to a ScaleTransform as a percentage value and at the same time display the value of the slider in a label. So for a zoom range from 1% to 250% you would usually set the Minimum and Maximum property of your Slider to 0.01 and 2.5 respectively, by then you wouldn’t be able to display the zoom value as a percentage, e.g. Zoom 148%.

So to get around this limitation, in the end I used the range 1 to 250 for the Slider and added another ScaleTransform with ScaleX and ScaleY set to 0.01, like this:

<StackPanel x:Name="LayoutRoot" Background="Gray">
    <StackPanel Orientation="Horizontal">
        <TextBlock Margin="5,5,10,5">Zoom</TextBlock>
        <TextBlock Margin="5,5,0,5" Text="{Binding Path=Value, ElementName=sldZoom, Mode=OneWay}"/>
        <TextBlock Margin="0,5">%</TextBlock>
    </StackPanel>

    <Slider x:Name="sldZoom" Orientation="Horizontal" Minimum="1" Maximum="250" Value="100"/>

    <Image Source="bingonet.png" RenderTransformOrigin="0, 0">
        <Image.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="0.01" ScaleY="0.01"/>
                <ScaleTransform>
                    <ScaleTransform.ScaleX>
                        <Binding ElementName="sldZoom" Path="Value" Mode="OneWay"/>
                    </ScaleTransform.ScaleX>
                    <ScaleTransform.ScaleY>
                        <Binding ElementName="sldZoom" Path="Value" Mode="OneWay"/>
                    </ScaleTransform.ScaleY>
                </ScaleTransform>
            </TransformGroup>
        </Image.RenderTransform>
    </Image>
</StackPanel>