Windows 8 custom drawing

Unlike the forerunners – Windows 7 and Windows XP – Windows 8 uses new Metro interface. This interface appears after the boot of the system; it functions similarly to the desktop – the start screen has application bars (much like icons) opening applications, sites or directories (depending on which element or app the bar is linked with).

Metro is an inside code name of Microsoft design language, oriented on typographical design of user interface.

Microsoft created Metro to strengthen the general tasks group for speeding up the usage. This goal is achieved by turning off unnecessary graphics and using actual content as the main user interface.

Animation plays an important role. Microsoft recommends smooth transitions and user interaction based on real movements (like pressing or moving). The user gets an impression of “live” and responsive interface with “an added feeling of depth”.

My task was to create a grid for Metro Application.

In order to complete the task I used UIElement Path. Object GeometryGroup was assigned to object Path in property Path.

var path = new Path
            {
                Stroke = new SolidColorBrush(Colors.Gray),
                StrokeThickness = 1,
                Data = BuildGrid(widthGrid, heightGrid, interval)
            };
            Children.Add(path);

Method BuildGrid builds a grid with parameters widthGrid and heightGrid. Parameter interval manages the interval between the lines of the grid.

private GeometryGroup BuildGrid(double widthLine, double heigthLine, double interval)
        {
            var geometryGroup = new GeometryGroup();
            geometryGroup.Children.Clear();

            geometryGroup = LineLayoutGrid(widthLine, heigthLine, interval);
            var intervalColumn = 0.0;
            var intervalRow = 0.0;
            for (var i = 0; i < Math.Floor(widthLine / interval); i++)
            {
                if (intervalColumn > interval)
                        geometryGroup.Children.Add(new LineGeometry { StartPoint = new Point { X = intervalColumn, Y = interval * 2 }, EndPoint = new Point { X = intervalColumn, Y = heigthLine } });
                intervalColumn += interval;
            }
            for (var i = 0; i < Math.Floor(heigthLine / interval); i++)
            {
                if (intervalRow > interval)
                        geometryGroup.Children.Add(new LineGeometry { StartPoint = new Point { X = interval * 2, Y = intervalRow }, EndPoint = new Point { X = widthLine, Y = intervalRow } });
                intervalRow += interval;
            }
            return geometryGroup;
        }

The horizontal and the vertical scale lines are also built with the help of GeometryGroup; the method of line building is called LineLayoutGrid.

private static GeometryGroup LineLayoutGrid(double width, double height, double interval)
        {
            var geometryGroup = new GeometryGroup();
            geometryGroup.Children.Add(new LineGeometry { StartPoint = new Point { X = 0.0, Y = 0.0 }, EndPoint = new Point { X = 0.0, Y = height } });
            geometryGroup.Children.Add(new LineGeometry { StartPoint = new Point { X = 0.0, Y = height }, EndPoint = new Point { X = width, Y = height } });
            geometryGroup.Children.Add(new LineGeometry { StartPoint = new Point { X = width, Y = height }, EndPoint = new Point { X = width, Y = 0.0 } });
            geometryGroup.Children.Add(new LineGeometry { StartPoint = new Point { X = width, Y = 0.0 }, EndPoint = new Point { X = 0.0, Y = 0.0 } });
            var intervalTopDivision = interval * 2;
            var intervalLeftDivision = interval * 2;
            for (var i = 0; i < Math.Floor(width / (interval / 2.0)); i++)
            {
                if (intervalTopDivision < width)
                {
                    if ((i % 5) == 0 && (i % 10) == 0)
                        geometryGroup.Children.Add(new LineGeometry { StartPoint = new Point { X = intervalTopDivision, Y = 0.0 }, EndPoint = new Point { X = intervalTopDivision, Y = interval * 2 } });
                    else if ((i % 5) == 0)
                        geometryGroup.Children.Add(new LineGeometry { StartPoint = new Point { X = intervalTopDivision, Y = 0.0 }, EndPoint = new Point { X = intervalTopDivision, Y = interval } });
                    else
                        geometryGroup.Children.Add(new LineGeometry { StartPoint = new Point { X = intervalTopDivision, Y = 0.0 }, EndPoint = new Point { X = intervalTopDivision, Y = interval / 2 } });
                }
                intervalTopDivision += interval / 2;
            }
            for (var i = 0; i < Math.Floor(height / (interval / 2.0)); i++)
            {
                if (intervalLeftDivision < height)
                {
                    if ((i % 5) == 0 && (i % 10) == 0)
                        geometryGroup.Children.Add(new LineGeometry { StartPoint = new Point { X = 0.0, Y = intervalLeftDivision }, EndPoint = new Point { X = interval * 2, Y = intervalLeftDivision } });
                    else if ((i % 5) == 0)
                        geometryGroup.Children.Add(new LineGeometry { StartPoint = new Point { X = 0.0, Y = intervalLeftDivision }, EndPoint = new Point { X = interval, Y = intervalLeftDivision } });
                    else
                        geometryGroup.Children.Add(new LineGeometry { StartPoint = new Point { X = 0.0, Y = intervalLeftDivision }, EndPoint = new Point { X = interval / 2, Y = intervalLeftDivision } });
                }
                intervalLeftDivision += interval / 2;
            }
            return geometryGroup;
        }

As a result I got a grid with the horizontal and the vertical scale lines consisting of many LineGeometry objects, which is displayed as one Path object on MainPage.

When Pinch/zoom touch mode takes place, the grid is rebuilt with new interval ZoomFactor * interval, where ZoomFactor is a value showing the current zoom in or zoom out coefficient, and interval is a default interval set during the first grid building.