WPF - 当 ScrollViewer 滚动时设置图像可见性

Question

我在 WPF 用户控件上有一个 ScrollViewer，我想要实现的是在 ScrollViewer 的顶部和底部显示阴影图像，但是当滚动条位于顶部时隐藏顶部阴影，当滚动条位于底部时隐藏底部阴影。

换句话说，我需要以某种方式将图像的 Visibility 属性绑定(bind)到 ScrollViewer 的偏移量。下面的代码显然是不正确的，但应该说明我想要做什么。

<Grid>
    <Image Source="Shadow.png" VerticalAlignment="Top">
        <Image.Resources>
            <Style TargetType="Image">
                <Style.Triggers>
                    <Trigger SourceName="Scroller" Property="VerticalOffset" Value="GREATER THAN ZERO OR LESS THAN MAX">
                        <Setter Property="Visibility" Value="Collapsed" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Image.Resources>
    </Image>
    <ScrollViewer Height="200" x:Name="Scroller">
        <ContentControl />
    </ScrollViewer>
</Grid>

Answer 1

这是我要做的:

首先，您需要一个 IMultiValueConverter:

public class ScrollOffsetToVisibilityConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values == null)
            throw new ArgumentException("Values cannot be null.");
        if (values.Count() != 2)
            throw new ArgumentException("Incorrect number of bindings (" + values.Count() + ")");
        if (parameter == null)
            throw new ArgumentException("Parameter cannot be null.");

        var top = parameter.ToString().ToUpper() == "TOP";

        var offset = Double.Parse(values[0].ToString());
        var maxHeight = Double.Parse(values[1].ToString());

        return (top && offset == 0) || (!top && offset == maxHeight) ? Visibility.Visible : Visibility.Collapsed;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

然后，您可以使用此转换器为图像的 Visibility 属性应用 Setter。

<Image.Style Source="Shadow.png" VerticalAlignment="Top">
    <Style>
        <Setter Property="Image.Visibility">
            <Setter.Value>
                <MultiBinding Converter="{StaticResource ScrollOffsetToVisibilityConverter}" ConverterParameter="Top">
                    <Binding ElementName="Scroller" Path="VerticalOffset"/>
                    <Binding ElementName="Scroller" Path="ScrollableHeight"/>
                </MultiBinding>
            </Setter.Value>
        </Setter>
    </Style>
</Image.Style>

如果滚动条位于顶部或底部，只需传入“top”或“bottom”(或更准确地说，不是“top”)，ConverterParameter 就会返回“Visible”。