WPF - 滚动 ScrollViewer 时设置图像可见性 [英] WPF - Set image visibility when ScrollViewer is scrolled

问题描述

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

I have a ScrollViewer on a WPF user control and what I'd like to achieve is to show a shadow image at the top and bottom of the ScrollViewer, but hide the top shadow when the scrollbar is at the top, and hide the bottom shadow when the scrollbar is at the bottom.

换句话说，我需要以某种方式将图像的 Visibility 属性绑定到 ScrollViewer 的偏移量.以下代码显然不正确，但应该说明我正在尝试做什么.

In other words, I need to bind the Visibility property of the image to the offset of the ScrollViewer somehow. The following code is clearly not right but should illustrate what I'm trying to do.

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

推荐答案

我会这样做:

首先，您需要一个 IMultiValueConverter:

First, you'll need an 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();
    }
}

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

Then, you can use this converter to apply a Setter for the Visibility property of your image.

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

如果滚动条位于顶部或底部，只需传入顶部"或底部"(或更准确地说，不是顶部")让 ConverterParameter 返回可见".

Just pass in "top" or "bottom" (or more accurately, not "top") for the ConverterParameter to return "Visible" if the scroll bar is at the top or bottom.

这篇关于WPF - 滚动 ScrollViewer 时设置图像可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！