Click here to Skip to main content
15,867,308 members
Articles / Desktop Programming / X11

Writing a XAML application for X11 and Windows drawing a chessboard to demonstrate DrawingBrush

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
14 Feb 2017CPOL7 min read 16.4K   172   2   1
Currently none of the big Linux/Unix (X11) GUI application frameworks (GTK+, KDE) support XAML based application development. The Moonlight project (including XAML support) was abandoned on May 29, 2012. This article reviews a XAML based application utilizing the DrawingBrush with offset and tiles.

Image 1 Download XamlChessBoard_X11_32.zip Mono solution including full source and executable
Image 2 Download XamlChessBoard_X11_64.zip Mono solution including full source and executable
Image 3 Download XamlChessBoard_Win10.zip Visual Studio 2015 solution including full source and executable

Introduction

This article is a case study, how to write a MVVM (Model View ViewModel) design pattern based X11/Windows (cross platform) application (utilizing the DrawingBrush including offset and repeating tiles) with XAML using the Roma Widget Set (Xrw). The Roma Widget Set is a zero dependency GUI application framework for X11 (it requires only assemblies of the free Mono standard installation and libraries of the free X11 distribution; it doesn't particularly require GNOME, KDE or commercial libraries) and is implemented entirely in C#.

This article continues the works Writing a XAML dialog application for X11, Writing a XAML ribbon application for X11, Writing a XAML application for X11 with massive data binding and zero code, Writing a XAML calculator application for X11, Writing a XAML application with geometry objects (shapes) for X11, Writing a XAML application for X11 with UserControls, Writing a XAML 7 segment LCD display UserControl for X11 and Windows and Writing a XAML Minesweeper game for X11 and Windows. As far as i know, this (utilizing the Xrw) is the first attempt to use XAML for X11 application development after the abandonment of Moonlight.

Neither the Roma Widget Set nor the XAML implementation are complete. This sample application is intended as a more complex 'proof of concept' and checks out if and how it is possible bo create MVVM design pattern based X11/Windows (cross platform) application with XAML.

Since this ninth attempt to use XAML for a X11 application development has been successful, other articles about XAML using the Roma Widget Set on X11 will follow centenly.

Background

The Motivation and the general Concept to use XAML for X11 application development are already explained in the Writing a XAML dialog application for X11 article.

Some major enhancements (System.Windows.Media.GeometryGroup, System.Windows.Media.DrawingBrush and X11.X11DrawingBrushInfo) have been made and some bugs of the Xrw XAML wrapper have been fixed for this demonstration application after the release of Xrw version 0.9.

Focus

Since the previous eight articles "Writing a XAML ..." already demonstrated several MVVM techniques, this article shall demonstrate that with XAML for X11

  • a windows compatible DrawingBrush can create easily a nice looking chess board utilizing drawing offset, repeating tiles and color gradient.

Using the code

The sample application was written with Mono Develop 2.4.1 for Mono 2.8.1 on OPEN SUSE 11.3 Linux 32 bit EN and GNOME desktop. Neither the port to any older nor to any newer version should be a problem. The sample application's solution is build with MONO/.NET 3.5. It consists of two projects (the complete sources are provided for download):

  • XamlChessBoard contains the source code of the sample application.
  • XamlPreprocessor contains the source code of the XAML preprocessor.

The sample application is also tested with Mono Develop 3.0.6 for Mono 3.0.4 on OPEN SUSE 12.3 Linux 64 bit DE and GNOME desktop, IceWM, TWM und Xfce.

The only difference between the 32 bit and the 64 bit solution is the definition of some X11 specific data types, as already described in the Programming Xlib with Mono develop -Part 1: Low level (proof of concept) article.

The Xlib/X11 window handling is based on the X11Wrapper assembly version 1.0 (a library version 1.0 release candidate is included in this solution), that defines the function prototypes, structures and types for Xlib/X11 calls to the libX11.so. This assembly has been developed for the Programming Xlib with Mono Develop - Part 1: Low-level (proof of concept) project and has been advanced during the Programming the Roma Widget Set (C# X11) - a zero dependency GUI application framework - Basics project.

The GUI framework is based on the Xrw assembly version 1.0 (a library version 1.0 release candidate is included in this solution), that defines the widgets/gadgets and its wrapper classes used within the XAML code (that should be as near to the Microsoft® original as reasonable). This assembly has been developed during the Programming the Roma Widget Set (C# X11) - a zero dependency GUI application framework - Basics project.

The sample application implements a DrawingBrush drawingbrushBoard that utilizes its Viewport and TileMode properties to realize repeating tiles, a LinearGradientBrush to polish the look of the black fields and its parent Rectangle's Margin property to realize a border around the board (offset to the parent Canvas).

The Windows Visual Studio 2015 project of the sample application is completely based on the source code of the article DrawingBrush in WPF by Purushottam Rathore (many thanks for tis great idea to demonstrate DrawingBrush). The Linux/Unix (X11) Mono projects are derived from this source code.
Image 4

Advice: To use the class library documentation shortcut (F1) from MonoDevelop, the "mono-tools" package has to be installed.

The images of the sample application show the chess board on several platforms.

The first image shows the sample application on OPEN SUSE 11.3 Linux 32 bit EN and GNOME desktop.

Image 5

The second image shows the sample application on OPEN SUSE 12.3 Linux 64 bit DE and Xfce.

Image 6

The third image shows the sample application on Windows® 10 64 Bit Edition.

Image 7

The application window utilizes the System.Windows.Controls.Canvas as its root layout manager. It also defines the child System.Windows.Shapes.Rectangle and its System.Windows.Media.DrawingBrush used to fill the rectangle.

The layout is defined by the rectangle's Margin property. The drawing brush size is 100px * 100px while the rectangle's width and height are 400px * 400px. Therefore the drawing brush must be applied 4 times in x and 4 times in y to fill the rectangle entirely.

There is no functional difference between the X11 and Windows® 10 versions of the sample application, they share the same XAML code (except the margin values) and there is no code behind (so nothing can differ here).

Walk through

Main view file context

The XAML (MainWindow.xaml)

Here the complete code of the XAML file (X11 32 Bit MonoDevelop solution):

XML
<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ext="clr-namespace:System.Windows.ExtControls"
    x:Class="XamlChessBoard.MainWindow"
    Name="DigiClock" Title="Chess Board"
    Height="500" Width="500" Icon="XrwIcon16.bmp"
    Background="#FFDDDDDD">
  <Canvas Name="canvasRoot" Background="SkyBlue">
    <Rectangle Name="rectangleBoard" Width="400" Height="400" Margin="50,45,40,40">
      <Rectangle.Fill>
        <DrawingBrush x:Name="drawingbrushBoard" Viewport="0,0,0.25,0.25" TileMode="Tile">
          <DrawingBrush.Drawing>
            <DrawingGroup x:Name="drawinggroupBoard">
              <GeometryDrawing x:Name="geometrydrawingWhiteBackground" Brush="White">
                <GeometryDrawing.Geometry>
                  <RectangleGeometry x:Name="geometryWhiteBackground" Rect="0,0,100,100" />
                </GeometryDrawing.Geometry>
              </GeometryDrawing>
    
              <GeometryDrawing x:Name="geometrydrawingBlackForeground">
                <GeometryDrawing.Geometry>
                  <GeometryGroup x:Name="geometrygroupBlackForeground">
                    <RectangleGeometry x:Name="rectanglegeometryBlack1" Rect="0,0,50,50" />
                    <RectangleGeometry x:Name="rectanglegeometryBlack2" Rect="50,50,50,50" />
                  </GeometryGroup>
                </GeometryDrawing.Geometry>    
                <GeometryDrawing.Brush>
                  <LinearGradientBrush>
                    <GradientStop Offset="0.0" Color="Black" />
                    <GradientStop Offset="1.0" Color="Gray" />
                  </LinearGradientBrush>
                </GeometryDrawing.Brush>
              </GeometryDrawing>
            </DrawingGroup>
          </DrawingBrush.Drawing>
        </DrawingBrush>
      </Rectangle.Fill>
    </Rectangle>
  </Canvas>
</Window

The sample application doesn't have any resources - the DrawingBrush is defined directly within the Rectangle's Fill property besause it is used/referenced only once.

To draw background and foreground with one single brush, background and foreground must be combined - and this is done within the DrawingGroup drawinggroupBoard.

While background is realized by just one white rectangle GeometryDrawing geometrydrawingWhiteBackground, the foreground GeometryDrawing geometrydrawingBlackForeground requires to combine two black rectangles - and this is done within the GeometryGroup geometrygroupBlackForeground.

To fill the chess bord (defined by the Rectangle rectangleBoard) entirely, the DrawingBrush must be applied 4 times in x and y. The Viewport property of the DrawingBrush defines no mapping offset for the DrawingBrush relative to the Rectangle to fill (see Viewport="0, 0, ...") and a scale of 25% with regard to the Rectangle size (see Viewport="..., 0.25, 0.25"). The TileMode property of the DrawingBrush enables drawing of repeated tiles.

The code behind (MainWindow.xaml.cs)

The corresponding C# code file of the main view is MainWindow.xaml.cs and it contains just the minimum code:

C#
namespace XamlChessBoard
{
    /// <summary>Interaction logic for MainWindow.xaml</summary>
    /// <remarks>Idea based on article
    /// <see cref="http://www.c-sharpcorner.com/uploadfile/prathore/drawingbrush-in-wpf/"/>.</remarks>
    public partial class MainWindow : XrwXAML.Window
    {
        public MainWindow()
            : base (-1, -1)
        {
            InitializeComponent();
        }
    }
}

Main view model file context

There is no ModelView for the main view, because no Model is required.

Main model file context

There is no Model for the main view, because no data are to process.

Points of Interest

This is another XAML application for X11, fully compatible with Microsoft®, showing the main advantages of this approach (compared to an implementation with GTK+ or KDE): The 100% cross platform compatible GUI definition and the savings of code lines to create the GUI.

The use of DrawingBrush offers a very simple way to create a polished and this can be applied for X11 and Windows (cross platform).

History

The first version of this article is from 12. February 2017.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Team Leader Celonis SA
Germany Germany
I am currently the CEO of Symbioworld GmbH and as such responsible for personnel management, information security, data protection and certifications. Furthermore, as a senior programmer, I am responsible for the automatic layout engine, the simulation (Activity Based Costing), the automatic creation of Word/RTF reports and the data transformation in complex migration projects.

The main focus of my work as a programmer is the development of Microsoft Azure Services using C# and Visual Studio.

Privately, I am interested in C++ and Linux in addition to C#. I like the approach of open source software and like to support OSS with own contributions.

Comments and Discussions

 
QuestionPerfect article :) Pin
Member 918708111-Apr-17 3:37
Member 918708111-Apr-17 3:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.