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

Whilst work­ing on an image view I need­ed the abil­i­ty to bind the val­ue of a Slid­er to a Scale­Trans­form as a per­cent­age val­ue and at the same time dis­play the val­ue of the slid­er in a label. So for a zoom range from 1% to 250% you would usu­al­ly set the Min­i­mum and Max­i­mum prop­er­ty of your Slid­er to 0.01 and 2.5 respec­tive­ly, by then you wouldn’t be able to dis­play the zoom val­ue as a per­cent­age, e.g. Zoom 148%.

So to get around this lim­i­ta­tion, in the end I used the range 1 to 250 for the Slid­er and added anoth­er Scale­Trans­form with ScaleX and Sca­leY 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"/>

Liked this post? Why not support me on Patreon and help me get rid of the ads!