How to scroll ScrollViewer during development in Blend

Question

I have not yet found information for this problem for Blend / WPF. Only for Eclipse and it will not help.

I am currently developing a WPF 4 Application Dialog. It should be a ScrollViewer with various Elements within the StackPanel :

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

So far, everything is working as expected. Visible scroll bar. My problem is that I cannot scroll down during development in Blend or Visual Studio 2012. Starting a project works fine and the user can scroll down to other objects.

But during development it seems that there is no way to scroll down to the correct positioning of the (now hidden) controls.

One solution to this is to expand the control to display full content. But this may not be the best solution. Does anyone have a hint for scrolling correctly during development?

Many thanks.

Answer 1

Do not think that a ready-made attribute of development time exists for this. However, you can create it 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 a custom attached property in your xaml, for example:

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

During development you should be able to view your design with scroll scroll, for example

while at the actual runtime, the control will not be affected. CustomDesignAttributes also has a similar local:CustomDesignAttributes.HorizontalScrollTo property local:CustomDesignAttributes.HorizontalScrollTo for horizontal offset at design time.

Answer 2

There is another approach to solving the ScrollViewer scroll problem. Basically do the contents of your ScrollViewer in a UserControl. And then you will edit your actual content, since you will edit your UserControl (separate file and full width).

This is described in more detail in this blog post at http://electricbeach.org/?p=862