Layout Management with the WinForms Dock Control

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 page.

For the purpose of the demonstration we’ve chosen an entertaining topic – a cooking recipes electronic book. Our book so far has only three recipes, all for sweets. Lets start by looking at the

I. Architecture of the sample.

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.

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.

The API of the cook book application

The API of the cook book application

II. The Dock Control.

We create an empty WinForms project and add the Dock control from the toolbox. The dock control fills the entire client area:

this.dockControl1.Dock = System.Windows.Forms.DockStyle.Fill;         
this.dockControl1.Location = new System.Drawing.Point(0, 0);           
this.dockControl1.Size = new System.Drawing.Size(784, 562);

These properties are set in the Property grid.

Each dock item is created with a title and id, which helps us identify it.

titleItem = new DockItem() { Header = "Recipe Name", Id = "Name" };
titleItem.DockStyle = DockStyle.Left;      
titleItem.Content = GetContent("Name");

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.

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.

Once the dock item is created, let’s not forget to add it:

dockControl1.Items.Add(titleItem);

III. Creating the Content.

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:

private Control GetContent(string contentType)
{
  Control control = null;
  ....
  else if (contentType == "Ingredients")
         {                
             grid = new DataGridView();
             grid.DefaultCellStyle.BackColor = Color.FromArgb(247, 226, 189);
             grid.Dock = DockStyle.Fill;
             grid.MultiSelect = false;
             grid.DataSource = selectedRecipe.Ingredients;
             grid.RowTemplate.MinimumHeight = 35;
            
             grid.RowHeadersWidthSizeMode =
            DataGridViewRowHeadersWidthSizeMode.DisableResizing;
             grid.ColumnHeadersHeightSizeMode = DataGridViewColumnHeadersHeightSizeMode.DisableResizing;
             grid.AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill;
             grid.SelectionMode = DataGridViewSelectionMode.FullRowSelect;
             grid.BackgroundColor = Color.FromArgb(253, 244, 247);

             control = grid; 
         }
...
return control;

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.

IV. Changing the Content.

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:

selectedRecipe = recipes[recipesListView.SelectedIndices[0]];
tb.Text = selectedRecipe.Preparation;
grid.DataSource = selectedRecipe.Ingredients;
pictureBox.Image = Image.FromFile(selectedRecipe.ImageUrl);

Here is the final output of the sample application:

MindFusion WinForms Dock COntrol

A Sample electronic cook book based on MindFusion WinForms Dock Control

You can download the sample directly from this link:

MindFusion WinForms Layout Control Sample: Electronic Cook Book in C#

MindFusion WinForms Layout Control Sample: Electronic Cook Book in VB.NET

Enjoy the fast, easy and straight-forwarded manner in which you can create a WinForms application with a flexible layout and multiple panels.

Combination Chart in Android

This post is a step-by-step tutorial in how to create a combination chart in android with the Charting for Android library.

I. Project configuration

Let’s create a new project. In Eclipse, we choose File -> New -> Android Application Project. We write “CombinationChart” as an application name. The package is called com.mindfusion.combinationchart. The other settings remain unchanged.

II. Adding the jar file.

With project created, it’s time to add the libraries. Copy the droidchart.jar from the libs directory of the sample project (download file here) to the libs directory of your project. Then right-click on your project and choose Properties -> Java Build Path -> Libraries -> Add JARs. Navigate to the libs folder and add the droidchart.jar.

Adding a JAR library to an Android application project

Adding a JAR library to an Android application project

III. Declaring the chart

Time to declare the chart in the layout of the application. We build a simple application, where the chart will be the only thing that shows. So, we edit the activity_main.xml file, which is found in res -> layout folder in the project tree for the CombinationChart application.

We change the layout to Linear and we introduce a new xml node – chart. The chart node refers to a class found in the com.mindfusion.charting namespace.


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:chart="http://schemas.android.com/apk/lib/com.mindfusion.charting"
...

Then we declare the chart:


We name it combi_chart. This is important because we’ll use the name to retrieve the chart object in the next step.

IV. General chart settings.

In this step we’ll set the general chart settings. First, we get the chart object, which is declared in the layour (see previous step).


private AxesChart chart;
....
chart = (AxesChart)findViewById(R.id.combi_chart);

Then we set the title and the offset of the title e.g. the space between the title and the plot are for the chart. We also set the height of the font for the title labels and the other labels at the chart.


chart.setTitle("Visitors in Paradise Hotels");
chart.setTitleOffset(50f);
chart.setTitleHeight(30f);
chart.setLabelHeight(20f);

V. The grid.

Our chart has a crossed grid with light gray grid stripes. This is set with the following code:


ArrayList gridStrokes = new ArrayList();
gridStrokes.add(Color.rgb(207, 207, 207));
chart.setGridStrokeColors(gridStrokes);

chart.setGridType(GridType.Crossed);

VI. The axes.

The X-axis has 10 intervals. Each division has its own label. We set the label type to custom text, specify the labels and customize the min and max numbers to be shown:


chart.xAxisSettings.setMin(0f);
chart.xAxisSettings.setMax(10f);
chart.xAxisSettings.setInterval(1f);
chart.xAxisSettings.setLabelType(AxisLabelType.Custom);

ArrayList xLabels = new ArrayList();
Collections.addAll(xLabels, "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014");
chart.xAxisSettings.setLabels(xLabels);

The Y-axis has no custom labels, it just shows the value intervals. But it has a title. Here is how we set it:


chart.yAxisSettings.setMin(0f);
chart.yAxisSettings.setMax(30f);
chart.yAxisSettings.setInterval(10f);
chart.yAxisSettings.setLabelType(AxisLabelType.Scale);
chart.yAxisSettings.setTitle("in thousands");

VII. The bar series.

The first series is a bar series. We create a new instance of the BarSeries class and add 10 x and y float numbers, which will be used to calculate the size and location of the bars:


BarSeries series1 = new BarSeries();

ArrayList xData = new ArrayList();
for(int i = 0; i < 10; i++)
xData.add((float)i);
series1.setXData(xData);

ArrayList yData1 = new ArrayList();
Collections.addAll(yData1, 15f, 17f, 18f, 19f, 18.4f, 16.4f, 12f, 17f, 18.7f, 19.1f );
series1.setYData(yData1);

The next thing to do is to specify the colors for the bars and their outlining. The library has the FillColors and StrokeColors property, which we use:


ArrayList fillColors1 = new ArrayList();
fillColors1.add(Color.rgb(174, 200, 68));
series1.setFillColors(fillColors1);

ArrayList strokeColors1 = new ArrayList();
strokeColors1.add(Color.rgb(115, 133, 45));
series1.setStrokeColors(strokeColors1);

Let’s not forget to add the ready series to the collection of series.


chart.addSeries(series1);

VIII. The line series with scatters.

The line series is an instance of the LineSeries class, where we set the ScatterType and LineType properties:


LineSeries series2 = new LineSeries();
series2.setScatterType(ScatterType.Circle);
series2.setLineType(LineType.Line);
series2.setScatterSize(20f);
...
chart.addSeries(series2);

The ScatterFillColors and ScatterStrokeColors are used for setting the colors of the scatters. The properties for the line are the same as with the bar series: StrokeColors.

IX The area series.

The area series has a different line type than the scatter series. We don’t set the scatter type here since its set to “None” by default.

The data in both line series is set in the same way as in the bar series and we don’t cite it again.


LineSeries series3 = new LineSeries();
series3.setLineType(LineType.Area);
...
chart.addSeries(series3);

Here is the final chart:

An elegant combination chart for Android mobile devices.

An elegant combination chart for Android mobile devices.

The sample is available for download from here:

Download Android Combination Chart Sample

Read more about MindFusion Charting for Android library here.

Real-time Chart: Amplification Plot

MindFusion.RealTimeCharting for WPF assembly lets you visualize huge (and by that we mean huge) amounts of data with no special load on the machine it runs on. We drew inspiration from a popular chart in molecular biology – Real-time PCR, which:

can provide a simple and elegant method for determining the amount of a target sequence or gene that is present in a sample.

More on the topic here.

Since we self-generate our data, the result graphics are not that much the real thing but they demonstrate the algorithm of building the chart pretty well. Let’s start:

1. Create the chart

Drag the RealTimeChart from the toolbox or add a reference to the MindFusion.RealTimeCharting.Wpf assembly. The chart has no initial data so we start with a simple X-axis on the screen. We name our chart “rtChart”.

2. Customizing the X-axis

The X-axis is accessible via the rtChart.XAxis property. It exposes many appearance settings, from which we start with Interval, Length and Origin – they will define our axis. When data accumulates, the initial axis labels shall be replaced with their updated values.

   rtChart.XAxis.Title = "Cycle";
   rtChart.XAxis.Interval = 2;
   rtChart.XAxis.Length = 50;
   rtChart.XAxis.Origin = 0;
   rtChart.XAxis.LabelFormat = "0";
   rtChart.XAxis.PinLabels = false;

It’s worth noting that we don’t pin labels e.g. they will move along the axis as new data is added. We need no trailing zeros, so the LabelFormat is “0”.

3. The Y-axes

There is no limit on how many Y-axis we will create. In our sample we will use two: one at each side of the chart plot area. We need two instances of the Axis class, which we add to YAxisCollection and Y2AxisCollection respectively. Before we add them, we set their appearance. We want tick marks and rotated title. Note that we align the second axis (Y2) to the right.

   Axis yAxis = new Axis();
   yAxis.Origin = 0.0;
   yAxis.Length = 1;
   yAxis.Interval = 0.1;
   yAxis.Title = "ΔRn";
   yAxis.TitleRotationAngle = -90.0;
   yAxis.TitleFontFamily = new FontFamily("Verdana");
   yAxis.LabelFontFamily = new FontFamily("Verdana");
   yAxis.TickLength = 5;
   yAxis.TitleOffset = 10;
   rtChart.YAxisCollection.Add(yAxis);          

   yAxis = new Axis();
   yAxis.Origin = 0.0;
   yAxis.Length = 100;
   yAxis.Interval = 10;
   yAxis.Title = "Fluorescene";
   yAxis.TitleRotationAngle = -90.0;
   yAxis.TitleFontFamily = new FontFamily("Verdana");
   yAxis.LabelFontFamily = new FontFamily("Verdana");
   yAxis.TickLength = 5;
   yAxis.TitleOffset = 10;
   yAxis.LabelHorizontalAlignment = HorizontalAlignment.Right;
   rtChart.Y2AxisCollection.Add(yAxis);

4. Chart series

We need four series – two of them will be bound to Y and two – to Y2. It’s important to note that axes must be initialized before the series, because each series is associated with a given Y-axis when created.

Each chart series is an instance of the Series class. We want to show scatters at each series – for that we use the ScatterType property. Since we plan to show a legend, it’s important to set the Title of each series – because this title will be used as a legend label. Here is sample code for the first series:

  series1 = new Series(rtChart.YAxisCollection[0])
  {
      Stroke = new SolidColorBrush(Colors.Green),
      ScatterStroke = new SolidColorBrush(Colors.Green),
      Fill = new SolidColorBrush(Colors.Green),
      ScatterType = ScatterType.Diamond,
      Title = "Sample 1",
      TitleFontFamily = new FontFamily("Verdana"),
      TitleFontSize = 12

   };

    .......
   rtChart.SeriesCollection.Add(series1);

5. Data

Data is added directly to the Series.Data property. You can add a batch of points or one point at a time. The property requires that you add a Point e.g. you must set the X and Y values simultaneously:

Point[] points1 = new Point[clusterSize];

//generate some dummy data
...

series1.Data.AddRange(points1);
rtChart.Commit(minNewX);

Don’t forget to call the Commit() method in one of its overloads – it signals to the chart that new data has been added and refresh is needed.

6. Final adjustments

We want a legend and we turn on ShowLegend. The initial result is a legend in 4 rows, which does not look beautifully on our chart. We plat for a while with LegendWidth and LegendHeight and come up with a satisfactory outlook for our legend – in two columns, centered below the plot area.

Adding a tooltip is also easy – we set ShowFallbackTooltip to true. Since the chart might have numerous Y-axis we must choose, which axis the tooltip is bound to. In our case it’s the first one:

    rtChart.TooltipVisibility = Visibility.Visible;
    rtChart.ShowFallbackTooltip = true;
    rtChart.TooltipAxis = rtChart.YAxisCollection[0];

    rtChart.ShowLegend = true;
    rtChart.LegendHeight = 70;

We adjust the grid according to the data we have:

    rtChart.MajorGridSizeY = 50;
    rtChart.MajorGridSizeX = 2;

7. That’s it

Here is the final result:

Real-time chart: amplification plot sample.

Real-time chart: amplification plot sample.

Of course, there are many other settings and possibilities in the control. You can download the sample and expand its functionality and appearance:

Real-time Chart – Amplification Plot Sample Download

MindFusion.RealTimeCharting for WPF is part of MindFusion.Charting for WPF component, which also includes MindFusion.Gauges for WPF. Check the trial version for more practical, beautiful and easy to build charts and gauges.

About MindFusion.RealTimeCharting for WPF: A WPF programming component, which has been designed and developed to render real-time charts with huge amounts of data in a fast and efficient manner. The component uses innovative approach to draw the chart graphics, which forgoes the traditional constructing of a tree with the visual elements in WPF. This way CPU load remains minimal and graphics of tens of thousands of points are rendered with impressive speed. The tool supports unlimited number of Y and Y2 axes, legend, tooltip, background image, grid and more.

About MindFusion.Charting for Wpf: A programming component that combines powerful charting capabilities with an elegant API and easy use. Among the features of the control are fully customizable grid, positive and negative values on all chart axes, 3D charts, gauges and many more – read a detailed list here.

The control provides detailed documentation and various samples that demonstrate how to customize every type of chart. It supports a wide range of 2D and 3D charts including bar, line, radar, bubble pie etc. You can add tooltips, define themes, perform hit testing, zoom and more.