The sample has two custom classes – Ingredient and Recipe. Each Ingredient has quantity, name and an image, which illustrates it. The Recipe class holds a strongly typed list with Ingredient objects, the title for each recipe, an image for the recipe, an icon for the recipe and preparation instructions.<\/p>\n
The application consists of the dock control, which contains four DockItem-s : for the recipes, for their images, for their ingredients and with the preparation instructions. Any dock item can be dragged, dropped, aligned, minimized, hidden etc.<\/p>\n
![\"The](\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2015\/09\/cook_book_api.png\")
<\/a>The API of the cook book application<\/p><\/div>\n
II. The Dock Control.<\/strong><\/p>\n We create an empty WinForms project and add the Dock control from the toolbox. The dock control fills the entire client area:<\/p>\n These properties are set in the Property grid.<\/p>\n Each dock item is created with a title and id, which helps us identify it.<\/p>\n The DockStyle property is responsible for the initial layout of the dock item. You can choose among various dock styles – fill, bottom, top and more.<\/p>\n The GetContent method is very important. It prepares the controls that will be placed into each dock item and returns the appropriate one according to the parameter.<\/p>\n Once the dock item is created, let’s not forget to add it:<\/p>\n III. Creating the Content.<\/strong><\/p>\n Let’s see how the content for a dock item is created. Let’s take the grid with the ingredients. It is identified with the “Ingredients” id:<\/p>\n The idea is clear: you create the control, which will be rendered in the dock item and assign it to DockItem.Content. Here we make different customization for the grid – we change the color of table rows, adjust the height, turn off multiple row select and more.<\/p>\n IV. Changing the Content.<\/strong><\/p>\n We change the content by handling the SelectedIndexChanged event for the ListView, which lists our recipes. When the user selects a new list item, we extract its Recipe and change the content of the other DockItem-s:<\/p>\n Here is the final output of the sample application:<\/p>\n A Sample electronic cook book based on MindFusion WinForms Dock Control<\/p><\/div>\n You can download the sample directly from this link:<\/p>\n MindFusion WinForms Layout Control Sample: Electronic Cook Book in C#<\/a><\/p>\n MindFusion WinForms Layout Control Sample: Electronic Cook Book in VB.NET<\/a><\/p>\n Enjoy the fast, easy and straight-forwarded manner in which you can create a WinForms application with a flexible layout and multiple panels.<\/p>\n","protected":false},"excerpt":{"rendered":" In this post we will show you how to build a sample application with customizable layout based on the WinForms Dock control, which is part of MindFusion WinForms pack. You can find further details about the control at its web … Continue reading this.dockControl1.Dock = System.Windows.Forms.DockStyle.Fill; \nthis.dockControl1.Location = new System.Drawing.Point(0, 0); \nthis.dockControl1.Size = new System.Drawing.Size(784, 562);\n<\/pre>\n
titleItem = new DockItem() { Header = \"Recipe Name\", Id = \"Name\" };\ntitleItem.DockStyle = DockStyle.Left; \ntitleItem.Content = GetContent(\"Name\");\n<\/pre>\ndockControl1.Items.Add(titleItem);\n<\/pre>\n
private Control GetContent(string contentType)\n{\n Control control = null;\n ....\n else if (contentType == \"Ingredients\")\n { \n grid = new DataGridView();\n grid.DefaultCellStyle.BackColor = Color.FromArgb(247, 226, 189);\n grid.Dock = DockStyle.Fill;\n grid.MultiSelect = false;\n grid.DataSource = selectedRecipe.Ingredients;\n grid.RowTemplate.MinimumHeight = 35;\n \n grid.RowHeadersWidthSizeMode =\n DataGridViewRowHeadersWidthSizeMode.DisableResizing;\n grid.ColumnHeadersHeightSizeMode = DataGridViewColumnHeadersHeightSizeMode.DisableResizing;\n grid.AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill;\n grid.SelectionMode = DataGridViewSelectionMode.FullRowSelect;\n grid.BackgroundColor = Color.FromArgb(253, 244, 247);\n\n control = grid; \n }\n...\nreturn control;\n<\/pre>\nselectedRecipe = recipes[recipesListView.SelectedIndices[0]];\ntb.Text = selectedRecipe.Preparation;\ngrid.DataSource = selectedRecipe.Ingredients;\npictureBox.Image = Image.FromFile(selectedRecipe.ImageUrl);\n<\/pre>\n
<\/a>