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>

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

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


  1. Gali   •  

    Thanks! This one helped me alot.
    Just needed to change the initial ScaleX and Y to 0.001

  2. Slate   •  

    Alternativly you can use String formatting to properly convert to a percentage.


  3. Ken   •  

    Im using RenderTransformOrigin=”0.5, 0.5″ to scale from the center of the image. This works except the image grows in size and covers all my other controls. Do I need to clip the image or is there an easier way?

  4. Ken   •  

    Fixed my issue by adding a border with ClipToBounds=”Yes” around the image.

  5. kapil   •  

    Awesome thank u

  6. Carlos   •  

    Great. thanks

Leave a Reply

Your email address will not be published.