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>
  • Gali

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

  • Slate

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

    Zoom

  • 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?

  • Ken

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

  • kapil

    Awesome thank u

  • lethienhoang

    Here link. It will help you…

    [https://code.msdn.microsoft.com/Zoom-and-drag-a-Using-4860ac3c][1]

    [1]: https://code.msdn.microsoft.com/Zoom-and-drag-a-Using-4860ac3c

  • Carlos

    Great. thanks