Zoom into ListView contents without also scaling scroll bars

Question

I have a GridView in a ListView. I want to add a Ctrl+MWheelUp zoom to the contents.

I've achieved the zoom part using a ScaleTransform with the below code, however, as this is applied to the ListView as a whole, it also scales the scroll bars. Ideally, I'd like scrollbars to remain a fixed size (although obviously adjusting to the change in inner-content) - however, I'm not sure how I could achieve this. Would the only way to be to apply the ScaleTransform to every child of every GridViewColumn, or is there another method I could use to apply it to the ListView as a whole, without also scaling the scroll bars?

My (simplified) xaml:

<ListView ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollBarVisibility="Auto"
          x:Name="listView">

    <ListView.View>
        <GridView>
            <GridViewColumn>...</GridViewColumn>
            <GridViewColumn>...</GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>

xaml.cs:

public Control()
{
    InitializeComponent();
    var mouseWheelZoom = new MouseWheelZoom(listView);
    PreviewMouseWheel += mouseWheelZoom.Zoom;
}

MouseWheelZoom

public class MouseWheelZoom
{
    private readonly FrameworkElement _element;
    private double _currentZoomFactor;

    public MouseWheelZoom(FrameworkElement element)
    {
        _element = element;
        _currentZoomFactor = 1.0;
    }

    public void Zoom(object sender, MouseWheelEventArgs e)
    {
        var handle = (Keyboard.Modifiers & ModifierKeys.Control) > 0;
        if (!handle)
            return;

        ApplyZoom(e.Delta);
    }

    private void ApplyZoom(int delta)
    {
        var zoomScale = delta / 500.0;
        var newZoomFactor = _currentZoomFactor += zoomScale;
        _element.LayoutTransform = new ScaleTransform(newZoomFactor, newZoomFactor);
        _currentZoomFactor = newZoomFactor;
    }
}

Answer 1

I just created an attached property that seems to produce the effect you are looking for. Here is the code for the property.

internal static class ListViewBehaviors
{
    public static readonly DependencyProperty ContentTransformProperty = DependencyProperty.RegisterAttached("ContentTransform", typeof(Transform), typeof(ListViewBehaviors),
        new PropertyMetadata((Transform)null, OnContentTransformChanged));

    public static Transform GetContentTransform(ListView obj)
    {
        return (Transform)obj.GetValue(ContentTransformProperty);
    }

    public static void SetContentTransform(ListView obj, Transform value)
    {
        obj.SetValue(ContentTransformProperty, value);
    }

    private static void OnContentTransformChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
    {
        ListView view = obj as ListView;
        if (view != null)
        {
            if (view.ItemContainerGenerator.Status != GeneratorStatus.ContainersGenerated)
            {
                EventHandler handler = null;
                handler = (s, a) => ListView_ItemContainerGenerator_StatusChanged(view, handler);
                view.ItemContainerGenerator.StatusChanged += handler;
            }
            else
            {
                UpdateTransform(view);
            }
        }
    }

    private static void ListView_ItemContainerGenerator_StatusChanged(ListView view, EventHandler handler)
    {
        if (view.ItemContainerGenerator.Status == GeneratorStatus.ContainersGenerated)
        {
            view.ItemContainerGenerator.StatusChanged -= handler;
            UpdateTransform(view);
        }
    }

    private static void UpdateTransform(ListView view)
    {
        if (view.IsArrangeValid)
        {
            DoUpdateTransform(view);
        }
        else
        {
            EventHandler handler = null;
            handler = (s, e) => LayoutUpdated(view, handler);
            view.LayoutUpdated += handler;
        }
    }

    private static void LayoutUpdated(ListView view, EventHandler handler)
    {
        view.LayoutUpdated -= handler;
        DoUpdateTransform(view);
    }

    private static void DoUpdateTransform(ListView view)
    {
        ScrollViewer scroller = VisualTreeUtility.FindDescendant<ScrollViewer>(view);
        if (scroller != null)
        {
            Transform transform = GetContentTransform(view);

            FrameworkElement header = VisualTreeUtility.FindDescendant<ScrollViewer>(scroller);
            if (header != null)
            {
                header.LayoutTransform = transform;
            }

            FrameworkElement content = scroller.Template.FindName("PART_ScrollContentPresenter", scroller) as FrameworkElement;
            if (content != null)
            {
                content.LayoutTransform = transform;
            }
        }
    }
}

Also, here is the code for the VisualTreeUtility.FindDescendant method(s).

public static class VisualTreeUtility
{
    public static T FindDescendant<T>(DependencyObject ancestor) where T : DependencyObject
    {
        return FindDescendant<T>(ancestor, item => true);
    }

    public static T FindDescendant<T>(DependencyObject ancestor, Predicate<T> predicate) where T : DependencyObject
    {
        return FindDescendant(typeof(T), ancestor, item => predicate((T)item)) as T;
    }

    public static DependencyObject FindDescendant(Type itemType, DependencyObject ancestor, Predicate<DependencyObject> predicate)
    {
        if (itemType == null) throw new ArgumentNullException("itemType");
        if (ancestor == null) throw new ArgumentNullException("ancestor");
        if (predicate == null) throw new ArgumentNullException("predicate");
        if (!typeof(DependencyObject).IsAssignableFrom(itemType)) throw new ArgumentException("itemType", "The passed in type must be or extend DependencyObject");

        Queue<DependencyObject> queue = new Queue<DependencyObject>();
        queue.Enqueue(ancestor);

        while (queue.Count > 0)
        {
            DependencyObject currentChild = queue.Dequeue();
            if (currentChild != ancestor && itemType.IsAssignableFrom(currentChild.GetType()))
            {
                if(predicate.Invoke(currentChild))
                {
                    return currentChild;
                }
            }

            int count = VisualTreeHelper.GetChildrenCount(currentChild);
            for (int i = 0; i < count; ++i)
            {
                queue.Enqueue(VisualTreeHelper.GetChild(currentChild, i));
            }
        }

        return null;
    }
}

And here is how you can use the property:

<ListView
    ItemsSource="{Binding Items}">
    <local:ListViewBehaviors.ContentTransform>
        <ScaleTransform ScaleX="2" ScaleY="2" />
    </local:ListViewBehaviors.ContentTransform>
    <ListView.View>
        ...
    </ListView.View>
</ListView>

Let me know if anything is missing or confusing.

Answer 2

You could use the always handy FindChild<T> function to retrieve the ScrollContentPresenter inside the ListView, and use your zooming function with it.

public Control()
{
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(Control_Loaded);
}

private void Control_Loaded(object sender, RoutedEventArgs e)
{
    var presenter = FindChild<ScrollContentPresenter>(listView, null);
    var mouseWheelZoom = new MouseWheelZoom(presenter);
    PreviewMouseWheel += mouseWheelZoom.Zoom;
}

Note that I've put the code inside the Loaded event handler. That's because the ScrollContentPresenter is part of the ListView Template and not a direct part of your view, so it won't exist until the control is fully loaded with its Styles and Templates.

PD.: Also worth noting that some other parts of the ListView, like headers and such, won't be zoomed. Only the items will.

Answer 3

Haven't tried, but you can try to do something like

<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel /> <!-- scale this, it's inside ScrollViewer -->
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>