Zoom to and center a specific node

GoXam
21

That did not work either. I also tried adding a Diagram.LayoutCompleted event handler and set a variable in the OnNavigatedTo method to true so it only gets zoomed and centered after navigating but despite removing the LayoutId="None" from the node template, LayoutCompleted does not get fired when changing Visibility.

22

OK, I don’t really know what you’re doing, so I figured I should try doing what I think you are saying that you want to do.

Here’s the XAML of the test app:

<!-- Copyright © Northwoods Software Corporation, 2008-2016. All Rights Reserved. -->

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:go="http://schemas.nwoods.com/GoXam"
        xmlns:local="clr-namespace:WpfApplication1">

  <FrameworkElement.Resources>
    <DataTemplate x:Key="NodeTemplate">
      <Rectangle Fill="WhiteSmoke" Stroke="Black" StrokeThickness="2"
                 go:Node.Location="{Binding Path=Data.Location}"
                 Width="{Binding Path=Data.Width}" Height="{Binding Path=Data.Height}">
      </Rectangle>
    </DataTemplate>
  </FrameworkElement.Resources>

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Orientation="Horizontal">
      <Button Content="Toggle Viewport Focus" Click="Button_Click" />
      <Button Content="Stop Focus" Click="Button2_Click" />
    </StackPanel>
    <go:Diagram Grid.Row="1" x:Name="myDiagram" Padding="10"
                BorderBrush="Green" BorderThickness="1"
                HorizontalContentAlignment="Stretch"
                VerticalContentAlignment="Stretch"
                NodeTemplate="{StaticResource NodeTemplate}">
    </go:Diagram>
  </Grid>
</Window>

And here’s the C#:

/* Copyright © Northwoods Software Corporation, 2008-2016. All Rights Reserved. */

using System;
using System.Collections.ObjectModel;
using System.Linq;
using System.Windows;
using Northwoods.GoXam;
using Northwoods.GoXam.Model;

namespace WpfApplication1 {
  public partial class MainWindow : Window {
    public MainWindow() {
      InitializeComponent();

      var model = new GraphLinksModel<MyNodeData, String, String, MyLinkData>();

      model.NodesSource = new ObservableCollection<MyNodeData>() {
          new MyNodeData() { Key="Alpha", Width=1000, Height=1000, Location=new Point(0, 0) },
          new MyNodeData() { Key="Beta", Width=100, Height=100, Location=new Point(-50, -50) }
        };

      myDiagram.Model = model;
    }

    private void Button_Click(object sender, RoutedEventArgs e) {
      myDiagram.StartTransaction("Change Viewport");
      var first = myDiagram.Nodes.First();
      if (this.Focus == first) {
        this.Focus = myDiagram.Nodes.ElementAt(1);
      } else {
        this.Focus = first;
      }
      var b = this.Focus.Bounds;
      b.Inflate(10, 10);
      myDiagram.Panel.FixedBounds = b;
      var vw = myDiagram.Panel.ActualWidth;
      var vh = myDiagram.Panel.ActualHeight;
      var s = Math.Min(vw / b.Width, vh / b.Height);
      myDiagram.Panel.Scale = s;
      myDiagram.Panel.HorizontalContentAlignment = HorizontalAlignment.Center;
      myDiagram.Panel.VerticalContentAlignment = VerticalAlignment.Center;
      myDiagram.CommitTransaction("Change Viewport");
    }
    private Node Focus { get; set; }

    private void Button2_Click(object sender, RoutedEventArgs e) {
      myDiagram.StartTransaction("Stop Focusing");
      myDiagram.Panel.FixedBounds = new Rect(Double.NaN, Double.NaN, Double.NaN, Double.NaN);
      myDiagram.Panel.HorizontalContentAlignment = HorizontalAlignment.Stretch;
      myDiagram.Panel.VerticalContentAlignment = VerticalAlignment.Stretch;
      myDiagram.CommitTransaction("Stop Focusing");
    }
  }


  [Serializable]  // serializable in WPF to support the clipboard
  public class MyNodeData : GraphLinksModelNodeData<String> {
    public double Width { get; set; }
    public double Height { get; set; }
  }

  [Serializable]  // serializable in WPF to support the clipboard
  public class MyLinkData : GraphLinksModelLinkData<String, String> {
    // nothing to add
  }
}

I think clicking on the “Toggle…” button does what you are describing. The other button turns off that behavior, so that the user can scroll normally.

There’s no use of any event handlers and there’s no complicated computation.

23

My, my, look at that. Setting both Panel.HorizontalContentAlignment and Panel.VerticalContentAlignment to center finally did the trick! Thank you very much!