WPF- Translate Transform changing the Y axis with - wpf

Question

Im doing a image binding with a slider and the only thing that i want to do its move the Y axis down to up, but at this moment im moving the axis up to down. What can i do to invert the moving of the angle y?
This is the code:
<Image Margin="400,0,200,37" Source="/img/santa_claus.png" Stretch="Uniform" VerticalAlignment="Bottom" Width="200" Height="195">
<Image.RenderTransform>
<TranslateTransform Y="{Binding Value, ElementName=slider}" x:Name="transform"/>
</Image.RenderTransform>
</Image>
<Slider Minimum="1" Maximum="100" x:Name="slider" Height="40" RenderTransformOrigin="0.5,0.5" Margin="226,392,200,12" >
<Slider.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleY="-0.584"/>
<RotateTransform/>
<TranslateTransform Y="-1.482"/>
</TransformGroup>
</Slider.RenderTransform>
</Slider>
I tryied diferent properties and changing the slider minimum to 100 and maximum to 1 but this nullifies the effect of the slider

Answer 1

You may invert the direction of the translation by two "mirroring" ScaleTransforms with ScaleY="-1".
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<TranslateTransform Y="{Binding Value, ElementName=slider}"/>
<ScaleTransform ScaleY="-1"/>
</TransformGroup>
</Image.RenderTransform>
As a general note, do not use Margins for layout. Put the two elements in two rows of a Grid:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="/img/santa_claus.png"
VerticalAlignment="Bottom" Stretch="Uniform" Width="200" Height="195">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<TranslateTransform Y="{Binding Value, ElementName=slider}"/>
<ScaleTransform ScaleY="-1"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<Slider Grid.Row="1" x:Name="slider"
Minimum="0" Maximum="100" Width="200" Margin="10"/>
</Grid>