WPF中如何反转TranslateTransform的Y轴移动方向？

我正在将Slider与Image进行绑定，想要实现Image沿Y轴从下往上移动，但当前实际是从上往下移动。尝试将Slider的Minimum设为100、Maximum设为1后效果失效，请问该如何反转Y轴的移动方向？

相关代码 #

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

解决方法 #

1. 使用值转换器绑定相反数

WPF中TranslateTransform.Y为正值时元素向下移动，负值时向上移动。直接绑定Slider值的相反数即可实现方向反转，无需修改Slider的Min/Max。

步骤：

• 定义反转值的转换器：

public class NegativeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value is double val ? -val : value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value is double val ? -val : value;
    }
}

• 在XAML资源中注册转换器：

<Window.Resources>
    <local:NegativeConverter x:Key="NegativeConverter"/>
</Window.Resources>

• 修改TranslateTransform的绑定：

<TranslateTransform Y="{Binding Value, ElementName=slider, Converter={StaticResource NegativeConverter}}" x:Name="transform"/>

2. 通过Slider事件手动设置Y值

如果不想写转换器，可在Slider的ValueChanged事件中直接赋值：

• 给Slider添加事件绑定：

<Slider Minimum="1" Maximum="100" x:Name="slider" Height="40" RenderTransformOrigin="0.5,0.5" Margin="226,392,200,12" ValueChanged="Slider_ValueChanged" >

• 后台代码实现事件逻辑：

private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    transform.Y = -e.NewValue;
}

3. 为什么反转Slider的Min/Max无效？

WPF的Slider不允许Minimum大于Maximum，设置后系统会自动交换两者的值，所以你的尝试不会产生预期效果。

内容的提问来源于stack exchange，提问作者IgnaciPsan