How do I scroll a ScrollViewer in Design Time in Blend

Question

I haven't found Information for this problem for Blend / WPF yet. Just for Eclipse and this won't help.

I am currently designing a WPF 4 Application Dialog. It should be a ScrollViewer with different Elements within a StackPanel:

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Height="470" VerticalAlignment="Top">
  <StackPanel Height="1893" Width="899">
    <!-- Elements here ... -->
  </StackPanel>
<ScrollViewer>

So far everything works as expected. The Scrollbar is visible. My Problem is that I am unable to scroll down in design time within Blend or Visual Studio 2012. Running the Project works fine and the user can scroll down to other objects.

But in Design Time there seems to be no chance to scroll down to positioning the (now hidden) Controls accuratly.

One Solution for this is to expand the Control to show the complete content. But that can't be the best Solution. Does anyone have a clue for proper scrolling in design time?

Thank you very much.

Answer 1

Don't think there exists an out-of-the-box design-time attribute for this. However you can create one yourself quite easily.

say something like:

using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;

public static class CustomDesignAttributes {
  private static bool? _isInDesignMode;

  public static DependencyProperty VerticalScrollToProperty = DependencyProperty.RegisterAttached(
    "VerticalScrollTo",
    typeof(double),
    typeof(CustomDesignAttributes),
    new PropertyMetadata(ScrollToChanged));

  public static DependencyProperty HorizontalScrollToProperty = DependencyProperty.RegisterAttached(
    "HorizontalScrollTo",
    typeof(double),
    typeof(CustomDesignAttributes),
    new PropertyMetadata(ScrollToChanged));

  private static bool IsInDesignMode {
    get {
      if (!_isInDesignMode.HasValue) {
        var prop = DesignerProperties.IsInDesignModeProperty;
        _isInDesignMode =
          (bool)DependencyPropertyDescriptor.FromProperty(prop, typeof(FrameworkElement)).Metadata.DefaultValue;
      }

      return _isInDesignMode.Value;
    }
  }

  public static void SetVerticalScrollTo(UIElement element, double value) {
    element.SetValue(VerticalScrollToProperty, value);
  }

  public static double GetVerticalScrollTo(UIElement element) {
    return (double)element.GetValue(VerticalScrollToProperty);
  }

  public static void SetHorizontalScrollTo(UIElement element, double value) {
    element.SetValue(HorizontalScrollToProperty, value);
  }

  public static double GetHorizontalTo(UIElement element) {
    return (double)element.GetValue(HorizontalScrollToProperty);
  }

  private static void ScrollToChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
    if (!IsInDesignMode)
      return;
    ScrollViewer viewer = d as ScrollViewer;
    if (viewer == null)
      return;
    if (e.Property == VerticalScrollToProperty) {
      viewer.ScrollToVerticalOffset((double)e.NewValue);
    } else if (e.Property == HorizontalScrollToProperty) {
      viewer.ScrollToHorizontalOffset((double)e.NewValue);
    }
  }
}

Now by setting the custom attached property in your xaml such as:

<ScrollViewer Height="200"
              local:CustomDesignAttributes.VerticalScrollTo="50">
...

In design time alone you should be able to view your design with a scroll offset like

while in actual run-time the control will be un-touched. The CustomDesignAttributes also has a similar property local:CustomDesignAttributes.HorizontalScrollTo for Horizontal offset at design-time.

Answer 2

There's another approach to solve problem of non-scrolling ScrollViewer. Basically make the contents of your ScrollViewer into a UserControl. And then you will be editing your actual contents as you would edit your UserControl (separate file and full width).

It is described in more details at this blog article http://electricbeach.org/?p=862