![\"Photo](\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/10\/wpf-photo-album.png\")
<\/a>Photo Album with the WPF Diagram Control<\/p><\/div>\n
The app is built with the diagramming for WPF component.<\/a><\/p>\n I. General Settings<\/strong><\/p>\n We create a new WPF application in Visual Studio. There, in the main window, the Window.Resources section we add a new item – a context menu:<\/p>\n The context menu shows up every time we right-click on a node.<\/p>\n We leave the default Grid layout panel and add there a ScrollViewer. The ScrollViewer would hold the diagram. Let’s add a XAML mapping to the Diagram class in the Window element:<\/p>\n We need a reference to the common namespace as well because the Diagram class uses it. Now, in the ScrollViewer we can add the markup for the Diagram:<\/p>\n The application needs reference to the following MindFusion.Diagramming libraries:<\/p>\n II. Styling<\/strong><\/p>\n In the code-behind file we create a Theme<\/a> and add two Style<\/a>-s to it: one for the links and one for the nodes.<\/p>\n The link style sets the brush and stroke for the links as well the stroke for the link’s head. The brush is used to fill the head shape of the link. Finally we register the style with the theme. Here is what the node style looks like:<\/p>\n We specify the stroke that would outline each node and the font that would be used when labels on nodes are painted. The final step is to assign the new Theme to the Theme<\/a> property of the diagram:<\/p>\n We also change the default head shape of the link and its size:<\/p>\n III. Create Diagram Items<\/strong><\/p>\n When you run the application it shows a diagram that is a tree with folders and images. We will create this diagram in code. First, we create a new array that would hold the names of the folders:<\/p>\n Then we must create a node for each label:<\/p>\n Each node is created by calling the CreateFolder method. This method creates and styles a DiagramNode. It sets a Folder image as background for the node and adjusts its text alignment. The node is drawn transparent:<\/p>\n Note that we use the Tag<\/a> property of a DiagramItem<\/a> to assign the text “Folder”. We will use this identification string later in the sample, to recognize that the user has clicked on a folder. Each major folder has subfolders and they contain images. The subfolders with images are located in the Images directory. We declare a global variable that points to the Images folder:<\/p>\n Then we need to cycle through all directories in “Images” and create subfolders for them.<\/p>\n Once we have the subfolders we must cycle through their subfolders as well because each one has several subfolders in it. Those second level subfolders actually contain the images:<\/p>\n Once we’ve created nodes for each folder it is time to create the nodes that represent the images:<\/p>\n We go through all folders that actually contain images and use a new method LoadImages to create DiagramNode<\/a>-s for each image file. The LoadImages method needs the names of the files that would be places in the children nodes and the parent node:<\/p>\n The method creates an Image node and adds it to the collection of diagram nodes accessible through the diagram.Nodes<\/a> property. hen it creates a link from the parent to the new node. Note that when we create diagram items through the diagram.Factory helper object they are added automatically to the respective nodes or links collections. Now let’s look at the CreateImage method:<\/p>\n The method creates a node and applies some styling to it. It gets the relative Uri to the image and assigns it to the node.Image property.<\/p>\n The last thing to do is to create links between the three major subfolders and the root folder:<\/p>\n Then we have to create links between those subfolders and their subfolders in similar way:<\/p>\n IV. Arrange the Diagram<\/strong><\/p>\n We use the TreeLayout<\/a> algorithm to arrange our nodes in the right order. This layout is the perfect match for what we want – a hierarchy of nodes that is exactly a tree.<\/p>\n The TreeLayout<\/a> like all other automatic layouts available in MindFusion diagramming controls is pretty easy to use. It requires the call of a single Arrange<\/a> method that takes as a parameter the instance of the diagram being arranged. The constructor lets you customize the layout, in our case we use this TreeLayout constructor.<\/a> The constructor requires the root node, the TreeLayoutType, the next argument specifies if links are reversed, then comes the TreeLayoutLinkType, the TreeLayoutDirections and several numbers that indicate level distance, node distance and whether root position is kept. The last argument is the margins between the tree and the diagram’s bounding rectangle.<\/p>\n We call the Rearrange method every time we modify the diagram – when nodes are added\/deleted or modified.<\/p>\n V. Events<\/strong><\/p>\n We handle the NodeClicked<\/a> event, which we use to show the context menu:<\/p>\n The important part in this code is to get the selected node. We will need it to specify the parent node for any new folders or image nodes that we create. Then, based on the menu selected by the user we either create a new folder node or a new image node calling the CreateFolder or CreateImage method that we listed above.<\/p>\n What happens when the user modifies a node? That happens when the user drags a node from one folder into another folder. In this case the diagram link between the former parent and the node is deleted and a new one is created – between the new parent and the node:<\/p>\n Remember that we have assigned “Folder” to the Tag property of all nodes that are folders. We use this to identify them and to move the node from one folder to the other.<\/p>\n And with this our tutorial is over, here is a screenshot from the final application:<\/p>\n Photo Album App with the WPF Diagram: User Interaction<\/p><\/div>\n The link to download the sample is below:<\/p>\n Download Wpf Diagramming Sample: Photoalbum<\/a><\/p>\n About Diagramming for WPF: This is the right tool to create flowcharts in WPF that always meet your requirements. The library offers more than 100 predefined node shapes, extensive event set and more than 15 exporters and importers. Each diagram that you build has a completely customizable look through styles, themes and appearance properties for each part of the flowchart. The numerous samples and detailed documentation help you learn quickly how to integrate the component into your own application. You can download the trial version, which has no feature restrictions and does not expire from the WPF Diagram Page on MindFusion website.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" In this blog post we will build a photo album application. The application shows pictures organized in folders and allows the user to add new pictures, new folders as well add\/delete\/rearrange the photos that are already added to the folders. … Continue reading <contextmenu<\/span> x:key<\/span>=\"ContextMenu<\/a>\">\n<\/span> <menuitem<\/span> x:name<\/span>=\"FolderMenuItem<\/a>\" header<\/span>=\"Add new folder<\/a>\" click<\/span>=\"AddFolderMenuItem_Click<\/a>\">\n<\/span> <menuitem<\/span> x:name<\/span>=\"ImageMenuItem<\/a>\" header<\/span>=\"Add new image<\/a>\" click<\/span>=\"AddImageMenuItem_Click<\/a>\">\n<\/span> <\/menuitem<\/span>><\/menuitem<\/span>><\/contextmenu<\/span>><\/pre>\nxmlns:diag=\"http:\/\/mindfusion.dev\/diagramming\/wpf\" xmlns:common=\"http:\/\/mindfusion.dev\/common\/wpf\" \n<\/pre>\n
<diag:diagram<\/span> x:name<\/span>=\"diagram<\/a>\" bounds<\/span>=\"0, 0, 1000, 1000<\/a>\" DefaultShape<\/span>=\"Ellipse<\/a>\" aligntogrid<\/span>=\"False<\/a>\" behavior<\/span>=\"Modify<\/a>\" NodeModified<\/span>=\"diagram_NodeModified<\/a>\" NodeClicked<\/span>=\"diagram_NodeClicked<\/a>\">\n<\/diag:diagram<\/span>><\/pre>\n\n
\/\/create a new theme\n Theme theme = new Theme();\n\n \/\/create a style for the links\n Style linkStyle = new Style();\n linkStyle.Setters.Add(new Setter(DiagramLink.BrushProperty, new SolidColorBrush(Color.FromRgb(245, 245, 240))));\n linkStyle.Setters.Add(new Setter(DiagramLink.StrokeProperty, new SolidColorBrush(Color.FromRgb(191, 191, 191))));\n linkStyle.Setters.Add(new Setter(DiagramLink.HeadStrokeProperty, new SolidColorBrush(Color.FromRgb(191, 191, 191))));\n \/\/register the style with the theme\n theme.RegisterStyle(typeof(DiagramLink), linkStyle);\n<\/pre>\n
\/\/create a style for the nodes\nStyle nodeStyle = new Style();\nnodeStyle.Setters.Add(new Setter(ShapeNode.StrokeProperty, new SolidColorBrush(Color.FromRgb(191, 191, 191))));\nnodeStyle.Setters.Add(new Setter(ShapeNode.FontFamilyProperty, new FontFamily(\"Lato\")));\n\/\/register the style with the theme\ntheme.RegisterStyle(typeof(ShapeNode), nodeStyle);\n<\/pre>\n
\/\/assign the theme\n diagram.Theme = theme;\n<\/pre>\n
\/\/set link styling\n diagram.LinkHeadShapeSize = 12;\n diagram.LinkHeadShape = ArrowHeads.Triangle;\n<\/pre>\n
string[] labels = new string[] {\"Images\", \"Events\", \"Family\", \"Tourism\",\n \"Autoexibition 2014 Detroit\", \"Depeche Mode Concert 2016\", \"Third March\",\n \"Lia`s birthday\", \"New year 2017\", \"Sam`s graduation\",\n \"Brazil and Argentina\", \"Italy 2013\", \"Summer 2017\"};\n \n<\/pre>\n \/\/create the initial nodes for the album\n for(int i = 0; i < labels.Length; i++)\n {\n var node = CreateFolder(labels[i]);\n diagram.Nodes.Add(node);\n }\n<\/pre>\n \/\/creates a new folder with the specified text.\n private ShapeNode CreateFolder(string text)\n {\n var node = new ShapeNode();\n node.Text = text;\n node.Tag = \"Folder\";\n node.Transparent = true;\n node.TextAlignment = TextAlignment.Center;\n node.TextVerticalAlignment = AlignmentY.Center;\n node.Expandable = true;\n BitmapImage image = this.FindResource(\"Folder\") as BitmapImage;\n node.Image = image;\n node.ResizeToFitImage();\n return node;\n }\n<\/pre>\n
\nThe image is declared as a resource in XAML, in the Window.Resources section:<\/p>\n<bitmapimage<\/span> x:key<\/span>=\"Folder<\/a>\" urisource<\/span>=\"Folder.png<\/a>\">\n<\/span><\/bitmapimage<\/span>><\/pre>\n private const string path = @\".\\Images\";\n<\/pre>\n
int length = 0;\n \/\/ reads the initial subfolders for the album \n string[] subfolders = System.IO.Directory.GetDirectories(path);\n string[] folders = new string[9];\n<\/pre>\n
\/\/goes one level deeper into the hierarchy\n for (int i = 0; i < subfolders.Length; i++)\n {\n string[] subsubfolders = System.IO.Directory.GetDirectories(subfolders[i]);\n for(int j = 0; j < subsubfolders.Length; j++)\n {\n folders[length] = subsubfolders[j];\n length++;\n }\n }\n<\/pre>\n \/\/loads the images for each folder\n for(int i = 0; i < folders.Length; i++)\n {\n string[] filenames = System.IO.Directory.GetFiles(folders[i]);\n LoadImages(filenames, diagram.Nodes.GetAt(i + 4) as ShapeNode);\n }\n<\/pre>\nprivate void LoadImages(string[] filenames, DiagramNode parent)\n {\n for (int i = 0; i < filenames.Length; i++)\n {\n var node = CreateImage(filenames[i]);\n diagram.Nodes.Add(node);\n diagram.Factory.CreateDiagramLink(parent, node);\n }\n }\n<\/pre>\nprivate ShapeNode CreateImage(string path)\n {\n var node = new ShapeNode();\n \/\/customize the node appearance\n node.Shape = Shapes.RoundRect;\n node.Brush = new SolidColorBrush(Color.FromRgb(245, 245, 240));\n node.Tag = \"\";\n \/\/assign the image\n Uri imageUri = new Uri(path, UriKind.Relative);\n BitmapImage image = new BitmapImage(imageUri);\n node.Image = image;\n return node;\n }\n<\/pre>\n\/\/create links between the root and all subfolders\ndiagram.Factory.CreateDiagramLink(diagram.Nodes.GetAt(0) as ShapeNode, diagram.Nodes.GetAt(1) as ShapeNode);\ndiagram.Factory.CreateDiagramLink(diagram.Nodes.GetAt(0) as ShapeNode, diagram.Nodes.GetAt(2) as ShapeNode);\ndiagram.Factory.CreateDiagramLink(diagram.Nodes.GetAt(0) as ShapeNode, diagram.Nodes.GetAt(3) as ShapeNode);\n<\/pre>\n
diagram.Factory.CreateDiagramLink(diagram.Nodes.GetAt(1) as ShapeNode, diagram.Nodes.GetAt(4) as ShapeNode);\ndiagram.Factory.CreateDiagramLink(diagram.Nodes.GetAt(1) as ShapeNode, diagram.Nodes.GetAt(5) as ShapeNode);\n..........\n<\/pre>\n
private void Rearrange()\n {\n if (layout == null)\n {\n layout = new TreeLayout(diagram.Nodes.GetAt(0),\n TreeLayoutType.Centered,\n false,\n TreeLayoutLinkType.Cascading3, TreeLayoutDirections.TopToBottom,\n 40, 20, true, new Size(15, 15));\n }\n layout.Arrange(diagram);\n }\n<\/pre>\nprivate void diagram_NodeClicked(object sender, NodeEventArgs e)\n {\n \/\/gets the node that was clicked\n SelectedNode = e.Node as ShapeNode;\n if (e.MouseButton == MindFusion.Diagramming.Wpf.MouseButton.Right && SelectedNode.Tag.ToString().Length > 0)\n {\n \/\/renders the context menu\n ContextMenu cm = this.FindResource(\"ContextMenu\") as ContextMenu;\n cm.Placement = System.Windows.Controls.Primitives.PlacementMode.Mouse;\n cm.IsOpen = true;\n }\n }\n<\/pre>\nprivate void diagram_NodeModified(object sender, NodeEventArgs e)\n {\n \/\/gets the nodes at the specified mouse position\n if (diagram.GetNodesAt(e.MousePosition).Count != 1)\n {\n ShapeNode child = e.Node as ShapeNode;\n ShapeNode parent = null;\n bool parentIsFolder = false;\n \n foreach (ShapeNode node in diagram.GetNodesAt(e.MousePosition))\n {\n \/\/check if the node is a folder\n if (node.Tag.ToString().Length > 0 && node != child)\n {\n parent = node;\n parentIsFolder = true;\n }\n }\n \/\/removes the current link between the node and its parent\n if (parentIsFolder)\n {\n if (child.IncomingLinks.GetAt(0) as DiagramLink != null)\n diagram.Links.Remove(child.IncomingLinks.GetAt(0) as DiagramLink);\n }\n \/\/creates a new link\n diagram.Factory.CreateDiagramLink(parent, child);\n }\n Rearrange();\n }\n<\/pre>\n<\/a>