c# - 调整子项大小时保持滚动查看器的相对滚动条偏移量

Question

我有一个带有网格的滚动查看器作为 child 。我正在更改网格的宽度和高度属性以显示不同的“缩放”级别。网格包含 2 行和多列图像，所有图像的大小都相同。

但是，我希望滚动条的相对位置保持不变。更改网格大小后，屏幕中央的内容仍应位于屏幕中央。

默认“放大” View :

private void SizeGrid()
{
    grid1.Width = (scrollViewer1.ViewportWidth / 2) * grid1.ColumnDefinitions.Count;
    grid1.Height = (scrollViewer1.ViewportHeight / 2) * grid1.RowDefinitions.Count;        
}

“缩小” View :

private void scrollViewer1_KeyDown(object sender, KeyEventArgs e)
{
    if (e.KeyboardDevice.IsKeyDown(Key.Insert))
    {
        grid1.Width = (scrollViewer1.ViewportWidth / 2) * grid1.ColumnDefinitions.Count / 5;
        grid1.Height = (scrollViewer1.ViewportHeight / 2) * grid1.RowDefinitions.Count / 3;
    }
}

---

我尝试做的事情...

如果我知道关注的是哪个列(我不想知道这个):

double shiftAmount = (scrollViewer1.ScrollableWidth / (grid1.ColumnDefinitions.Count - columnsOnScreen));
scrollViewer1.ScrollToHorizontalOffset(column * shiftAmount);

如果我不知道他们在看什么列，但我只想保持相对位置......

double previousScrollRatio = scrollViewer1.HorizontalOffset / scrollViewer1.ScrollableWidth;
//resize grid...
scrollViewer1.ScrollToHorizontalOffset(previousScrollRatio * scrollViewer1.ScrollableWidth);

---

这两种方法都不起作用。如果我在滚动条居中的情况下缩小，那么滚动条将转到最右边。有什么想法吗？

可以找到一个最小的代码示例 here加上上面的 scroll_KeyDown 方法。

---

默认缩放的截图:

缩小后的屏幕截图，不正确(海军蓝色和粉色方 block 远离屏幕):

缩小后的屏幕截图，它应该的样子:

Answer 1

这是在放大或缩小时保持内容居中的解决方案

    //variables to store the offset values
    double relX;
    double relY;
    void scrollViewer1_ScrollChanged(object sender, ScrollChangedEventArgs e)
    {
        ScrollViewer scroll = sender as ScrollViewer;
        //see if the content size is changed
        if (e.ExtentWidthChange != 0 || e.ExtentHeightChange != 0)
        {
            //calculate and set accordingly
            scroll.ScrollToHorizontalOffset(CalculateOffset(e.ExtentWidth, e.ViewportWidth, scroll.ScrollableWidth, relX));
            scroll.ScrollToVerticalOffset(CalculateOffset(e.ExtentHeight, e.ViewportHeight, scroll.ScrollableHeight, relY));
        }
        else
        {
            //store the relative values if normal scroll
            relX = (e.HorizontalOffset + 0.5 * e.ViewportWidth) / e.ExtentWidth;
            relY = (e.VerticalOffset + 0.5 * e.ViewportHeight) / e.ExtentHeight;
        }
    }

    private static double CalculateOffset(double extent, double viewPort, double scrollWidth, double relBefore)
    {
        //calculate the new offset
        double offset = relBefore * extent - 0.5 * viewPort;
        //see if it is negative because of initial values
        if (offset < 0)
        {
            //center the content
            //this can be set to 0 if center by default is not needed
            offset = 0.5 * scrollWidth;
        }
        return offset;
    }

背后的想法是存储最后的滚动位置，并在内容大小发生变化时使用它来计算新的偏移量，这将导致范围发生变化。

只需将 ScrollViewer 的事件 ScrollChanged 附加到构造函数等中的此事件处理程序，其余的交给它。

例如

    scrollViewer1.ScrollChanged += scrollViewer1_ScrollChanged;

上述解决方案将确保网格保持在中心位置，即使是第一次加载也是如此

居中内容示例

放大

缩小

额外

我还尝试为它创建一个可附加的行为，这样您就不需要连接事件，只需设置属性即可启用或禁用该行为

namespace CSharpWPF
{
    public class AdvancedZooming : DependencyObject
    {
        public static bool GetKeepInCenter(DependencyObject obj)
        {
            return (bool)obj.GetValue(KeepInCenterProperty);
        }

        public static void SetKeepInCenter(DependencyObject obj, bool value)
        {
            obj.SetValue(KeepInCenterProperty, value);
        }

        // Using a DependencyProperty as the backing store for KeepInCenter.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty KeepInCenterProperty =
            DependencyProperty.RegisterAttached("KeepInCenter", typeof(bool), typeof(AdvancedZooming), new PropertyMetadata(false, OnKeepInCenterChanged));

        // Using a DependencyProperty as the backing store for Behavior.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty BehaviorProperty =
            DependencyProperty.RegisterAttached("Behavior", typeof(AdvancedZooming), typeof(AdvancedZooming), new PropertyMetadata(null));

        private static void OnKeepInCenterChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ScrollViewer scroll = d as ScrollViewer;

            if ((bool)e.NewValue)
            {
                //attach the behavior
                AdvancedZooming behavior = new AdvancedZooming();
                scroll.ScrollChanged += behavior.scroll_ScrollChanged;
                scroll.SetValue(BehaviorProperty, behavior);
            }
            else
            {
                //dettach the behavior
                AdvancedZooming behavior = scroll.GetValue(BehaviorProperty) as AdvancedZooming;
                if (behavior != null)
                    scroll.ScrollChanged -= behavior.scroll_ScrollChanged;
                scroll.SetValue(BehaviorProperty, null);
            }
        }

        //variables to store the offset values
        double relX;
        double relY;
        void scroll_ScrollChanged(object sender, ScrollChangedEventArgs e)
        {
            ScrollViewer scroll = sender as ScrollViewer;
            //see if the content size is changed
            if (e.ExtentWidthChange != 0 || e.ExtentHeightChange != 0)
            {
                //calculate and set accordingly
                scroll.ScrollToHorizontalOffset(CalculateOffset(e.ExtentWidth, e.ViewportWidth, scroll.ScrollableWidth, relX));
                scroll.ScrollToVerticalOffset(CalculateOffset(e.ExtentHeight, e.ViewportHeight, scroll.ScrollableHeight, relY));
            }
            else
            {
                //store the relative values if normal scroll
                relX = (e.HorizontalOffset + 0.5 * e.ViewportWidth) / e.ExtentWidth;
                relY = (e.VerticalOffset + 0.5 * e.ViewportHeight) / e.ExtentHeight;
            }
        }

        private static double CalculateOffset(double extent, double viewPort, double scrollWidth, double relBefore)
        {
            //calculate the new offset
            double offset = relBefore * extent - 0.5 * viewPort;
            //see if it is negative because of initial values
            if (offset < 0)
            {
                //center the content
                //this can be set to 0 if center by default is not needed
                offset = 0.5 * scrollWidth;
            }
            return offset;
        }
    }
}

启用行为

通过 xaml

<ScrollViewer l:AdvancedZooming.KeepInCenter="True">

或

<Style TargetType="ScrollViewer" x:Key="zoomCenter">
    <Setter Property="l:AdvancedZooming.KeepInCenter"
            Value="True" />
</Style>

或通过类似的代码

scrollViewer1.SetValue(AdvancedZooming.KeepInCenterProperty, true);

或

AdvancedZooming.SetKeepInCenter(scrollViewer1, true);

通过样式或以编程方式内联设置属性 l:AdvancedZooming.KeepInCenter="True" 以在任何滚动查看器上启用该行为

l:在这个例子中指的是 AdvancedZooming 类 xmlns:l="clr-namespace:CSharpWPF" 的命名空间