How to serialize ViewPort after Save/Load operation
The following article will demonstrate how you can save the RadDiagram current ViewPort position in the file system and load it again.
Let's first configure our XAML. We'll keep it simple - two buttons for save and Load and a Diagram with one shape.
Example 1: RadDiagram with a single shape and two buttons for save and load
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel HorizontalAlignment="Right">
<Button Content="Save" Command="telerik:DiagramCommands.Save" />
<Button Content="Load" Command="telerik:DiagramCommands.Open" />
</StackPanel>
<Grid Grid.Row="1">
<telerik:RadDiagram x:Name="radDiagram" >
<telerik:RadDiagramShape x:Name="ConditionShape" Width="80" Height="80"
Content="condition" FontWeight="Bold"
Geometry="{telerik:FlowChartShape ShapeType=DecisionShape}"
Position="160,80" />
</telerik:RadDiagram>
</Grid>
</Grid>
The next step is to subscribe to the MetadataSerialized and MetadataDeserialized events of the diagram control. In the MetadataSerialized event handler you can add a Key to the SerializationInfo object which will hold the ViewPort.TopLeft property before the control is saved. Then in the MetadataDeserialized event handler you can get the value of this property and call the BringIntoView() method of the RadDiagram when the DiagramCommands.Open command execute. Example 2 shows the whole logic for performing this approach.
Example 2: Code-Behind logic
public partial class MainWindow : Window
{
private FileManager fileManager;
private static double savedZoomFactor;
private static Point savedDiagramPosition;
static MainWindow()
{
var saveBinding = new CommandBinding(DiagramCommands.Save, ExecuteSave, CanExecutedSave);
var openBinding = new CommandBinding(DiagramCommands.Open, ExecuteOpen);
CommandManager.RegisterClassCommandBinding(typeof(MainWindow), saveBinding);
CommandManager.RegisterClassCommandBinding(typeof(MainWindow), openBinding);
}
public MainWindow()
{
InitializeComponent();
this.fileManager = new FileManager(this.radDiagram);
this.radDiagram.MetadataSerialized += Diagram_MetadataSerialized;
this.radDiagram.MetadataDeserialized += Diagram_MetadataDeserialized;
}
private void Diagram_MetadataDeserialized(object sender, DiagramSerializationRoutedEventArgs e)
{
var topLeft = e.SerializationInfo["viewPortTopLeft"];
if (topLeft != null)
{
savedDiagramPosition = Utils.ToPoint((string)topLeft).Value;
savedZoomFactor = double.Parse((string)e.SerializationInfo["Zoom"]);
}
}
private void Diagram_MetadataSerialized(object sender, DiagramSerializationRoutedEventArgs e)
{
e.SerializationInfo["viewPortTopLeft"] = this.radDiagram.Viewport.TopLeft.ToInvariant();
}
private static void ExecuteOpen(object sender, ExecutedRoutedEventArgs e)
{
var owner = sender as MainWindow;
if (owner != null)
{
owner.radDiagram.Clear();
owner.fileManager.LoadFromFile();
owner.radDiagram.BringIntoView(savedDiagramPosition, savedZoomFactor);
}
}
private static void CanExecutedSave(object sender, CanExecuteRoutedEventArgs e)
{
var owner = sender as MainWindow;
e.CanExecute = owner != null && owner.radDiagram != null && owner.radDiagram.Items.Count > 0;
}
private static void ExecuteSave(object sender, ExecutedRoutedEventArgs e)
{
var owner = sender as MainWindow;
if (owner != null)
owner.fileManager.SaveToFile();
}
}