theburningmonk.com

Whilst work­ing on an image view I needed the abil­ity to bind the value of a Slider to a Scale­Trans­form as a per­cent­age value and at the same time dis­play the value of the slider in a label. So for a zoom range from 1% to 250% you would usu­ally set the Min­i­mum and Max­i­mum prop­erty of your Slider to 0.01 and 2.5 respec­tively, by then you wouldn’t be able to dis­play the zoom value 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 Slider and added another 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>
    </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>