Vista - Panning & Zooming with VisualBrush/Viewbox

Hi, we're a couple of students on our internship, and we're kinda stuck in
the project we're doing. I'll first try to explain what it is we are expected
to make.

You have to imagine a white empty 2D paper which is virtually unlimited in
size. An admin can place a question on this paper, users can then reply on
the active question. The admin can also zoom in and zoom out and drag the
paper around and post new questions. So we have to work with an environment
that contains a fair amount of questions linked to answers. Every question
can be differently scaled, so this means that you have to zoom in more on
some questions than others.

Basic functionality would have to be panning the paper, by that I mean hold
mouse down and dragging it to another position, thus moving all objects on
the paper in that direction.

We've tried this with the following code, however the performance was really
bad.

void Window_MouseUp(object sender, System.Windows.Input.MouseButtonEventArgs
e)
{
if (mbMouseDown)
{
Point bNew = e.GetPosition(Window);
foreach (UIElement oObject in LayoutRoot.Children)
{
Canvas.SetTop(oObject, bNew.X - mpBegin.X);
Canvas.SetLeft(oObject, bNew.Y - mpBegin.Y);
}
}
mbMouseDown = false;
}

void LayoutRoot_MouseMove(object sender, System.Windows.Input.MouseEventArgs
e)
{
if (mbMouseDown)
{
Point bNew = e.GetPosition(Window);
foreach (UIElement oObject in LayoutRoot.Children)
{
Canvas.SetTop(oObject, bNew.X - mpBegin.X);
Canvas.SetLeft(oObject, bNew.Y - mpBegin.Y);
}
}
}

void LayoutRoot_MouseDown(object sender,
System.Windows.Input.MouseButtonEventArgs e)
{
mbMouseDown = true;
mpBegin = e.GetPosition(Window);
}

With the zooming we tried the scaling functionality of wpf.
private void Window_MouseWheel(object sender, MouseWheelEventArgs e)

{

if (e.Delta > 0)

{

mpScaleSize = new Point((mpScaleSize.X - 0.05), (mpScaleSize.Y - 0.05));

grdCanvas.LayoutTransform = new ScaleTransform(mpScaleSize.X, mpScaleSize.Y);

zoomX.Content = mpScaleSize.X.ToString();

zoomY.Content = mpScaleSize.Y.ToString();

}

else

{

mpScaleSize = new Point((mpScaleSize.X + 0.05), (mpScaleSize.Y + 0.05));

grdCanvas.LayoutTransform = new ScaleTransform(mpScaleSize.X, mpScaleSize.Y);

zoomX.Content = mpScaleSize.X.ToString();

zoomY.Content = mpScaleSize.Y.ToString();

}

}

This again wasn't going smoothly.
(My laptop is a IBM Thinkpad r50p, 1,7Ghrz Centrino, 1gig RAM, maybe it's
just not fast enough?)

Anyway , I've posted this same question on the msdn forums. One person with
little experience with the subject suggested me that I should try to work
with visualBrushes and use it as some kind of view. I've been playing around
with the VisualBrushes for a while now.

I've managed to get controls from code onto the VisualBrush(which is on a
rectangle in the center of my app), however working with VisualBrush as some
kind of view isn't working for me.What I "discovered"is that working with the
viewbox property of the visualbrush might be the solution, but I can't seem
to get it to work.

To my understanding the viewbox is a rectangle with it's x & y as panning
values, and it's with & height as crop/stretch values (zoom).

Anyone with some experience in the area, I would really appreciate the help.


Thanks,
Tobias

On Apr 24, 12:02 pm, Tobias Vandenbempt
<TobiasVandenbe...@discussions.microsoft.com> wrote:
> Hi, we're a couple of students on our internship, and we're kinda stuck in
> the project we're doing. I'll first try to explain what it is we are expected
> to make.
>
> You have to imagine a white empty 2D paper which is virtually unlimited in
> size. An admin can place a question on this paper, users can then reply on
> the active question. The admin can also zoom in and zoom out and drag the
> paper around and post new questions. So we have to work with an environment
> that contains a fair amount of questions linked to answers. Every question
> can be differently scaled, so this means that you have to zoom in more on
> some questions than others.
>
> Basic functionality would have to be panning the paper, by that I mean hold
> mouse down and dragging it to another position, thus moving all objects on
> the paper in that direction.
>
> We've tried this with the following code, however the performance was really
> bad.
>
> void Window_MouseUp(object sender, System.Windows.Input.MouseButtonEventArgs
> e)
> {
> if (mbMouseDown)
> {
> Point bNew = e.GetPosition(Window);
> foreach (UIElement oObject in LayoutRoot.Children)
> {
> Canvas.SetTop(oObject, bNew.X - mpBegin.X);
> Canvas.SetLeft(oObject, bNew.Y - mpBegin.Y);}
> }
>
> mbMouseDown = false;
>
> }
>
> void LayoutRoot_MouseMove(object sender, System.Windows.Input.MouseEventArgs
> e)
> {
> if (mbMouseDown)
> {
> Point bNew = e.GetPosition(Window);
> foreach (UIElement oObject in LayoutRoot.Children)
> {
> Canvas.SetTop(oObject, bNew.X - mpBegin.X);
> Canvas.SetLeft(oObject, bNew.Y - mpBegin.Y);
>
> }
> }
> }
>
> void LayoutRoot_MouseDown(object sender,
> System.Windows.Input.MouseButtonEventArgs e)
> {
> mbMouseDown = true;
> mpBegin = e.GetPosition(Window);
>
> }
>
> With the zooming we tried the scaling functionality of wpf.
> private void Window_MouseWheel(object sender, MouseWheelEventArgs e)
>
> {
>
> if (e.Delta > 0)
>
> {
>
> mpScaleSize = new Point((mpScaleSize.X - 0.05), (mpScaleSize.Y - 0.05));
>
> grdCanvas.LayoutTransform = new ScaleTransform(mpScaleSize.X, mpScaleSize.Y);
>
> zoomX.Content = mpScaleSize.X.ToString();
>
> zoomY.Content = mpScaleSize.Y.ToString();
>
> }
>
> else
>
> {
>
> mpScaleSize = new Point((mpScaleSize.X + 0.05), (mpScaleSize.Y + 0.05));
>
> grdCanvas.LayoutTransform = new ScaleTransform(mpScaleSize.X, mpScaleSize.Y);
>
> zoomX.Content = mpScaleSize.X.ToString();
>
> zoomY.Content = mpScaleSize.Y.ToString();
>
> }
> }
>
> This again wasn't going smoothly.
> (My laptop is a IBM Thinkpad r50p, 1,7Ghrz Centrino, 1gig RAM, maybe it's
> just not fast enough?)
>
> Anyway , I've posted this same question on the msdn forums. One person with
> little experience with the subject suggested me that I should try to work
> with visualBrushes and use it as some kind of view. I've been playing around
> with the VisualBrushes for a while now.
>
> I've managed to get controls from code onto the VisualBrush(which is on a
> rectangle in the center of my app), however working with VisualBrush as some
> kind of view isn't working for me.What I "discovered"is that working with the
> viewbox property of the visualbrush might be the solution, but I can't seem
> to get it to work.
>
> To my understanding the viewbox is a rectangle with it's x & y as panning
> values, and it's with & height as crop/stretch values (zoom).
>
> Anyone with some experience in the area, I would really appreciate the help.
>
> Thanks,
> Tobias

Place the a Canvas or similar (your white paper) into a Viewbox and
place the Viewbox in inside a ScrollViewer. The Canvas will always be
automatically zoomed to the size of the viewbox. So if you enlarge the
viewbox the canvas gets zoomed too (but its internal width and height
stay the same) and all the questions get enlarged. If you make the
viewbox smaller seems to get smaller to (zoomed out): The dragging
would be done by the scrollviewer) if the viewbox is larger than the
scrollviewer you'll get scrollbars. If you do not like scrollbars, but
would like to drag instead you just hide them and subclass the
ScrollViewer an set the scrollposition of the scrollviewer manually
based on your mousemovement.

If you want to zoom on single questions individually you'll have to
either apply a transform on the question-visual or use viewboxes here
too.

To increase performance you should consider rendering the questions
with DrawingVisuals.